import {describe, expect, it} from 'vitest'
import {mount} from '@vue/test-utils'
import type {DefineComponent} from 'vue'
import TimePicker from './TimePicker.vue'

type TimePickerProps = {
  id?: string
  name?: string
  label?: string
  modelValue?: string | null
  placeholder?: string
  required?: boolean
  disabled?: boolean
  readonly?: boolean
  hint?: string
  error?: string
  success?: string
  clearable?: boolean
  inputClass?: string
  labelClass?: string
  groupClass?: string
}

const TimePickerForTest = TimePicker as DefineComponent<TimePickerProps>
const mountPicker = (props: TimePickerProps = {}) =>
  mount(TimePickerForTest, {props, attachTo: document.body})

describe('MalioTimePicker', () => {
  it('affiche le label et l\'icône horloge', () => {
    const wrapper = mountPicker({label: 'Heure'})
    expect(wrapper.get('label').text()).toBe('Heure')
    expect(wrapper.find('[data-test="clock-icon"]').exists()).toBe(true)
  })

  it('affiche la valeur HH:MM dans le champ', () => {
    const wrapper = mountPicker({modelValue: '14:30'})
    const input = wrapper.get('[data-test="time-field"]').element as HTMLInputElement
    expect(input.value).toBe('14:30')
  })

  it('ouvre le popover à molettes au clic', async () => {
    const wrapper = mountPicker()
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
    await wrapper.get('[data-test="time-field"]').trigger('click')
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
    expect(wrapper.find('[data-test="time-wheels"]').exists()).toBe(true)
  })

  it('n\'ouvre pas le popover si disabled', async () => {
    const wrapper = mountPicker({disabled: true})
    await wrapper.get('[data-test="time-field"]').trigger('click')
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
  })

  it('émet la valeur réglée depuis les molettes', async () => {
    const wrapper = mountPicker({modelValue: '09:30'})
    await wrapper.get('[data-test="time-field"]').trigger('click')
    wrapper.findComponent({name: 'MalioTimeWheels'}).vm.$emit('update:modelValue', '10:30')
    await wrapper.vm.$nextTick()
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['10:30'])
  })

  it('émet null au clic sur la croix', async () => {
    const wrapper = mountPicker({modelValue: '14:30'})
    await wrapper.get('[data-test="clear"]').trigger('click')
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
  })

  it('positionne aria-invalid et describedby sur erreur', () => {
    const wrapper = mountPicker({error: 'Heure requise'})
    const input = wrapper.get('[data-test="time-field"]')
    expect(input.attributes('aria-invalid')).toBe('true')
    expect(input.attributes('aria-describedby')).toBeTruthy()
    expect(wrapper.text()).toContain('Heure requise')
  })
})