import { describe, expect, it } from 'vitest'
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
import { axe } from 'vitest-axe'
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
} from './DropdownMenu'

describe('DropdownMenu', () => {
  it('shows menu items only after the trigger is activated', async () => {
    render(
      <DropdownMenu>
        <DropdownMenuTrigger>Open menu</DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>Edit</DropdownMenuItem>
          <DropdownMenuItem>Delete</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>,
    )
    expect(screen.queryByRole('menuitem', { name: 'Edit' })).toBeNull()
    const trigger = screen.getByText('Open menu')
    trigger.focus()
    fireEvent.keyDown(trigger, { key: 'ArrowDown' })
    await waitFor(() => {
      expect(screen.getByRole('menuitem', { name: 'Edit' })).toBeTruthy()
      expect(screen.getByRole('menuitem', { name: 'Delete' })).toBeTruthy()
    })
  })

  it('exposes a checkbox item with role=menuitemcheckbox and its checked state after activation', async () => {
    render(
      <DropdownMenu>
        <DropdownMenuTrigger>Open menu</DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuCheckboxItem checked>Show grid</DropdownMenuCheckboxItem>
        </DropdownMenuContent>
      </DropdownMenu>,
    )
    expect(screen.queryByRole('menuitemcheckbox')).toBeNull()
    const trigger = screen.getByText('Open menu')
    trigger.focus()
    fireEvent.keyDown(trigger, { key: 'ArrowDown' })
    await waitFor(() => {
      const item = screen.getByRole('menuitemcheckbox', { name: 'Show grid' })
      expect(item.getAttribute('aria-checked')).toBe('true')
    })
  })

  it('exposes radio items with role=menuitemradio inside a radio group after activation', async () => {
    render(
      <DropdownMenu>
        <DropdownMenuTrigger>Open menu</DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuRadioGroup value="b">
            <DropdownMenuRadioItem value="a">Option A</DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="b">Option B</DropdownMenuRadioItem>
          </DropdownMenuRadioGroup>
        </DropdownMenuContent>
      </DropdownMenu>,
    )
    expect(screen.queryByRole('menuitemradio')).toBeNull()
    const trigger = screen.getByText('Open menu')
    trigger.focus()
    fireEvent.keyDown(trigger, { key: 'ArrowDown' })
    await waitFor(() => {
      expect(screen.getByRole('menuitemradio', { name: 'Option A' }).getAttribute('aria-checked')).toBe('false')
      expect(screen.getByRole('menuitemradio', { name: 'Option B' }).getAttribute('aria-checked')).toBe('true')
    })
  })

  it('migrates content shadow to token vars and stays axe-clean', async () => {
    const { container } = render(
      <DropdownMenu open>
        <DropdownMenuTrigger>Open menu</DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>Edit</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>,
    )
    expect(screen.getByRole('menu').className).toContain('shadow-[var(--mod-shadow-md)]')
    await expect(axe(container)).resolves.toHaveNoViolations()
  })
})