Field

import { exampleLayout } from "@/components/components/examples/example-layout.stylex";
import { useCallback, useEffect, useId, useRef, useState, type FormEvent } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { FormActions } from "@/components/ui/form";
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field";

type FieldFacts = {
  name: string;
  description: string;
  targetHeight: number;
  faceHeight: number | null;
  validity: string;
};

export function JobContactExample() {
  const id = useId();
  const email = useRef<HTMLInputElement>(null);
  const [ready, setReady] = useState(false);
  const [error, setError] = useState("");
  const [preview, setPreview] = useState("");
  const [facts, setFacts] = useState<FieldFacts | null>(null);
  const inspect = useCallback(() => {
    const input = email.current;
    const frame = input?.parentElement;
    if (!input || !frame) return;
    const face = getComputedStyle(frame, "::before");
    const descriptionId = input.getAttribute("aria-describedby");
    setFacts({
      name: Array.from(input.labels ?? [])
        .map((label) => label.textContent?.trim())
        .join(" "),
      description: descriptionId ? (document.getElementById(descriptionId)?.textContent ?? "") : "",
      targetHeight: input.getBoundingClientRect().height,
      faceHeight: face.display === "none" ? null : Number.parseFloat(face.height),
      validity: !input.willValidate
        ? "Validation is inactive while disabled"
        : input.validity.valid
          ? "Valid email"
          : input.validity.valueMissing
            ? "Required value is empty"
            : "Email is incomplete",
    });
  }, []);

  useEffect(() => setReady(true), []);
  useEffect(() => {
    inspect();
    const input = email.current;
    if (!input) return;
    const observer = new ResizeObserver(inspect);
    observer.observe(input);
    const forcedColors = matchMedia("(forced-colors: active)");
    forcedColors.addEventListener("change", inspect);
    return () => {
      observer.disconnect();
      forcedColors.removeEventListener("change", inspect);
    };
  }, [inspect, ready, error]);

  function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setPreview("");
    const input = email.current;
    if (!input) return;
    if (!input.validity.valid) {
      setError(
        input.validity.valueMissing ? "Enter a receipt email." : "Enter a complete email address.",
      );
      input.focus();
      return;
    }
    setError("");
    const data = new FormData(event.currentTarget);
    setPreview(
      `Preview ready: ${data.get("email")} for ${data.get("reference")}. Nothing was saved or sent.`,
    );
  }

  const target = facts?.targetHeight ?? 0;
  const face = facts?.faceHeight ?? target;
  const drawingFaceHeight = target > 0 ? 64 * Math.min(face / target, 1) : 64;
  return (
    <form
      aria-labelledby={`${id}-title`}
      aria-busy={!ready}
      noValidate
      onSubmit={submit}
      onReset={() => {
        setError("");
        setPreview("");
        // Read on the next frame, after the browser's default reset action.
        requestAnimationFrame(inspect);
      }}
    >
      <FieldSet disabled={!ready}>
        <FieldLegend id={`${id}-title`}>Preview a receipt</FieldLegend>
        <FieldDescription>
          Use a sample email. This example only changes its local preview.
        </FieldDescription>
        {!ready && (
          <FieldDescription>
            This preview needs JavaScript. If the fields stay disabled, reload the page.
          </FieldDescription>
        )}
        <FieldGroup>
          <Field orientation="horizontal" invalid={Boolean(error)}>
            <FieldLabel htmlFor={`${id}-email`}>Receipt email (required)</FieldLabel>
            <FieldContent>
              <Input
                ref={email}
                id={`${id}-email`}
                name="email"
                type="email"
                autoComplete="off"
                required
                defaultValue=""
                placeholder="mike@example.com"
                aria-invalid={Boolean(error) || undefined}
                aria-describedby={`${id}-email-message`}
                onChange={() => {
                  setError("");
                  setPreview("");
                  inspect();
                }}
              />
              {error ? (
                <FieldError id={`${id}-email-message`}>{error}</FieldError>
              ) : (
                <FieldDescription id={`${id}-email-message`}>
                  A receipt destination for this preview. Nothing is emailed.
                </FieldDescription>
              )}
            </FieldContent>
          </Field>
          <Field orientation="horizontal">
            <FieldLabel htmlFor={`${id}-reference`}>Job reference (read only)</FieldLabel>
            <FieldContent>
              <Input
                id={`${id}-reference`}
                name="reference"
                defaultValue="JOB-1842"
                readOnly
                aria-describedby={`${id}-reference-help`}
              />
              <FieldDescription id={`${id}-reference-help`}>
                Read-only values remain selectable and appear in form data.
              </FieldDescription>
            </FieldContent>
          </Field>
          <Field orientation="horizontal">
            <FieldLabel htmlFor={`${id}-phone`}>Customer phone (unavailable)</FieldLabel>
            <FieldContent>
              <Input
                id={`${id}-phone`}
                name="phone"
                type="tel"
                defaultValue="(555) 014-0184"
                disabled
                aria-describedby={`${id}-phone-help`}
              />
              <FieldDescription id={`${id}-phone-help`}>
                Phone editing is unavailable in this example. Disabled values are omitted from form
                data.
              </FieldDescription>
            </FieldContent>
          </Field>
          <FormActions>
            <Button type="submit">Preview receipt</Button>
            <Button type="reset" variant="secondary">
              Reset example
            </Button>
          </FormActions>
          <FieldDescription role="status" aria-live="polite">
            {preview || "Nothing has been saved or sent."}
          </FieldDescription>
        </FieldGroup>
      </FieldSet>
      <details {...exampleLayout.details} onToggle={inspect}>
        <summary
          {...exampleLayout.summary}
          style={{ minHeight: "var(--ui-control-target)" }}
        >
          Inspect the email field
        </summary>
        <div {...exampleLayout.inspector}>
          <FieldDescription>
            The diagram compares heights, enlarged to fit. Values come from the actual input above
            and update when it resizes.
          </FieldDescription>
          {facts ? (
            <>
              <svg viewBox="0 0 320 104" {...exampleLayout.full} aria-hidden="true" focusable="false">
                <rect
                  x="32"
                  y="20"
                  width="256"
                  height="64"
                  rx="10"
                  fill="none"
                  stroke="var(--color-accent)"
                  strokeWidth="2"
                  strokeDasharray="4 4"
                />
                <rect
                  x="32"
                  y={20 + (64 - drawingFaceHeight) / 2}
                  width="256"
                  height={drawingFaceHeight}
                  rx="10"
                  fill="var(--color-field)"
                  stroke="var(--color-marker)"
                />
                <path d="M48 52h80" fill="none" stroke="var(--color-fg)" strokeWidth="2" />
              </svg>
              <dl {...exampleLayout.facts}>
                <div>
                  <dt {...exampleLayout.emphasis}>Input target height</dt>
                  <dd {...exampleLayout.mono} data-field-fact="target">
                    {facts.targetHeight.toFixed(1)} CSS px
                  </dd>
                </div>
                <div>
                  <dt {...exampleLayout.emphasis}>Visible field height</dt>
                  <dd {...exampleLayout.mono} data-field-fact="face">
                    {facts.faceHeight === null
                      ? "Native boundary in forced colors"
                      : `${facts.faceHeight.toFixed(1)} CSS px`}
                  </dd>
                </div>
                <div>
                  <dt {...exampleLayout.emphasis}>Associated label</dt>
                  <dd {...exampleLayout.body} data-field-fact="name">
                    {facts.name}
                  </dd>
                </div>
                <div>
                  <dt {...exampleLayout.emphasis}>Connected help or error</dt>
                  <dd {...exampleLayout.body} data-field-fact="description">
                    {facts.description}
                  </dd>
                </div>
                <div>
                  <dt {...exampleLayout.emphasis}>Native validity</dt>
                  <dd {...exampleLayout.body} data-field-fact="validity">
                    {facts.validity}
                  </dd>
                </div>
              </dl>
            </>
          ) : (
            <FieldDescription>
              Live measurements become available when the example loads.
            </FieldDescription>
          )}
          <div>
            <Button
              type="button"
              variant="secondary"
              disabled={!ready}
              onClick={() => email.current?.focus()}
            >
              Focus receipt email
            </Button>
          </div>
          <FieldDescription>
            Field supplies layout. Its caller connects htmlFor, IDs, aria-describedby and
            aria-invalid. Input keeps native input attributes and its ref points to the input.
          </FieldDescription>
        </div>
      </details>
    </form>
  );
}