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

type Opt = {label: string; value: string; disabled?: boolean}
type RadioGroupProps = {
  modelValue?: string | number | boolean | null
  options?: Opt[]
  label?: string
  name?: string
  inline?: boolean
  disabled?: boolean
  readonly?: boolean
  required?: boolean
  hint?: string
  error?: string
  success?: string
  reserveMessageSpace?: boolean
  groupClass?: string
  inputClass?: string
  labelClass?: string
}

const RadioGroupForTest = RadioGroup as DefineComponent<RadioGroupProps>

const options: Opt[] = [
  {label: 'Oui', value: 'oui'},
  {label: 'Non', value: 'non'},
]

const mountGroup = (props: RadioGroupProps = {}) =>
  mount(RadioGroupForTest, {props: {options, ...props}})

describe('MalioRadioGroup', () => {
  it('rend une option par entrée et un seul role=radiogroup', () => {
    const wrapper = mountGroup()
    expect(wrapper.findAll('input[type="radio"]')).toHaveLength(2)
    expect(wrapper.findAll('[role="radiogroup"]')).toHaveLength(1)
  })

  it('partage le même name natif entre les radios', () => {
    const wrapper = mountGroup({name: 'prestation'})
    const names = wrapper.findAll('input').map(i => i.attributes('name'))
    expect(names).toEqual(['prestation', 'prestation'])
  })

  it('coche selon modelValue', () => {
    const wrapper = mountGroup({modelValue: 'non'})
    const inputs = wrapper.findAll('input')
    expect((inputs[1].element as HTMLInputElement).checked).toBe(true)
    expect((inputs[0].element as HTMLInputElement).checked).toBe(false)
  })

  it('émet update:modelValue au clic sur une option', async () => {
    const wrapper = mountGroup()
    await wrapper.findAll('input')[1].trigger('change')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['non'])
  })

  it('affiche UN seul message d\'erreur réservant l\'espace', () => {
    const wrapper = mountGroup({error: 'Sélection requise'})
    const msgs = wrapper.findAll('[id$="-describedby"]')
    expect(msgs).toHaveLength(1)
    expect(msgs[0].text()).toBe('Sélection requise')
    expect(msgs[0].classes()).toContain('min-h-[1rem]')
    expect(msgs[0].classes()).toContain('text-m-danger')
    expect(wrapper.find('.radio-message').exists()).toBe(false)
  })

  it('propage l\'erreur aux radios enfants', () => {
    const wrapper = mountGroup({error: 'Sélection requise'})
    expect(wrapper.findAll('.radio-control.is-error')).toHaveLength(2)
    expect(wrapper.findAll('input').every(i => i.attributes('aria-invalid') === 'true')).toBe(true)
  })

  it('reserveMessageSpace=false sans message : aucune ligne réservée', () => {
    const wrapper = mountGroup({reserveMessageSpace: false})
    expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
  })

  it('rend la legend et la lie via aria-labelledby', () => {
    const wrapper = mountGroup({label: 'Prestation'})
    const legendId = wrapper.find('[id$="-label"]').attributes('id')
    expect(wrapper.get('[id$="-label"]').text()).toContain('Prestation')
    expect(wrapper.get('[role="radiogroup"]').attributes('aria-labelledby')).toBe(legendId)
  })

  it('inline : la zone radios réserve la hauteur d\'un champ', () => {
    const wrapper = mountGroup({inline: true})
    expect(wrapper.get('[role="radiogroup"]').classes()).toContain('min-h-[2.5rem]')
  })

  it('accepte des radios via le slot par défaut', () => {
    const wrapper = mount(RadioGroupForTest, {
      props: {modelValue: 'b'},
      slots: {
        default: () => [
          h(RadioButton, {value: 'a', label: 'A'}),
          h(RadioButton, {value: 'b', label: 'B'}),
        ],
      },
    })
    expect(wrapper.findAll('input')).toHaveLength(2)
    expect((wrapper.findAll('input')[1].element as HTMLInputElement).checked).toBe(true)
  })
})