import React from "react";
import { useAnchoredPosition, portalToBody, useDismiss } from "./Popover.jsx";

export function Menu({ open, defaultOpen = false, onOpenChange, className = "", children }) {
  const [internal, setInternal] = React.useState(defaultOpen);
  const isOpen = open !== undefined ? open : internal;
  const anchorRef = React.useRef(null);
  const panelRef = React.useRef(null);
  const set = (v) => { if (open === undefined) setInternal(v); if (onOpenChange) onOpenChange(v); };
  useDismiss(isOpen, () => set(false), [anchorRef, panelRef]);
  const ctx = { open: isOpen, setOpen: set, anchorRef: anchorRef, panelRef: panelRef };
  return (
    <span ref={anchorRef} className={className} style={{ display: "inline-flex" }} data-slot="menu">
      {React.Children.map(children, (child) => (React.isValidElement(child) ? React.cloneElement(child, { __menu: ctx }) : child))}
    </span>
  );
}
export function MenuTrigger({ __menu, children }) {
  return React.cloneElement(children, { onClick: () => __menu && __menu.setOpen(!__menu.open), "aria-haspopup": "menu", "aria-expanded": __menu ? __menu.open : undefined });
}
/* Portalled to the document in viewport coordinates — a row menu inside a
   scrolling table is clipped by the container otherwise. */
export function MenuPopup({ __menu, align = "start", side = "bottom", className = "", style, children, ...props }) {
  const ref = __menu ? __menu.panelRef : React.useRef(null);
  const anchorRef = __menu ? __menu.anchorRef : React.useRef(null);
  const isOpen = !!(__menu && __menu.open);
  const pos = useAnchoredPosition(isOpen, anchorRef, ref, side, align);
  if (!isOpen) return null;
  return portalToBody(
    <div ref={ref} role="menu" className={["o-popup o-menu", className].filter(Boolean).join(" ")} data-slot="menu-popup"
      style={Object.assign({ position: "fixed", top: pos.top, left: pos.left, zIndex: 60, minWidth: "12rem" }, style)} {...props}>{children}</div>
  );
}
export function MenuItem({ variant = "default", inset = false, icon, shortcut, className = "", children, ...props }) {
  const cls = ["o-menu__item", variant === "destructive" ? "o-menu__item--destructive" : "", inset ? "o-menu__item--inset" : "", className].filter(Boolean).join(" ");
  return <div role="menuitem" tabIndex={-1} className={cls} data-slot="menu-item" data-variant={variant} {...props}>{icon}{children}{shortcut ? <span className="o-menu__shortcut">{shortcut}</span> : null}</div>;
}
export function MenuGroupLabel({ className = "", children, ...props }) {
  return <div className={["o-menu__label", className].filter(Boolean).join(" ")} data-slot="menu-label" {...props}>{children}</div>;
}
export function MenuSeparator({ className = "" }) {
  return <div className={["o-menu__separator", className].filter(Boolean).join(" ")} data-slot="menu-separator" role="separator" />;
}
export function MenuShortcut({ className = "", children, ...props }) {
  return <span className={["o-menu__shortcut", className].filter(Boolean).join(" ")} data-slot="menu-shortcut" {...props}>{children}</span>;
}
export function MenuCheckboxItem({ checked = false, onCheckedChange, className = "", children, ...props }) {
  return (
    <div role="menuitemcheckbox" aria-checked={checked} tabIndex={-1} className={["o-menu__item", className].filter(Boolean).join(" ")}
      style={{ display: "grid", gridTemplateColumns: ".75rem 1fr", paddingInlineEnd: "var(--space-4)" }}
      data-slot="menu-checkbox-item" onClick={() => onCheckedChange && onCheckedChange(!checked)} {...props}>
      <span className="o-menu__check">{checked ? <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5.252 12.7 10.2 18.63 18.748 5.37" /></svg> : null}</span>
      <span>{children}</span>
    </div>
  );
}
export function MenuRadioItem({ checked = false, onSelect, className = "", children, ...props }) {
  return (
    <div role="menuitemradio" aria-checked={checked} tabIndex={-1} className={["o-menu__item", className].filter(Boolean).join(" ")}
      style={{ display: "grid", gridTemplateColumns: ".75rem 1fr", paddingInlineEnd: "var(--space-4)" }}
      data-slot="menu-radio-item" onClick={() => onSelect && onSelect()} {...props}>
      <span className="o-menu__check">{checked ? <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5.252 12.7 10.2 18.63 18.748 5.37" /></svg> : null}</span>
      <span>{children}</span>
    </div>
  );
}
