import { describe, expect, it } from 'vitest'
import { render, fireEvent, screen, waitFor } from '@testing-library/react'
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from './Select'
import { spokenPhraseUntil } from './sr-test-utils'

describe('Select [SR]', () => {
  it('announces trigger role/name and selected option after activation', async () => {
    const onValueChange = (value: string) => value
    render(
      <Select onValueChange={onValueChange}>
        <SelectTrigger aria-label="Fruit">
          <SelectValue placeholder="Pick one" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="apple">Apple</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
        </SelectContent>
      </Select>,
    )

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

    const trigger = screen.getByRole('combobox', { name: 'Fruit' })
    fireEvent.keyDown(trigger, { key: 'ArrowDown' })
    const option = await screen.findByRole('option', { name: 'Banana' })
    fireEvent.keyDown(option, { key: 'Enter' })

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