import { useState } from 'react'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import MaterialAccessScopeField from './MaterialAccessScopeField'
import type { MaterialAccessScope } from '@/lib/material-access-scope'

test('使用范围默认通用，切换专属时提交稳定值并解释组织共享', async () => {
  const changed = jest.fn()
  function Form() {
    const [value, setValue] = useState<MaterialAccessScope>('general')
    return <MaterialAccessScopeField id="scope" value={value} onChange={(next) => { changed(next); setValue(next) }} />
  }
  const user = userEvent.setup()
  render(<Form />)
  const field = screen.getByRole('combobox', { name: '使用范围 *' })
  expect(field).toHaveTextContent('通用素材')
  await user.click(field)
  await user.click(screen.getByRole('option', { name: '运营中心 G 专属' }))
  expect(changed).toHaveBeenCalledWith('operations_g')
  expect(field).toHaveTextContent('运营中心 G 专属')
  expect(screen.getByText('仅运营中心 G 及其下属部门成员可见，中心内共享。')).toBeInTheDocument()
  expect(field).toHaveFocus()
})

test('上传期间禁止更改使用范围', async () => {
  const changed = jest.fn()
  render(<MaterialAccessScopeField id="scope" value="operations_g" onChange={changed} disabled />)
  const field = screen.getByRole('combobox', { name: '使用范围 *' })
  expect(field).toBeDisabled()
  await userEvent.click(field)
  expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
  expect(changed).not.toHaveBeenCalled()
})