Dialog

import { useEffect, useId, useRef, useState, type FormEvent } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  FormField,
  FormHelp,
  FormLabel,
  FormSection,
  FormSectionDescription,
  FormSectionFields,
  FormSectionInfo,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { NativeSelect } from "@/components/ui/native-select";

export function JobDialogExample() {
  const id = useId();
  const title = useRef<HTMLHeadingElement>(null);
  const [ready, setReady] = useState(false);
  const [open, setOpen] = useState(false);
  const [current, setCurrent] = useState({ note: "", priority: "routine" });
  const [draft, setDraft] = useState(current);
  useEffect(() => setReady(true), []);

  function changeOpen(next: boolean) {
    if (next) setDraft(current);
    setOpen(next);
  }

  function apply(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setCurrent({ ...draft, note: draft.note.trim() });
    setOpen(false);
  }

  return (
    <Dialog open={open} onOpenChange={changeOpen}>
      <FormSection data-example="job-dialog" aria-busy={!ready}>
        <FormSectionInfo>
          <FormSectionDescription>
            24 Example Street. Edit a local preview; nothing is saved or sent.
          </FormSectionDescription>
          {!ready && (
            <FormHelp>
              This example needs JavaScript. If the button stays disabled, reload the page.
            </FormHelp>
          )}
        </FormSectionInfo>
        <FormSectionFields>
          <DialogTrigger asChild>
            <Button variant="secondary" disabled={!ready}>
              Edit sample job
            </Button>
          </DialogTrigger>
          <FormHelp role="status">
            Preview: {current.priority}. Note: {current.note || "none"}
          </FormHelp>
        </FormSectionFields>
      </FormSection>
      <DialogContent
        size="sm"
        onOpenAutoFocus={(event) => {
          const content = event.target as HTMLElement;
          if (content.scrollHeight > content.clientHeight) {
            event.preventDefault();
            title.current?.focus({ preventScroll: true });
          }
        }}
      >
        <form onSubmit={apply}>
          <FormSection>
            <DialogHeader>
              <DialogTitle ref={title} tabIndex={-1}>
                Edit sample job
              </DialogTitle>
              <DialogDescription>
                24 Example Street. Apply updates to this page's preview, or cancel to discard your
                changes.
              </DialogDescription>
            </DialogHeader>
            <FormSectionFields>
              <FormField>
                <FormLabel htmlFor={`${id}-note`}>Job note (optional)</FormLabel>
                <Input
                  id={`${id}-note`}
                  name="note"
                  value={draft.note}
                  autoComplete="off"
                  onChange={(event) => setDraft({ ...draft, note: event.target.value })}
                />
              </FormField>
              <FormField>
                <FormLabel htmlFor={`${id}-priority`}>Priority</FormLabel>
                <NativeSelect
                  id={`${id}-priority`}
                  name="priority"
                  value={draft.priority}
                  onChange={(event) => setDraft({ ...draft, priority: event.target.value })}
                >
                  <option value="routine">Routine</option>
                  <option value="urgent">Urgent</option>
                </NativeSelect>
              </FormField>
            </FormSectionFields>
            <DialogFooter>
              <DialogClose asChild>
                <Button type="button" variant="secondary">
                  Cancel changes
                </Button>
              </DialogClose>
              <Button type="submit">Apply preview</Button>
            </DialogFooter>
          </FormSection>
        </form>
      </DialogContent>
    </Dialog>
  );
}