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

const presets = [
  { id: 'red', label: 'Red', value: 'var(--mod-color-danger)' },
  { id: 'blue', label: 'Blue', value: 'var(--mod-color-accent)' },
]

describe('ColorPicker [SR]', () => {
  it('announces radiogroup name and selected preset label', async () => {
    const onChange = vi.fn()
    render(<ColorPicker aria-label="Theme color" presets={presets} onChange={onChange} value="var(--mod-color-danger)" />)

    const firstPhrase = await spokenPhraseUntil(document.body, (value) => value.toLowerCase().includes('theme color'))
    expect(firstPhrase.toLowerCase()).toContain('theme color')

    fireEvent.click(screen.getByRole('radio', { name: 'Blue' }))
    expect(onChange).toHaveBeenCalledWith('var(--mod-color-accent)')
  })
})