"use client";
import { useActionState, useState } from "react";

export default function NameForm({ saveName }) {
  const [draft, setDraft] = useState("");
  const [state, formAction, pending] = useActionState(
    async (_previous, formData) => {
      const name = String(formData.get("name") ?? "").trim();
      if (!name) return { message: "Enter a display name." };
      if (name.length > 80) return { message: "That name is too long." };
      try {
        const result = await saveName(name);
        if (!result.ok) return { message: "The name could not be saved." };
        return { message: "Name saved." };
      } catch {
        return { message: "Unable to save. Please try again." };
      }
    },
    { message: "" }
  );

  return (
    <form action={formAction}>
      <label>
        Display name
        <input name="name" required maxLength={80} readOnly={pending}
          value={draft} onChange={(event) => setDraft(event.target.value)} />
      </label>
      <button type="submit" disabled={pending}>
        {pending ? "Saving…" : "Save name"}
      </button>
      <p role="status">{pending ? "" : state.message}</p>
    </form>
  );
}