margin/src/components/RowMenu.tsx

import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { useEscapeLayer } from "../escape";
import { useFocusTrap } from "../focus";
import { Icon } from "./Icon";

interface RowMenuProps {
  label: string;
  onDuplicate?: () => void;
  onMove?: () => void;
  onDelete: () => void;
  onToggleTitle?: () => void;
  titleHidden?: boolean;
  onToggleMargin?: () => void;
  marginHidden?: boolean;
  onOpenChange?: (open: boolean) => void;
  className?: string;
  tabIndex?: number;
}

export function RowMenu({ label, onDuplicate, onMove, onDelete, onToggleTitle, titleHidden, onToggleMargin, marginHidden, onOpenChange, className = "", tabIndex }: RowMenuProps) {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    onOpenChange?.(open);
  }, [open]);
  const [coords, setCoords] = useState({ top: 0, right: 0 });
  const btnRef = useRef<HTMLButtonElement>(null);
  const popRef = useRef<HTMLDivElement>(null);

  const toggle = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (!open && btnRef.current) {
      const r = btnRef.current.getBoundingClientRect();
      setCoords({ top: r.bottom + 4, right: window.innerWidth - r.right });
    }
    setOpen((v) => !v);
  };

  useFocusTrap(popRef, open);

  useEscapeLayer(open, () => {
    setOpen(false);
    btnRef.current?.focus();
  });

  const onMenuKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
      e.preventDefault();
      const items = Array.from(popRef.current?.querySelectorAll<HTMLElement>(".row-menu-item") ?? []);
      const idx = items.indexOf(document.activeElement as HTMLElement);
      const nextIdx = e.key === "ArrowDown" ? (idx + 1) % items.length : (idx - 1 + items.length) % items.length;
      items[nextIdx]?.focus();
    }
  };

  useEffect(() => {
    if (!open) return;
    const onDown = (e: MouseEvent) => {
      if (btnRef.current?.contains(e.target as Node) || popRef.current?.contains(e.target as Node)) return;
      setOpen(false);
    };
    const close = () => setOpen(false);
    document.addEventListener("mousedown", onDown, true);
    document.addEventListener("scroll", close, true);
    window.addEventListener("resize", close);
    return () => {
      document.removeEventListener("mousedown", onDown, true);
      document.removeEventListener("scroll", close, true);
      window.removeEventListener("resize", close);
    };
  }, [open]);

  const toggleTitle = (e: React.MouseEvent) => {
    e.stopPropagation();
    setOpen(false);
    onToggleTitle?.();
  };

  const toggleMargin = (e: React.MouseEvent) => {
    e.stopPropagation();
    setOpen(false);
    onToggleMargin?.();
  };

  const duplicate = (e: React.MouseEvent) => {
    e.stopPropagation();
    setOpen(false);
    onDuplicate?.();
  };

  const moveOut = (e: React.MouseEvent) => {
    e.stopPropagation();
    setOpen(false);
    onMove?.();
  };

  const remove = (e: React.MouseEvent) => {
    e.stopPropagation();
    setOpen(false);
    onDelete();
  };

  return (
    <>
      <button
        ref={btnRef}
        className={`row-menu-btn ${className}`}
        data-open={open}
        tabIndex={tabIndex}
        title={label}
        onMouseDown={(e) => e.stopPropagation()}
        onClick={toggle}
      >
        <Icon d="M12 5h.01M12 12h.01M12 19h.01" />
      </button>
      {open &&
        createPortal(
          <div ref={popRef} className="row-menu-pop" style={{ top: coords.top, right: coords.right }} onKeyDown={onMenuKeyDown}>
            {onToggleTitle && (
              <button className="row-menu-item" onClick={toggleTitle}>
                {titleHidden ? (
                  <Icon d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" size={14} />
                ) : (
                  <Icon d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24M1 1l22 22" size={14} />
                )}
                {titleHidden ? "Show title" : "Hide title"}
              </button>
            )}
            {onToggleMargin && (
              <button className="row-menu-item" onClick={toggleMargin}>
                {marginHidden ? (
                  <Icon d="M4 5h16 M12 10v10 M8 16l4 4 4-4" size={14} />
                ) : (
                  <Icon d="M4 5h16 M12 20V10 M8 14l4-4 4 4" size={14} />
                )}
                {marginHidden ? "Show top margin" : "Hide top margin"}
              </button>
            )}
            {onDuplicate && (
              <button className="row-menu-item" onClick={duplicate}>
                <Icon d="M9 9h11v11h-11z M6 15V5h9" size={14} />
                Duplicate
              </button>
            )}
            {onMove && (
              <button className="row-menu-item" onClick={moveOut}>
                <Icon d="M4 12h13M13 8l4 4-4 4M20 4v16" size={14} />
                Move to book…
              </button>
            )}
            <button className="row-menu-item danger" onClick={remove}>
              <Icon d="M5 7h14M10 7V5h4v2M7 7l1 13h8l1-13M10 11v6M14 11v6" size={14} />
              Delete
            </button>
          </div>,
          document.body
        )}
    </>
  );
}