'use client'

import { useState } from 'react'
import { linkText, participantText } from '@/lib/i18n/cases'
import { personnelText } from '@/lib/i18n/people'
import { PARTICIPANT_ROLES } from '@/lib/cases/terms'
import { AddPanel, PanelSelect } from '@/components/AddPanel'
import { linkCaseToPersonAction } from '../actions'

/**
 * Einen Fall von der Personalakte aus verknüpfen.
 *
 * Derselbe Vorgang wie „Beteiligte eintragen" auf der Fallakte, nur von der
 * anderen Seite gedacht: dort sucht man die Person, hier den Fall. Deshalb ein
 * Eingabefeld für das Aktenzeichen und keine Auswahlliste — eine Liste aller
 * sichtbaren Fälle wäre auf einer Personalakte am falschen Ort.
 */
export function LinkCase({ personnelFileId }: { personnelFileId: string }) {
  const [caseNumber, setCaseNumber] = useState('')
  const [role, setRole] = useState<string>('SUBJECT')

  return (
    <AddPanel
      label={personnelText.linkCase}
      hint={personnelText.linkCaseHint}
      disabled={caseNumber.trim() === ''}
      onSubmit={async () => {
        const ergebnis = await linkCaseToPersonAction({ personnelFileId, caseNumber, role })
        if (ergebnis.ok) setCaseNumber('')
        return ergebnis
      }}
    >
      <PanelSelect value={role} onChange={setRole} label={participantText.role}>
        {PARTICIPANT_ROLES.map((value) => (
          <option key={value} value={value}>
            {participantText.roles[value] ?? value}
          </option>
        ))}
      </PanelSelect>
      <input
        value={caseNumber}
        onChange={(event) => setCaseNumber(event.target.value)}
        placeholder={linkText.target}
        aria-label={linkText.target}
        className="border border-line bg-raised px-2 py-1 font-mono text-2xs"
      />
    </AddPanel>
  )
}