Menu

"use client";

import {
  createContext,
  useContext,
  useId,
  useRef,
  useState,
  type ComponentProps,
  type KeyboardEvent,
  type ReactNode,
  type ToggleEvent,
} from "react";
import "./menu.css";

export type MenuPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end";

export type MenuProps = Omit<ComponentProps<"button">, "children"> & {
  /** Content of the trigger button. */
  label: ReactNode;
  /** Side of the trigger the menu opens on, and the edge it lines up with. */
  placement?: MenuPlacement;
  /** MenuItem and MenuSeparator elements. */
  children: ReactNode;
};

const CloseMenu = createContext<() => void>(() => {});

/* Must match the @supports condition in menu.css exactly. */
const ANCHOR_SUPPORT =
  "(anchor-name: --a) and (position-area: block-end) and (position-try-fallbacks: flip-block)";

function anchorSupported() {
  return typeof CSS !== "undefined" && CSS.supports(ANCHOR_SUPPORT);
}

/** Fallback for engines without anchor positioning: fixed coordinates from the trigger's box. */
function place(trigger: Element, surface: HTMLElement, placement: MenuPlacement) {
  const box = trigger.getBoundingClientRect();
  const viewWidth = document.documentElement.clientWidth;
  const viewHeight = document.documentElement.clientHeight;
  const gap = parseFloat(getComputedStyle(surface).marginTop) || 0;
  let top = placement.startsWith("top");
  let end = placement.endsWith("end");

  // Size is only known once shown; flip to the other side when this one does not fit.
  const height = surface.offsetHeight + gap;
  const width = surface.offsetWidth;
  if (surface.offsetHeight > 0) {
    if (!top && box.bottom + height > viewHeight && box.top - height >= 0) top = true;
    else if (top && box.top - height < 0 && box.bottom + height <= viewHeight) top = false;
    if (!end && box.left + width > viewWidth && box.right - width >= 0) end = true;
    else if (end && box.right - width < 0 && box.left + width <= viewWidth) end = false;
  }

  const style = surface.style;
  style.top = top ? "auto" : `${box.bottom}px`;
  style.bottom = top ? `${viewHeight - box.top}px` : "auto";
  style.left = end ? "auto" : `${box.left}px`;
  style.right = end ? `${viewWidth - box.right}px` : "auto";
}

export function Menu({
  label,
  placement = "bottom-start",
  id,
  className,
  style,
  children,
  onKeyDown,
  ...rest
}: MenuProps) {
  const auto = useId();
  const triggerId = id ?? `${auto}trigger`;
  const menuId = `${auto}menu`;
  const anchorName = `--eq-menu-${auto.replace(/[^\w-]/g, "")}`;
  const menuRef = useRef<HTMLDivElement>(null);
  const focusOnOpen = useRef<"first" | "last">("first");
  const [open, setOpen] = useState(false);

  function trigger() {
    return document.getElementById(triggerId);
  }

  function items() {
    return Array.from(menuRef.current?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? []);
  }

  function hide() {
    const menu = menuRef.current;
    if (menu?.matches(":popover-open")) menu.hidePopover();
  }

  function close() {
    hide();
    trigger()?.focus();
  }

  function handleTriggerKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
    onKeyDown?.(event);
    if (event.defaultPrevented) return;
    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
    event.preventDefault();
    focusOnOpen.current = event.key === "ArrowUp" ? "last" : "first";
    if (menuRef.current?.matches(":popover-open")) {
      const all = items();
      all[focusOnOpen.current === "last" ? all.length - 1 : 0]?.focus();
    } else {
      // A click, not showPopover(), so the trigger stays the popover's invoker
      // and a later click on it closes the menu instead of reopening it.
      event.currentTarget.click();
    }
  }

  function handleBeforeToggle(event: ToggleEvent<HTMLDivElement>) {
    const button = trigger();
    if (event.newState === "open" && button && !anchorSupported()) {
      place(button, event.currentTarget, placement);
    }
  }

  function handleToggle(event: ToggleEvent<HTMLDivElement>) {
    const isOpen = event.newState === "open";
    setOpen(isOpen);
    if (!isOpen) return;
    const button = trigger();
    if (button && !anchorSupported()) place(button, event.currentTarget, placement);
    const all = items();
    all[focusOnOpen.current === "last" ? all.length - 1 : 0]?.focus();
    focusOnOpen.current = "first";
  }

  function handleMenuKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    const all = items();
    if (all.length === 0) return;
    const current = all.findIndex((item) => item === document.activeElement);
    let next: number | undefined;

    switch (event.key) {
      case "ArrowDown":
        next = current < 0 ? 0 : (current + 1) % all.length;
        break;
      case "ArrowUp":
        next = current < 0 ? all.length - 1 : (current - 1 + all.length) % all.length;
        break;
      case "Home":
        next = 0;
        break;
      case "End":
        next = all.length - 1;
        break;
      case "Escape":
        event.preventDefault();
        close();
        return;
      case "Tab":
        // Focus goes back to the trigger first, so the browser's Tab moves on from there.
        trigger()?.focus();
        hide();
        return;
      default: {
        if (event.key.length !== 1 || event.key === " ") return;
        if (event.ctrlKey || event.metaKey || event.altKey) return;
        const letter = event.key.toLowerCase();
        for (let step = 1; step <= all.length; step++) {
          const index = (current + step + all.length) % all.length;
          const text = all[index].querySelector(".eq-menu-item-label")?.textContent ?? "";
          if (text.trim().toLowerCase().startsWith(letter)) {
            next = index;
            break;
          }
        }
      }
    }

    if (next === undefined) return;
    event.preventDefault();
    all[next].focus();
  }

  return (
    <>
      <button
        type="button"
        {...rest}
        id={triggerId}
        className={["eq-menu", className].filter(Boolean).join(" ")}
        style={{ anchorName, ...style }}
        popoverTarget={menuId}
        aria-haspopup="menu"
        aria-expanded={open}
        aria-controls={menuId}
        onKeyDown={handleTriggerKeyDown}
      >
        <span className="eq-menu-label">{label}</span>
        <svg
          className="eq-menu-chevron"
          viewBox="0 0 16 16"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <path d="M4 6l4 4 4-4" />
        </svg>
      </button>
      <div
        ref={menuRef}
        id={menuId}
        popover="auto"
        role="menu"
        aria-labelledby={triggerId}
        className="eq-menu-list"
        data-placement={placement}
        style={{ positionAnchor: anchorName }}
        onBeforeToggle={handleBeforeToggle}
        onToggle={handleToggle}
        onKeyDown={handleMenuKeyDown}
      >
        <CloseMenu.Provider value={close}>{children}</CloseMenu.Provider>
      </div>
    </>
  );
}

export type MenuItemProps = ComponentProps<"button"> & {
  variant?: "default" | "danger";
  /** A shortcut hint shown at the end of the row, e.g. "⌘D". Display only. */
  shortcut?: string;
};

export function MenuItem({
  variant = "default",
  shortcut,
  disabled,
  className,
  children,
  onClick,
  onPointerMove,
  ...rest
}: MenuItemProps) {
  const close = useContext(CloseMenu);
  return (
    <button
      type="button"
      {...rest}
      role="menuitem"
      tabIndex={-1}
      // aria-disabled keeps the item focusable, as the menu pattern asks, but inert to activation.
      aria-disabled={disabled || undefined}
      className={["eq-menu-item", className].filter(Boolean).join(" ")}
      data-variant={variant}
      onPointerMove={(event) => {
        onPointerMove?.(event);
        if (document.activeElement !== event.currentTarget) {
          event.currentTarget.focus({ preventScroll: true });
        }
      }}
      onClick={(event) => {
        if (disabled) return;
        onClick?.(event);
        if (!event.defaultPrevented) close();
      }}
    >
      <span className="eq-menu-item-label">{children}</span>
      {shortcut && <kbd className="eq-menu-shortcut">{shortcut}</kbd>}
    </button>
  );
}

export function MenuSeparator({ className, ...rest }: ComponentProps<"div">) {
  return (
    <div
      role="separator"
      {...rest}
      className={["eq-menu-separator", className].filter(Boolean).join(" ")}
    />
  );
}