'use client'

import Select from '@/components/ui/Select'
import {
  MATERIAL_ACCESS_SCOPES,
  MATERIAL_ACCESS_SCOPE_LABELS,
  type MaterialAccessScope,
} from '@/lib/material-access-scope'
import { fieldControlClass, fieldHintClass, fieldLabelClass } from './upload-field-styles'

export default function MaterialAccessScopeField({
  id,
  value,
  onChange,
  disabled = false,
}: {
  id: string
  value: MaterialAccessScope
  onChange: (value: MaterialAccessScope) => void
  disabled?: boolean
}) {
  return (
    <div className="min-w-0 space-y-1">
      <label htmlFor={id} className={fieldLabelClass}>使用范围 *</label>
      <Select
        id={id}
        value={value}
        onChange={(event) => onChange(event.target.value as MaterialAccessScope)}
        disabled={disabled}
        required
        aria-describedby={`${id}-hint`}
        className={`${fieldControlClass} min-h-11`}
      >
        {MATERIAL_ACCESS_SCOPES.map((scope) => (
          <option key={scope} value={scope}>{MATERIAL_ACCESS_SCOPE_LABELS[scope]}</option>
        ))}
      </Select>
      <p id={`${id}-hint`} className={fieldHintClass}>
        {value === 'operations_g'
          ? '仅运营中心 G 及其下属部门成员可见，中心内共享。'
          : '按现有素材权限使用。'}
      </p>
    </div>
  )
}