Popover

"use client";

import { useEffect, useRef, useState, type ComponentProps, type ToggleEvent } from "react";
import "./popover.css";

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

export type PopoverProps = ComponentProps<"div"> & {
  /** Required. The trigger points at it with popovertarget. */
  id: string;
  /** Side of the trigger it opens on, and the edge it lines up with. Flips when it does not fit. */
  placement?: PopoverPlacement;
};

/* Must match the @supports condition in popover.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: PopoverPlacement) {
  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 Popover({
  id,
  placement = "bottom-start",
  popover = "auto",
  className,
  style,
  onBeforeToggle,
  onToggle,
  ...rest
}: PopoverProps) {
  const [open, setOpen] = useState(false);
  const trigger = useRef<Element | null>(null);
  const anchorName = `--eq-popover-${id.replace(/[^\w-]/g, "")}`;

  function findTrigger() {
    const triggers = document.querySelectorAll(`[popovertarget="${CSS.escape(id)}"]`);
    for (const element of triggers) if (element === document.activeElement) return element;
    return triggers[0] ?? null;
  }

  function handleBeforeToggle(event: ToggleEvent<HTMLDivElement>) {
    onBeforeToggle?.(event);
    if (event.newState !== "open") return;
    const next = findTrigger();
    if (anchorSupported()) {
      // CSS does the positioning; it only needs to know which element is the anchor.
      if (trigger.current instanceof HTMLElement && trigger.current !== next) {
        trigger.current.style.removeProperty("anchor-name");
      }
      if (next instanceof HTMLElement) next.style.setProperty("anchor-name", anchorName);
    } else if (next) {
      place(next, event.currentTarget, placement);
    }
    trigger.current = next;
  }

  function handleToggle(event: ToggleEvent<HTMLDivElement>) {
    onToggle?.(event);
    const isOpen = event.newState === "open";
    setOpen(isOpen);
    // Second pass now that the surface has a size, so the fallback can flip.
    if (isOpen && trigger.current && !anchorSupported()) {
      place(trigger.current, event.currentTarget, placement);
    }
  }

  useEffect(() => {
    if (!open || anchorSupported()) return;
    function update() {
      const surface = document.getElementById(id);
      if (surface && trigger.current) place(trigger.current, surface, placement);
    }
    window.addEventListener("scroll", update, true);
    window.addEventListener("resize", update);
    return () => {
      window.removeEventListener("scroll", update, true);
      window.removeEventListener("resize", update);
    };
  }, [open, id, placement]);

  return (
    <div
      {...rest}
      id={id}
      popover={popover}
      className={["eq-popover", className].filter(Boolean).join(" ")}
      data-placement={placement}
      style={{ positionAnchor: anchorName, ...style }}
      onBeforeToggle={handleBeforeToggle}
      onToggle={handleToggle}
    />
  );
}