import { render, screen, within } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

import MaterialTypeSelect from '@/components/upload/MaterialTypeSelect'

const options = ['3D场景', '音乐', '直播切片', '任务-其他']

function renderSelect(counts: Record<string, number> = {}) {
  const onChange = jest.fn()
  render(
    <>
      <span id="upload-material-type-label">素材类型 *</span>
      <MaterialTypeSelect id="upload-material-type" value="3D场景" options={options} counts={counts} onChange={onChange} />
    </>,
  )
  return onChange
}

test('按首页数量降序排列可选类型，同数量保持原顺序，选择后关闭', async () => {
  const user = userEvent.setup()
  const onChange = renderSelect({ '3D场景': 2, '音乐': 12, '直播切片': 12, '任务-其他': 0 })

  await user.click(screen.getByRole('combobox', { name: '素材类型 *' }))
  const list = screen.getByRole('listbox', { name: '素材类型 *' })
  expect(within(list).getAllByRole('option').map((option) => option.getAttribute('aria-label')))
    .toEqual(['音乐', '直播切片', '3D场景', '任务-其他'])
  expect(within(list).getByText('按素材数量排序')).toBeInTheDocument()

  await user.click(within(list).getByRole('option', { name: '直播切片' }))
  expect(onChange).toHaveBeenCalledWith('直播切片')
  expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
})

test('无数量时保留原顺序，键盘可操作并用 Escape 关闭', async () => {
  const user = userEvent.setup()
  const onChange = renderSelect()
  const trigger = screen.getByRole('combobox', { name: '素材类型 *' })

  trigger.focus()
  await user.keyboard('{ArrowDown}')
  const list = screen.getByRole('listbox')
  expect(within(list).getAllByRole('option').map((option) => option.getAttribute('aria-label'))).toEqual(options)
  expect(within(list).queryByText('按素材数量排序')).not.toBeInTheDocument()

  await user.keyboard('{End}{Enter}')
  expect(onChange).toHaveBeenCalledWith('任务-其他')
  expect(trigger).toHaveFocus()

  await user.click(trigger)
  await user.keyboard('{Escape}')
  expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
  expect(trigger).toHaveFocus()
})