"use client";

import { useActionState, useState } from "react";
import { useFormStatus } from "react-dom";
import { patientLogin } from "@/lib/actions";
import type { Lang } from "@/lib/catalog";
import { text } from "@/lib/i18n";

function Submit({ label, waiting }: { label: string; waiting: string }) {
  const { pending } = useFormStatus();
  return <button type="submit" disabled={pending}>{pending ? waiting : label}</button>;
}

export function PatientLoginForm({ token, lang }: { token: string; lang: Lang }) {
  const copy = text(lang);
  const [state, action] = useActionState(patientLogin, { ok: true, message: "" });
  const [mobile, setMobile] = useState("");
  const [code, setCode] = useState("");
  return (
    <form action={action} className="stack">
      <input type="hidden" name="token" value={token} />
      {!state.ok ? <p className="alert">{state.message}</p> : null}
      <label>
        {copy.mobile}
        <input name="mobile" type="tel" autoComplete="tel" required value={mobile} onChange={(event) => setMobile(event.target.value)} />
      </label>
      <label>
        {copy.code}
        <input name="code" inputMode="numeric" autoComplete="one-time-code" required value={code} onChange={(event) => setCode(event.target.value)} />
      </label>
      <Submit label={copy.enter} waiting={copy.waiting} />
    </form>
  );
}