import { fireEvent, render, screen } from '@testing-library/react'
import { NextIntlClientProvider } from 'next-intl'
import { describe, expect, test } from 'vitest'
import BuilderClientPage from './BuilderClientPage'
import messages from '../messages/en.json'

function Wrapper({ children }: { children: React.ReactNode }) {
  return (
    <NextIntlClientProvider messages={messages} locale="en">
      {children}
    </NextIntlClientProvider>
  )
}

describe('BuilderClientPage - inspector aria-describedby (Features/Testimonials)', () => {
  test('Features inputs reference help via aria-describedby', async () => {
    render(
      <Wrapper>
        <BuilderClientPage />
      </Wrapper>
    )

    fireEvent.click(screen.getByTestId('card-features'))
    fireEvent.click(await screen.findByLabelText('Select 0'))

    const feature0 = await screen.findByLabelText('Feature 0')
    expect(feature0).toHaveAttribute('aria-describedby', 'ins-features-help')
  })

  test('Testimonials inputs reference help via aria-describedby', async () => {
    render(
      <Wrapper>
        <BuilderClientPage />
      </Wrapper>
    )

    fireEvent.click(screen.getByTestId('card-testimonials'))
    fireEvent.click(await screen.findByLabelText('Select 0'))

    fireEvent.click(screen.getByRole('button', { name: /Add Testimonial/i }))

    const author0 = await screen.findByLabelText('Author 0')
    const quote0 = await screen.findByLabelText('Quote 0')
    expect(author0).toHaveAttribute('aria-describedby', 'ins-testimonials-help')
    expect(quote0).toHaveAttribute('aria-describedby', 'ins-testimonials-help')
  })
})