'use client'

import { useMemo } from 'react'
import Select from '@/components/ui/Select'

interface MaterialTypeSelectProps {
  id: string
  value: string
  options: string[]
  counts: Record<string, number>
  onChange: (value: string) => void
  disabled?: boolean
}

export default function MaterialTypeSelect({ id, value, options, counts, onChange, disabled = false }: MaterialTypeSelectProps) {
  const rankedOptions = useMemo(() => options.some((option) => (counts[option] || 0) > 0)
    ? [...options].sort((left, right) => (counts[right] || 0) - (counts[left] || 0))
    : options, [options, counts])
  const hasCounts = rankedOptions.some((option) => (counts[option] || 0) > 0)
  return (
    <Select id={id} value={value} aria-labelledby={id + '-label'} disabled={disabled}
      optionCounts={hasCounts ? counts : undefined} menuHint={hasCounts ? '按素材数量排序' : undefined}
      onChange={(event) => onChange(event.target.value)}>
      {rankedOptions.map((option) => <option key={option} value={option}>{option}</option>)}
    </Select>
  )
}