import {describe, expect, it, vi} from 'vitest'
import {mount} from '@vue/test-utils'
import Accordion from './Accordion.vue'
import AccordionItem from './AccordionItem.vue'

function mountInAccordion(slot: string, accordionProps: Record<string, unknown> = {}) {
  return mount(Accordion, {
    props: accordionProps,
    slots: {default: slot},
    global: {components: {MalioAccordionItem: AccordionItem}},
  })
}

describe('MalioAccordionItem', () => {
  it('throws when used outside MalioAccordion', () => {
    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
    expect(() => mount(AccordionItem, {props: {title: 'Solo'}})).toThrow(
      /à l'intérieur de MalioAccordion/,
    )
    spy.mockRestore()
  })

  it('generates an auto id-based value and still toggles when value prop is omitted', async () => {
    const wrapper = mountInAccordion(
      `<MalioAccordionItem title="Sans value"><p>X</p></MalioAccordionItem>`,
    )
    const header = wrapper.find('button[aria-expanded]')
    expect(header.attributes('aria-controls')).toMatch(/-panel-malio-accordion-item-/)
    await header.trigger('click')
    expect(header.attributes('aria-expanded')).toBe('true')
  })

  it('applies headerClass and panelClass overrides via twMerge', () => {
    const wrapper = mountInAccordion(
      `<MalioAccordionItem title="T" value="t" header-class="bg-red-500" panel-class="text-lg"><p>X</p></MalioAccordionItem>`,
    )
    const header = wrapper.find('button[aria-expanded]')
    expect(header.classes()).toContain('bg-red-500')
    expect(wrapper.find('[role="region"]').html()).toContain('text-lg')
  })

  it('renders a rotating chevron icon', () => {
    const wrapper = mountInAccordion(
      `<MalioAccordionItem title="T" value="t"><p>X</p></MalioAccordionItem>`,
    )
    expect(wrapper.find('button[aria-expanded] svg').exists()).toBe(true)
  })
})