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

describe('WYSIWYG Builder - Form Radio', () => {
  it('adds a Radio group, edits props, and reflects on Canvas', async () => {
    render(<WysiwygBuilderPage />)

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

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

    const panel = await screen.findByLabelText('Properties Panel')
    const nameInput = panel.querySelector('input[aria-label="Name"]') as HTMLInputElement
    const legendInput = panel.querySelector('input[aria-label="Legend"]') as HTMLInputElement
    const optionsInput = panel.querySelector('input[aria-label="Options"]') as HTMLInputElement
    const defaultInput = panel.querySelector('input[aria-label="Default"]') as HTMLInputElement
    const requiredCheckbox = panel.querySelector('input[aria-label="Required"]') as HTMLInputElement

    fireEvent.change(nameInput, { target: { value: 'color' } })
    fireEvent.change(legendInput, { target: { value: 'Color' } })
    fireEvent.change(optionsInput, { target: { value: 'Red,Green,Blue' } })
    fireEvent.change(defaultInput, { target: { value: 'Green' } })
    fireEvent.click(requiredCheckbox)

    const rendered = await screen.findByTestId(/obj-radio-/)
    expect(rendered).toHaveTextContent('Color')
    const inputs = Array.from(rendered.querySelectorAll('input[type="radio"]')) as HTMLInputElement[]
    expect(inputs.map(i => i.value)).toEqual(['Red','Green','Blue'])
    const checked = inputs.find(i => i.checked)
    expect(checked?.value).toBe('Green')
  })
})