Dialog

"use client";

import { createContext, use, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
import type { ComponentProps, MouseEvent, ReactElement, ReactNode } from "react";
import { CloseIcon } from "../../lib/close-icon.tsx";
import { mergeRefs } from "../../lib/merge-refs.ts";
import { overlayLookClassName } from "../../lib/overlay-class.ts";
import { cn } from "../../lib/utils.ts";
import { useCloseButtons, useOverlay, useSheet } from "../../primitives/overlay.ts";
import type { Overlay } from "../../primitives/overlay.ts";
import { Button } from "../button/button.tsx";
import type { ButtonProps } from "../button/button.tsx";

/** What a dialog says in words; pass `messages` to say it in another language. */
export interface DialogMessages {
  /** The name of a close button that is given no label of its own. */
  readonly close: string;
}

const MESSAGES: DialogMessages = { close: "Close" };

interface DialogRoot {
  readonly overlay: Overlay;
  readonly alert: boolean;
  readonly messages: DialogMessages;
  readonly closable: boolean;
  readonly addClose: () => () => void;
  readonly titleId: string | undefined;
  readonly descriptionId: string | undefined;
  /** Say that a title or a description, of this id, is in the dialog — until what is returned is called. */
  readonly addTitle: (id: string) => () => void;
  readonly addDescription: (id: string) => () => void;
}

const DialogContext = createContext<DialogRoot | null>(null);

function useRoot(name: string): DialogRoot {
  const root = use(DialogContext);
  if (root === null) throw new Error(`${name} must be rendered inside a Dialog.`);
  return root;
}

const FOCUSABLE =
  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';

/**
 * Where focus goes on opening. In a dialog, to its first control; in an alert,
 * to the button that only closes it — Cancel — so that a Return pressed out of
 * habit does not do what the alert warns of.
 */
function focusable(alert: boolean) {
  return (content: HTMLElement): HTMLElement[] => {
    const all = Array.from(content.querySelectorAll<HTMLElement>(FOCUSABLE));
    if (!alert) return all;
    // A close button with a label, and not the one that acts: what only closes.
    const cancel = all.filter((element) =>
      element.matches(
        "[data-dialog-close]:not([data-size=icon], [data-variant=danger], [data-variant=primary])",
      ),
    );
    return [...cancel, ...all];
  };
}

export type DialogProps = {
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  /**
   * An alert: it interrupts to say something that needs an answer — a
   * confirmation before what cannot be undone. A press outside does not close
   * it, and focus opens on its Cancel.
   */
  alert?: boolean;
  messages?: Partial<DialogMessages>;
  children?: ReactNode;
};

/**
 * A modal dialog: a surface over the whole interface, not attached to any
 * control, for a task or a question that must be finished or dismissed before
 * anything else. The page behind is inert and still on every screen; on a phone
 * it is a sheet.
 */
export function Dialog({
  open,
  defaultOpen,
  onOpenChange,
  alert = false,
  messages,
  children,
}: DialogProps): ReactElement {
  const choose = useMemo(() => focusable(alert), [alert]);
  const overlay = useOverlay({
    open,
    defaultOpen,
    onOpenChange,
    blocking: true,
    modal: true,
    dismissOnPressOutside: !alert,
    defaultFocus: "first",
    focusable: choose,
  });
  const { closable, addClose } = useCloseButtons();
  const [titleId, addTitle] = useLabel();
  const [descriptionId, addDescription] = useLabel();
  const root = useMemo(
    () => ({
      overlay,
      alert,
      messages: { ...MESSAGES, ...messages },
      closable,
      addClose,
      titleId,
      descriptionId,
      addTitle,
      addDescription,
    }),
    [overlay, alert, messages, closable, addClose, titleId, descriptionId, addTitle, addDescription],
  );
  return <DialogContext value={root}>{children}</DialogContext>;
}

/** The id of the part that is there to point to, if one is. */
function useLabel(): [string | undefined, (id: string) => () => void] {
  const [id, setId] = useState<string>();
  const add = useCallback((next: string) => {
    setId(next);
    return () => setId((current) => (current === next ? undefined : current));
  }, []);
  return [id, add];
}

/** A button that opens the dialog. Any button may, by setting `open`: this one also says so. */
export function DialogTrigger({ ref, style, onClick, ...props }: ButtonProps): ReactElement {
  const { overlay } = useRoot("DialogTrigger");
  return (
    <Button
      aria-haspopup="dialog"
      {...overlay.triggerProps}
      ref={mergeRefs(overlay.triggerProps.ref, ref)}
      style={{ ...overlay.triggerProps.style, ...style }}
      onClick={(event) => {
        onClick?.(event);
        if (!event.defaultPrevented) overlay.setOpen(true, "first");
      }}
      {...props}
    />
  );
}

export function DialogContent({
  className,
  ref,
  style,
  children,
  ...props
}: ComponentProps<"div">): ReactElement {
  const { overlay, alert, closable, titleId, descriptionId } = useRoot("DialogContent");
  const sheet = useSheet();
  const own = useRef<HTMLDivElement>(null);
  const named = props["aria-label"] !== undefined || props["aria-labelledby"] !== undefined;
  useEffect(() => {
    // Looked for in the page: a title says it is there only after this has run.
    if (process.env.NODE_ENV === "production" || named || own.current?.querySelector("[data-dialog-title]")) {
      return;
    }
    console.error(
      "DialogContent: give the dialog a `DialogTitle`, or a name with `aria-label`; without one, assistive technology announces a dialog with no name.",
    );
  }, [named]);

  return (
    <div
      role={alert ? "alertdialog" : "dialog"}
      aria-labelledby={named ? undefined : titleId}
      aria-describedby={descriptionId}
      {...overlay.contentProps}
      ref={mergeRefs(overlay.contentProps.ref, own, ref)}
      tabIndex={-1}
      style={{ ...overlay.contentProps.style, ...style }}
      data-alert={alert ? "" : undefined}
      className={cn(
        overlayLookClassName,
        // In the middle of the view, over a scrim, rather than against a control.
        "fixed inset-0 m-auto h-fit w-[min(30rem,calc(100vw-2rem))] max-w-none p-6 backdrop:bg-scrim",
        "pointer-coarse:max-sm:m-0 pointer-coarse:max-sm:w-full pointer-coarse:max-sm:pb-[max(1.5rem,env(safe-area-inset-bottom))]",
        // Beneath the grabber, a band the close button sits in, clear of the content.
        "pointer-coarse:max-sm:pt-2 pointer-coarse:max-sm:before:mb-8",
        className,
      )}
      {...props}
    >
      {children}
      {sheet && !closable && <CloseButton className="absolute end-1 top-1" />}
    </div>
  );
}

/** The dialog's title, which names it. */
export function DialogTitle({ id, className, children, ...props }: ComponentProps<"h2">): ReactElement {
  const { addTitle } = useRoot("DialogTitle");
  const own = useId();
  const titleId = id ?? own;
  useEffect(() => addTitle(titleId), [addTitle, titleId]);
  return (
    <h2
      id={titleId}
      data-dialog-title=""
      className={cn("text-base font-semibold text-fg-strong", className)}
      {...props}
    >
      {children}
    </h2>
  );
}

/** What the dialog is about, in a sentence or two; it is the dialog's description. */
export function DialogDescription({ id, className, ...props }: ComponentProps<"p">): ReactElement {
  const { addDescription } = useRoot("DialogDescription");
  const own = useId();
  const descriptionId = id ?? own;
  useEffect(() => addDescription(descriptionId), [addDescription, descriptionId]);
  return <p id={descriptionId} className={cn("mt-2 text-sm text-fg", className)} {...props} />;
}

/**
 * A button that closes the dialog. Given a label — Cancel, Done — it is a
 * button like the task's others; given none it is an icon button, named from
 * `messages`.
 */
export function DialogClose(props: ButtonProps): ReactElement {
  const { addClose } = useRoot("DialogClose");
  useEffect(() => addClose(), [addClose]);
  return <CloseButton {...props} />;
}

function CloseButton({ onClick, children, ...props }: ButtonProps): ReactElement {
  const { overlay, messages } = useRoot("DialogClose");
  const icon = children === undefined;
  return (
    <Button
      data-dialog-close=""
      variant={icon ? "ghost" : undefined}
      size={icon ? "icon" : undefined}
      aria-label={icon ? messages.close : undefined}
      onClick={(event: MouseEvent<HTMLButtonElement>) => {
        onClick?.(event);
        if (!event.defaultPrevented) overlay.setOpen(false);
      }}
      {...props}
    >
      {children ?? <CloseIcon />}
    </Button>
  );
}