import { describe, expect, it, vi } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import { PalettePicker, type PaletteOption } from './PalettePicker'
import { spokenPhraseUntil } from './sr-test-utils'

const palettes: PaletteOption[] = [
  {
    id: 'default',
    label: 'Default',
    swatches: ['#ffffff', '#f7f7f7', '#3b5bdb', '#1a1a1a'],
    preview: {
      bg: '#ffffff',
      surface: '#f7f7f7',
      fg: '#1a1a1a',
      fgMuted: '#555555',
      accent: '#3b5bdb',
      accentFg: '#ffffff',
      border: '#e2e2e2',
    },
  },
  {
    id: 'forest',
    label: 'Forest',
    swatches: ['#0d2718', '#dbf2d9', '#1f7a43', '#08311d'],
    preview: {
      bg: '#0d2718',
      surface: '#dbf2d9',
      fg: '#ffffff',
      fgMuted: '#f0fff4',
      accent: '#1f7a43',
      accentFg: '#ffffff',
      border: '#1f7a43',
    },
  },
]

describe('PalettePicker [SR]', () => {
  it('announces the labeled radiogroup and selected option', async () => {
    const onChange = vi.fn()
    render(<PalettePicker options={palettes} value="default" onChange={onChange} aria-label="Palette" />)

    const groupPhrase = await spokenPhraseUntil(document.body, (value) => value.toLowerCase().includes('palette'))
    expect(groupPhrase.toLowerCase()).toContain('palette')

    fireEvent.click(screen.getByRole('radio', { name: 'Forest' }))
    expect(onChange).toHaveBeenCalledWith('forest')

    const selectedPhrase = await spokenPhraseUntil(document.body, (value) => value.toLowerCase().includes('forest'))
    expect(selectedPhrase.toLowerCase()).toContain('forest')
  })
})