import { Link } from 'react-router-dom'
import { topicOptionLabel } from '../lib/placementTopics'
import type { PlacementTopicData } from '../types/placementTopic'
import { Field, Select } from './ui'

type Props = {
  topicId: string
  topics: PlacementTopicData[]
  onChange: (id: string) => void
  disabled?: boolean
}

export function TopicSwitcher({ topicId, topics, onChange, disabled }: Props) {
  if (!topics.length) {
    return (
      <div className="ac-brand-switcher ac-brand-switcher--empty">
        <p className="text-sm text-ink-secondary">
          尚未建立主題。
          <Link to="/placement/topics" className="ml-1 font-semibold text-brand hover:underline">
            前往找 TA
          </Link>
        </p>
      </div>
    )
  }

  return (
    <div className="ac-brand-switcher">
      <Field label="目前主題">
        <Select
          value={topicId}
          onChange={(e) => onChange(e.target.value)}
          disabled={disabled || !topics.length}
        >
          {!topicId ? <option value="">請選擇主題</option> : null}
          {topics.map((item) => (
            <option key={item.id} value={item.id}>
              {topicOptionLabel(item)}
            </option>
          ))}
        </Select>
      </Field>
      <Link
        to="/placement/topics"
        className="ac-brand-switcher__link text-xs font-semibold text-brand hover:underline"
      >
        管理主題
      </Link>
    </div>
  )
}
