Checkbox

import { exampleLayout } from "@/components/components/examples/example-layout.stylex";
import { useEffect, useId, useRef, useState, type ComponentProps, type FormEvent } from "react";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { FormActions, FormError, FormField, FormHelp } from "@/components/ui/form";
import { Label } from "@/components/ui/label";

// A composed child keeps the native button and passes props, children and the React 19 ref through.
function EvidenceCheckboxButton(props: ComponentProps<"button">) {
  return <button {...props} />;
}

export function JobCheckboxExample() {
  const id = useId();
  const confirmation = useRef<HTMLButtonElement>(null);
  const [ready, setReady] = useState(false);
  const [photos, setPhotos] = useState(true);
  const [signature, setSignature] = useState(false);
  const [error, setError] = useState(false);
  const [preview, setPreview] = useState("");
  useEffect(() => setReady(true), []);
  const all = photos && signature ? true : !photos && !signature ? false : "indeterminate";

  function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    if (!data.has("reviewed")) {
      setError(true);
      setPreview("");
      confirmation.current?.focus();
      return;
    }
    setError(false);
    const selected = data
      .getAll("evidence")
      .map((value) => (value === "photos" ? "completion photos" : "customer signature"));
    setPreview(
      `Preview evidence: ${selected.join(" and ") || "no optional evidence"}. Nothing was saved or sent.`,
    );
  }

  return (
    <form
      aria-label="Job evidence example"
      aria-busy={!ready}
      {...exampleLayout.stack}
      noValidate
      onSubmit={submit}
      onReset={() => {
        // The state owner restores controlled choices; the confirmation uses native form reset.
        setPhotos(true);
        setSignature(false);
        setError(false);
        setPreview("");
      }}
    >
      <fieldset
        {...exampleLayout.choices}
        disabled={!ready}
        aria-describedby={`${id}-evidence-help`}
      >
        <legend {...exampleLayout.legend}>Completion evidence</legend>
        <Label htmlFor={`${id}-all`} {...exampleLayout.row}>
          <Checkbox
            id={`${id}-all`}
            asChild
            checked={all}
            disabled={!ready}
            onCheckedChange={(checked) => {
              // Reset can restore the mixed state; the form owner restores its individual choices.
              if (checked === "indeterminate") return;
              setPhotos(checked);
              setSignature(checked);
              setPreview("");
            }}
          >
            <EvidenceCheckboxButton />
          </Checkbox>
          <span {...exampleLayout.shrink}>Select all completion evidence</span>
        </Label>
        <Label htmlFor={`${id}-photos`} {...exampleLayout.row}>
          <Checkbox
            id={`${id}-photos`}
            name="evidence"
            value="photos"
            checked={photos}
            disabled={!ready}
            onCheckedChange={(checked) => {
              setPhotos(checked === true);
              setPreview("");
            }}
          />
          <span {...exampleLayout.shrink}>Require completion photos</span>
        </Label>
        <Label htmlFor={`${id}-signature`} {...exampleLayout.row}>
          <Checkbox
            id={`${id}-signature`}
            name="evidence"
            value="signature"
            checked={signature}
            disabled={!ready}
            onCheckedChange={(checked) => {
              setSignature(checked === true);
              setPreview("");
            }}
          />
          <span {...exampleLayout.shrink}>
            Require the customer’s signature before the technician leaves the property
          </span>
        </Label>
        <FormHelp id={`${id}-evidence-help`}>
          {ready
            ? "Choose the evidence to collect. A mixed mark means only some choices are selected."
            : "The interactive example is loading. If it remains unavailable, reload the page with JavaScript enabled."}
        </FormHelp>
      </fieldset>
      <FormField>
        <Label htmlFor={`${id}-permit`} {...exampleLayout.row} data-disabled="true">
          <Checkbox
            id={`${id}-permit`}
            name="permit"
            defaultChecked
            disabled
            aria-describedby={`${id}-permit-help`}
          />
          <span {...exampleLayout.shrink}>Require permit attachment</span>
        </Label>
        <FormHelp id={`${id}-permit-help`}>
          Permit attachment is unavailable in this local example.
        </FormHelp>
      </FormField>
      <FormField>
        <Label htmlFor={`${id}-reviewed`} {...exampleLayout.row}>
          <Checkbox
            ref={confirmation}
            id={`${id}-reviewed`}
            name="reviewed"
            defaultChecked={false}
            required
            disabled={!ready}
            aria-invalid={error || undefined}
            aria-describedby={`${id}-reviewed-help`}
            onCheckedChange={() => {
              setError(false);
              setPreview("");
            }}
          />
          <span {...exampleLayout.shrink}>I reviewed these evidence requirements</span>
        </Label>
        {error ? (
          <FormError id={`${id}-reviewed-help`}>
            Confirm that you reviewed the requirements.
          </FormError>
        ) : (
          <FormHelp id={`${id}-reviewed-help`}>
            Review the choices before previewing. Confirmation is required.
          </FormHelp>
        )}
      </FormField>
      <FormActions>
        <Button type="submit" disabled={!ready}>
          Preview evidence
        </Button>
        <Button type="reset" variant="ghost" disabled={!ready}>
          Reset example
        </Button>
      </FormActions>
      <p role="status" aria-live="polite">
        {preview || "This example changes only its local preview."}
      </p>
    </form>
  );
}