// Die Sprach-Auswahl (5.5.0, Commander: „bei Tonspuren und Untertiteln
// können Dropdowns hin") — gewählte Sprachen als Chips in Wunschreihenfolge,
// dazu ein Dropdown zum Hinzufügen. Die erste Tonsprache ist die
// Wunschsprache (auftrag.ts sprachwahl). Leer heißt „alle".
import { SPRACHEN, sprachName, sprachlisteAus, sprachlisteText } from '../../gemeinsam/sprachen'

export function SprachAuswahl({
  name,
  hinweis,
  wert,
  aufAendern,
}: {
  name: string
  hinweis: string
  wert: string
  aufAendern: (wert: string) => void
}) {
  const gewaehlt = sprachlisteAus(wert)
  const frei = SPRACHEN.filter((s) => !gewaehlt.includes(s.code))
  const setzen = (codes: string[]): void => aufAendern(sprachlisteText(codes))
  const verschieben = (code: string, richtung: -1 | 1): void => {
    const i = gewaehlt.indexOf(code)
    const j = i + richtung
    if (i < 0 || j < 0 || j >= gewaehlt.length) return
    const neu = [...gewaehlt]
    ;[neu[i], neu[j]] = [neu[j], neu[i]]
    setzen(neu)
  }
  return (
    <div>
      <span className="text-xs font-semibold text-dunst">{name}</span>
      <span className="ml-2 text-xs text-nebel">{hinweis}</span>
      <div className="mt-1 flex min-h-[38px] flex-wrap items-center gap-1.5 rounded-lg border border-white/12 bg-samt px-2 py-1.5">
        {gewaehlt.length === 0 && <span className="font-mono text-[11px] text-nebel">alle Sprachen der Disc</span>}
        {gewaehlt.map((code, i) => (
          <span key={code} className="inline-flex items-center gap-1 rounded-md border border-gold/40 bg-gold/12 px-2 py-0.5 text-[11px] text-gold-hell">
            <span className="font-mono text-[10px] text-gold/70">{i + 1}.</span>
            <span>{sprachName(code)}</span>
            <span className="font-mono text-[10px] text-nebel">{code}</span>
            <button type="button" onClick={() => verschieben(code, -1)} disabled={i === 0} className="ml-1 text-nebel hover:text-schnee disabled:opacity-30" title="nach vorn">
              ‹
            </button>
            <button type="button" onClick={() => verschieben(code, 1)} disabled={i === gewaehlt.length - 1} className="text-nebel hover:text-schnee disabled:opacity-30" title="nach hinten">
              ›
            </button>
            <button type="button" onClick={() => setzen(gewaehlt.filter((c) => c !== code))} className="ml-0.5 text-nebel hover:text-rot" title="entfernen">
              ×
            </button>
          </span>
        ))}
        <select
          value=""
          onChange={(e) => {
            if (e.target.value.length > 0) setzen([...gewaehlt, e.target.value])
          }}
          className="ml-auto rounded-md border border-white/12 bg-buehne px-2 py-1 font-mono text-[11px] text-dunst"
        >
          <option value="">+ Sprache …</option>
          {frei.map((s) => (
            <option key={s.code} value={s.code}>
              {s.name} ({s.code})
            </option>
          ))}
        </select>
      </div>
    </div>
  )
}