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

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

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

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

    // edit props in Properties panel
    const panel = await screen.findByLabelText('Properties Panel')
    const nameInput = panel.querySelector('input[aria-label="Name"]') as HTMLInputElement
    const labelInput = panel.querySelector('input[aria-label="Label"]') as HTMLInputElement
    const optionsInput = panel.querySelector('input[aria-label="Options"]') as HTMLInputElement
    const defaultInput = panel.querySelector('input[aria-label="Default"]') as HTMLInputElement

    fireEvent.change(nameInput, { target: { value: 'size' } })
    fireEvent.change(labelInput, { target: { value: 'Size' } })
    fireEvent.change(optionsInput, { target: { value: 'S,M,L' } })
    fireEvent.change(defaultInput, { target: { value: 'M' } })

    // Canvas should reflect label and select options/default
    const rendered = await screen.findByTestId(/obj-select-/)
    expect(rendered).toHaveTextContent('Size')
    const selectEl = rendered.querySelector('select') as HTMLSelectElement
    expect(selectEl).toBeTruthy()
    const opts = Array.from(selectEl.querySelectorAll('option')).map(o => o.textContent)
    expect(opts).toEqual(['S','M','L'])
    expect(selectEl.value).toBe('M')
  })
})