Drawer

"use client";

import {
  createContext,
  useContext,
  useEffect,
  useId,
  type ComponentProps,
  type MouseEvent,
} from "react";
import "./drawer.css";

// React 19 does not type invoker commands yet. This lets any button take them.
declare module "react" {
  interface ButtonHTMLAttributes<T> {
    command?: string;
    commandfor?: string;
  }
}

const TitleId = createContext<string | undefined>(undefined);

export type DrawerProps = ComponentProps<"dialog"> & {
  /** Required. Triggers point at it with commandfor. */
  id: string;
  /** The edge it docks to and slides in from. */
  side?: "right" | "left" | "bottom";
};

/**
 * A modal dialog docked to an edge. Opens with a native invoker: a button
 * carrying command="show-modal" and commandfor set to this id. Engines without
 * invoker commands get the same behaviour from a document click listener.
 */
export function Drawer({
  id,
  side = "right",
  closedby = "any",
  className,
  onClick,
  children,
  ...rest
}: DrawerProps) {
  const titleId = useId();

  useEffect(() => {
    if ("command" in HTMLButtonElement.prototype) return;
    function invoke(event: globalThis.MouseEvent) {
      if (!(event.target instanceof Element)) return;
      const invoker = event.target.closest("button[commandfor]");
      if (!invoker || invoker.getAttribute("commandfor") !== id) return;
      const drawer = document.getElementById(id);
      if (!(drawer instanceof HTMLDialogElement)) return;
      const command = invoker.getAttribute("command");
      if (command === "show-modal" && !drawer.open) drawer.showModal();
      if ((command === "close" || command === "request-close") && drawer.open) drawer.close();
    }
    document.addEventListener("click", invoke);
    return () => document.removeEventListener("click", invoke);
  }, [id]);

  function handleClick(event: MouseEvent<HTMLDialogElement>) {
    onClick?.(event);
    // closedby="any" does this natively where supported.
    if (event.defaultPrevented || closedby !== "any") return;
    if ("closedBy" in HTMLDialogElement.prototype) return;
    const drawer = event.currentTarget;
    if (event.target !== drawer) return;
    const box = drawer.getBoundingClientRect();
    const inside =
      event.clientX >= box.left &&
      event.clientX <= box.right &&
      event.clientY >= box.top &&
      event.clientY <= box.bottom;
    if (!inside) drawer.close();
  }

  return (
    <TitleId.Provider value={titleId}>
      <dialog
        aria-labelledby={rest["aria-label"] ? undefined : titleId}
        {...rest}
        id={id}
        closedby={closedby}
        className={["eq-drawer", className].filter(Boolean).join(" ")}
        data-side={side}
        onClick={handleClick}
      >
        {children}
      </dialog>
    </TitleId.Provider>
  );
}

export function DrawerTitle({ className, ...rest }: ComponentProps<"h2">) {
  const id = useContext(TitleId);
  return (
    <h2 id={id} {...rest} className={["eq-drawer-title", className].filter(Boolean).join(" ")} />
  );
}

export function DrawerBody({ className, ...rest }: ComponentProps<"div">) {
  return <div {...rest} className={["eq-drawer-body", className].filter(Boolean).join(" ")} />;
}

/**
 * A form with method="dialog": any submit button inside closes the drawer
 * and sets returnValue to its value. No JavaScript involved.
 */
export function DrawerFooter({ className, ...rest }: ComponentProps<"form">) {
  return (
    <form
      {...rest}
      method="dialog"
      className={["eq-drawer-footer", className].filter(Boolean).join(" ")}
    />
  );
}