Input

"use client";

import { Button, Input } from "@baseline/ui";
import { type FormEvent, useState } from "react";

export function ProjectNameForm() {
  const [status, setStatus] = useState("");
  const [showError, setShowError] = useState(false);

  function submitName(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    setShowError(false);
    setStatus("Submitted “" + String(data.get("projectName")) + "”.");
  }

  return (
    <form
      className="grid gap-bl-5"
      onInvalidCapture={() => {
        setStatus("");
        setShowError(true);
      }}
      onReset={() => {
        setStatus("");
        setShowError(false);
      }}
      onSubmit={submitName}
    >
      <div className="bl-field">
        <label className="bl-field__label" htmlFor="project-name">
          Project name (required)
        </label>
        <Input
          aria-describedby={
            showError ? "project-name-help project-name-error" : "project-name-help"
          }
          aria-invalid={showError ? true : undefined}
          defaultValue="Baseline"
          id="project-name"
          name="projectName"
          onChange={(event) => {
            setStatus("");
            if (event.currentTarget.validity.valid) setShowError(false);
          }}
          required
        />
        <p className="bl-field__description" id="project-name-help">
          Shown in your workspace.
        </p>
        <p className="bl-field__error min-h-bl-5" id="project-name-error">
          {showError ? "Enter a project name." : ""}
        </p>
      </div>
      <div className="flex flex-wrap gap-bl-2">
        <Button type="submit">Submit name</Button>
        <Button type="reset">Reset</Button>
      </div>
      <p className="bl-type-compact m-0 min-h-bl-5" role="status">
        {status}
      </p>
    </form>
  );
}