import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Input from '../src/components/Input/Input.vue'

describe('Input', () => {
  it('renders an <input> element', () => {
    const wrapper = mount(Input)
    expect(wrapper.find('input').exists()).toBe(true)
  })
  it('reflects modelValue in input value', () => {
    const wrapper = mount(Input, { props: { modelValue: 'hello' } })
    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('hello')
  })
  it('emits update:modelValue on user input', async () => {
    const wrapper = mount(Input, { props: { modelValue: '' } })
    await wrapper.find('input').setValue('world')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['world'])
  })
  it('sets disabled attribute when disabled prop is true', () => {
    const wrapper = mount(Input, { props: { disabled: true } })
    expect((wrapper.find('input').element as HTMLInputElement).disabled).toBe(true)
  })
  it('applies error class when error prop is true', () => {
    const wrapper = mount(Input, { props: { error: true } })
    expect(wrapper.find('input').classes()).toContain('tvu-input--error')
  })
  it('applies size class', () => {
    const wrapper = mount(Input, { props: { size: 'l' } })
    expect(wrapper.find('input').classes()).toContain('tvu-input--l')
  })
  it('passes placeholder to native input', () => {
    const wrapper = mount(Input, { props: { placeholder: 'Search...' } })
    expect(wrapper.find('input').attributes('placeholder')).toBe('Search...')
  })
  it('applies tvu-input--filled class for filled variant', () => {
    const wrapper = mount(Input, { props: { variant: 'filled' } })
    expect(wrapper.find('input').classes()).toContain('tvu-input--filled')
  })
  it('line variant (default) does not add filled class', () => {
    const wrapper = mount(Input, { props: { variant: 'line' } })
    expect(wrapper.find('input').classes()).not.toContain('tvu-input--filled')
  })
  it('renders showCount counter when maxlength is provided', () => {
    const wrapper = mount(Input, {
      props: {
        modelValue: 'hello',
        showCount: true,
        maxlength: 20,
      },
    })

    expect(wrapper.find('input').attributes('maxlength')).toBe('20')
    expect(wrapper.find('.tvu-input-count').text()).toBe('5/20')
  })
})