Drawer

import { type PartialElement, toState, type ValueOrState } from "@domphy/core";
import {
  type ThemeColor,
  themeColor,
  themeDensity,
  themeSize,
  themeSpacing,
} from "@domphy/theme";

type Placement = "left" | "right" | "top" | "bottom";

const translateOut: Record<Placement, string> = {
  left: "translateX(-100%)",
  right: "translateX(100%)",
  top: "translateY(-100%)",
  bottom: "translateY(100%)",
};

const marginMap: Record<Placement, string> = {
  left: "0 auto 0 0",
  right: "0 0 0 auto",
  top: "0 0 auto 0",
  bottom: "auto 0 0 0",
};

const isVertical = (p: Placement) => p === "left" || p === "right";

/**
 * Edge-anchored modal drawer driven by an `open` State. Slides in/out from a
 * chosen edge via a transform transition, calls `showModal()`/`close()`, locks
 * page scroll while open, and closes on backdrop click. Apply to a `<dialog>`
 * element.
 *
 * @hostTag dialog
 * @param props.color - Theme color tone for the drawer surface. Defaults to "neutral".
 * @param props.open - Open state (`ValueOrState<boolean>`); set true/false to show/hide. Defaults to false.
 * @param props.placement - Edge to anchor to, "left" | "right" | "top" | "bottom". Defaults to "right".
 * @param props.size - CSS length for the drawer's width (left/right) or height (top/bottom). Defaults to themeSpacing(80) for left/right, themeSpacing(64) for top/bottom.
 * @example { dialog: [...], $: [drawer({ open, placement: "left" })] }
 */
function drawer(
  props: {
    color?: ThemeColor;
    open?: ValueOrState<boolean>;
    placement?: Placement;
    size?: string;
  } = {},
): PartialElement {
  const { color = "neutral", open = false, placement = "right", size } = props;
  const state = toState(open);
  const defaultSize = isVertical(placement)
    ? themeSpacing(80)
    : themeSpacing(64);
  const drawerSize = size ?? defaultSize;

  return {
    _onInsert: (node) => {
      if (node.tagName !== "dialog") {
        console.warn(`"drawer" patch must use dialog tag`);
      }
    },
    onClick: (e: MouseEvent, node) => {
      if (e.target !== node.domElement) return;
      state.set(false);
    },
    onTransitionEnd: (_e, node) => {
      const dlg = node.domElement as HTMLDialogElement;
      if (!state.get()) {
        dlg.close();
        document.body.style.overflow = "";
      }
    },
    _onMount: (node) => {
      const dlg = node.domElement as HTMLDialogElement;
      const update = (val: boolean) => {
        if (val) {
          dlg.showModal();
          document.body.style.overflow = "hidden";
          requestAnimationFrame(() => {
            dlg.style.transform = "translate(0, 0)";
          });
        } else {
          dlg.style.transform = translateOut[placement];
        }
      };
      update(state.get());
      const release = state.addListener(update);
      // Release the `open` State listener and restore page scroll on removal
      // (an open drawer removed mid-transition would otherwise leak the
      // listener and leave document.body locked at overflow:hidden).
      node.addHook("Remove", () => {
        release();
        document.body.style.overflow = "";
      });
    },
    style: {
      transform: translateOut[placement],
      transition: "transform 0.25s ease",
      fontSize: (listener) => themeSize(listener, "inherit"),
      color: (listener) => themeColor(listener, "shift-10", color),
      backgroundColor: (listener) => themeColor(listener, "inherit", color),
      border: "none",
      padding: (listener) => themeSpacing(themeDensity(listener) * 3),
      margin: marginMap[placement],
      width: isVertical(placement) ? drawerSize : "100dvw",
      height: isVertical(placement) ? "100dvh" : drawerSize,
      maxWidth: "100dvw",
      maxHeight: "100dvh",
      boxShadow: (listener) =>
        `0 ${themeSpacing(4)} ${themeSpacing(12)} ${themeColor(listener, "shift-4", "neutral")}`,
      "&::backdrop": {
        backgroundColor: (listener) =>
          themeColor(listener, "shift-2", "neutral"),
        opacity: 0.75,
      },
    },
  };
}

export { drawer };