import { describe, it, expect } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import { WysiwygBuilderPage } from '@/components/wysiwyg/WysiwygBuilderPage'

describe('WYSIWYG Builder - Form Help (aria-describedby)', () => {
  it('Input: edits Help in Properties and Canvas reflects help + aria-describedby', async () => {
    render(<WysiwygBuilderPage />)

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

    const obj = await screen.findByTestId(/obj-input-/)
    fireEvent.mouseDown(obj, { clientX: 80, clientY: 80 })
    fireEvent.mouseUp(screen.getByTestId('wysiwyg-canvas'))

    const panel = await screen.findByLabelText('Properties Panel')
    const helpInput = panel.querySelector('input[aria-label="Help"]') as HTMLInputElement
    fireEvent.change(helpInput, { target: { value: 'We will not spam you.' } })

    const rendered = await screen.findByTestId(/obj-input-/)
    expect(rendered).toHaveTextContent('We will not spam you.')
    const inputEl = rendered.querySelector('input') as HTMLInputElement
    expect(inputEl).toBeTruthy()
    const describedby = inputEl.getAttribute('aria-describedby')
    expect(describedby).toMatch(/-help$/)
    const helpEl = rendered.querySelector(`#${describedby}`)
    expect(helpEl?.textContent).toContain('We will not spam you.')
  })
})