"use client";

import { useActionState, useState } from "react";
import { useFormStatus } from "react-dom";
import { addStage } from "@/lib/actions";
import { defaultSentence, pathStages, sideStages, type Lang } from "@/lib/catalog";

function Submit() {
  const { pending } = useFormStatus();
  return <button type="submit" disabled={pending}>{pending ? "در حال ثبت" : "ثبت این لحظه"}</button>;
}

export function StageForm({
  caseId,
  language,
  suggestedStageId,
}: {
  caseId: number;
  language: Lang;
  suggestedStageId: string;
}) {
  const [state, formAction] = useActionState(addStage, { ok: true, message: "" });
  const [stageId, setStageId] = useState(suggestedStageId);
  const [sentence, setSentence] = useState(defaultSentence(suggestedStageId, language));

  function onStage(next: string) {
    setSentence((current) =>
      current.trim() === defaultSentence(stageId, language).trim()
        ? defaultSentence(next, language)
        : current,
    );
    setStageId(next);
  }

  return (
    <form action={formAction} className="stack">
      {!state.ok ? <p className="alert">{state.message}</p> : null}
      <input type="hidden" name="id" value={caseId} />
      <div className="fields two">
        <label>
          مرحله
          <select name="stageId" value={stageId} onChange={(event) => onStage(event.target.value)}>
            <optgroup label="مسیر">
              {pathStages().map((stage) => (
                <option key={stage.id} value={stage.id}>{stage.title.fa}</option>
              ))}
            </optgroup>
            <optgroup label="کنار مسیر">
              {sideStages().map((stage) => (
                <option key={stage.id} value={stage.id}>{stage.title.fa}</option>
              ))}
            </optgroup>
          </select>
        </label>
        <label>
          زمان به وقت تهران
          <input name="happenedAt" type="datetime-local" />
          <span className="hint">اگر خالی بماند، زمان همین لحظه ثبت می‌شود.</span>
        </label>
      </div>
      <label>
        جمله برای بیمار
        <textarea name="sentence" value={sentence} onChange={(event) => setSentence(event.target.value)} rows={3} />
        <span className="hint">
          اگر جمله پیش‌فرض را عوض نکنید، با زبان پرونده ترجمه می‌شود. برای «منتظر اقدام بیمار» و «توقف موقت» دلیل واقعی را بنویسید. ثبت مرحله پیامک نمی‌فرستد.
        </span>
      </label>
      <Submit />
    </form>
  );
}