import { describe, it, expect } from 'vitest'
import { exportFrame } from '@/lib/wysiwyg/export'
import type { Frame } from '@/lib/wysiwyg/schema'

function baseFrame(): Frame {
  return {
    id: 'f', width: 400, height: 300, background: '#ffffff',
    layers: [{ id: 'l1', name: 'Base', visible: true, locked: false, objects: [] }],
  }
}

describe('wysiwyg export - forms aria-describedby(help)', () => {
  it('input: adds help element and aria-describedby linkage', () => {
    const f = baseFrame()
    f.layers[0].objects.push({ id: 'in1', type: 'input', x: 10, y: 20, width: 260, height: 48, rotate: 0, zIndex: 0, props: { name: 'email', label: 'Email', placeholder: '', required: false, help: 'We will not spam you.' } })
    const out = exportFrame(f)
    expect(out.html).toMatch(/<div id="in1">[\s\S]*<input id="in1-control" name="email" aria-describedby="in1-control-help"\/>[\s\S]*<small id="in1-control-help"/)
    expect(out.html).toMatch(/We will not spam you\./)
  })

  it('select: adds help and aria-describedby', () => {
    const f = baseFrame()
    f.layers[0].objects.push({ id: 'sel1', type: 'select', x: 0, y: 0, width: 100, height: 30, rotate: 0, zIndex: 0, props: { name: 'size', label: 'Size', options: ['S'], defaultValue: 'S', help: 'Choose wisely.' } })
    const out = exportFrame(f)
    expect(out.html).toMatch(/<select id="sel1-control" name="size" aria-describedby="sel1-control-help">/)
    expect(out.html).toMatch(/<small id="sel1-control-help"/)
  })

  it('textarea: adds help and aria-describedby', () => {
    const f = baseFrame()
    f.layers[0].objects.push({ id: 'ta1', type: 'textarea', x: 0, y: 0, width: 100, height: 60, rotate: 0, zIndex: 0, props: { name: 'msg', label: 'Msg', placeholder: '', rows: 3, required: false, help: 'Say hello.' } })
    const out = exportFrame(f)
    expect(out.html).toMatch(/<textarea id="ta1-control" name="msg" rows="3" aria-describedby="ta1-control-help"><\/textarea>/)
    expect(out.html).toMatch(/<small id="ta1-control-help"/)
  })

  it('radio: adds group help (fieldset) and does not use aria-describedby per item by default', () => {
    const f = baseFrame()
    f.layers[0].objects.push({ id: 'rg1', type: 'radio', x: 0, y: 0, width: 100, height: 60, rotate: 0, zIndex: 0, props: { name: 'color', legend: 'Color', options: ['Red'], defaultValue: 'Red', required: false, help: 'Pick one.' } })
    const out = exportFrame(f)
    expect(out.html).toMatch(/<fieldset id="rg1">[\s\S]*<legend>Color<\/legend>[\s\S]*<small id="rg1-help"/)
  })

  it('checkbox: adds group help (fieldset)', () => {
    const f = baseFrame()
    f.layers[0].objects.push({ id: 'cb1', type: 'checkbox', x: 0, y: 0, width: 100, height: 60, rotate: 0, zIndex: 0, props: { name: 'pick', legend: 'Pick', options: ['One'], defaultValues: [], required: false, help: 'You can pick many.' } })
    const out = exportFrame(f)
    expect(out.html).toMatch(/<fieldset id="cb1">[\s\S]*<legend>Pick<\/legend>[\s\S]*<small id="cb1-help"/)
  })
})