import { describe, it, expect, beforeEach } from 'vitest'
import { mountSuspended } from '@nuxt/test-utils/runtime'
import FaqAccordion from './FaqAccordion.vue'
import { useContactModal } from '~/composables/useContactModal'

// useState is shared across tests within this file's Nuxt instance, so reset
// modal visibility before each test to keep them independent of run order.
beforeEach(() => {
  useContactModal().close()
})

const items = [
  { q: 'What ages do you serve?', a: 'Kids 5-14.' },
  { q: 'How do I volunteer?', a: 'Reach out via our <a data-contact-modal href="#">contact form</a>.' },
]

describe('FaqAccordion', () => {
  it('renders a question and answer for each item', async () => {
    const wrapper = await mountSuspended(FaqAccordion, { props: { items } })
    expect(wrapper.text()).toContain('What ages do you serve?')
    expect(wrapper.text()).toContain('Kids 5-14.')
    expect(wrapper.text()).toContain('How do I volunteer?')
  })

  it('opens the contact modal when a data-contact-modal link inside an answer is clicked', async () => {
    const wrapper = await mountSuspended(FaqAccordion, { props: { items } })
    const { isOpen } = useContactModal()
    expect(isOpen.value).toBe(false)

    await wrapper.find('[data-contact-modal]').trigger('click')

    expect(isOpen.value).toBe(true)
  })

  it('does not open the contact modal when clicking elsewhere in the answer', async () => {
    const wrapper = await mountSuspended(FaqAccordion, { props: { items } })
    const { isOpen } = useContactModal()

    await wrapper.findAll('.faq-answer')[0].trigger('click')

    expect(isOpen.value).toBe(false)
  })
})