"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { createPortal } from "react-dom";
import { Zap, ChevronDown, Loader2, MoreHorizontal } from "lucide-react";
import { Button } from "../../primitives/button.js";
import { useT } from "@open-mercato/shared/lib/i18n/context";
function ActionsDropdown({
  items,
  label,
  triggerMode = "label",
  ariaLabel,
  size = "sm"
}) {
  const t = useT();
  const [open, setOpen] = React.useState(false);
  const btnRef = React.useRef(null);
  const menuRef = React.useRef(null);
  const [anchorRect, setAnchorRect] = React.useState(null);
  const hoverTimeoutRef = React.useRef(null);
  const [direction, setDirection] = React.useState("down");
  const resolvedLabel = label ?? t("ui.actions.actions", "Actions");
  const resolvedAriaLabel = ariaLabel ?? resolvedLabel;
  const updatePosition = React.useCallback(() => {
    if (!btnRef.current) return;
    const rect = btnRef.current.getBoundingClientRect();
    setAnchorRect(rect);
    const spaceBelow = window.innerHeight - rect.bottom;
    const spaceAbove = rect.top;
    setDirection(spaceBelow < 200 && spaceAbove > spaceBelow ? "up" : "down");
  }, []);
  React.useEffect(() => {
    if (!open) return;
    updatePosition();
    function onDocClick(event) {
      const target = event.target;
      if (menuRef.current && !menuRef.current.contains(target) && btnRef.current && !btnRef.current.contains(target)) {
        setOpen(false);
      }
    }
    function onKey(event) {
      if (event.key === "Escape") {
        setOpen(false);
        btnRef.current?.focus();
      }
    }
    function onScrollOrResize() {
      updatePosition();
    }
    document.addEventListener("mousedown", onDocClick);
    document.addEventListener("keydown", onKey);
    window.addEventListener("scroll", onScrollOrResize, true);
    window.addEventListener("resize", onScrollOrResize);
    return () => {
      document.removeEventListener("mousedown", onDocClick);
      document.removeEventListener("keydown", onKey);
      window.removeEventListener("scroll", onScrollOrResize, true);
      window.removeEventListener("resize", onScrollOrResize);
    };
  }, [open, updatePosition]);
  React.useEffect(() => {
    return () => {
      if (hoverTimeoutRef.current) {
        clearTimeout(hoverTimeoutRef.current);
      }
    };
  }, []);
  const handleMouseEnter = () => {
    if (hoverTimeoutRef.current) {
      clearTimeout(hoverTimeoutRef.current);
    }
    setOpen(true);
  };
  const handleMouseLeave = () => {
    hoverTimeoutRef.current = setTimeout(() => {
      setOpen(false);
    }, 150);
  };
  if (!items.length) return null;
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: "relative inline-block",
      onMouseEnter: handleMouseEnter,
      onMouseLeave: handleMouseLeave,
      children: [
        /* @__PURE__ */ jsx(
          Button,
          {
            ref: btnRef,
            type: "button",
            variant: "outline",
            size,
            className: triggerMode === "icon" ? "px-2" : void 0,
            "aria-haspopup": "menu",
            "aria-expanded": open,
            "aria-label": resolvedAriaLabel,
            onClick: () => {
              setOpen((prev) => !prev);
              requestAnimationFrame(updatePosition);
            },
            children: triggerMode === "icon" ? /* @__PURE__ */ jsxs(Fragment, { children: [
              /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" }),
              /* @__PURE__ */ jsx("span", { className: "sr-only", children: resolvedAriaLabel })
            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
              resolvedLabel,
              /* @__PURE__ */ jsx(Zap, { className: "size-4 ml-1" }),
              /* @__PURE__ */ jsx(ChevronDown, { className: `size-3.5 transition-transform duration-150 ${open ? "rotate-180" : ""}` })
            ] })
          }
        ),
        open && anchorRect && createPortal(
          /* @__PURE__ */ jsx(
            "div",
            {
              ref: menuRef,
              role: "menu",
              className: "fixed w-52 rounded-md border bg-background p-1 shadow-md focus-visible:outline-none z-dropdown",
              onMouseEnter: handleMouseEnter,
              onMouseLeave: handleMouseLeave,
              style: {
                top: direction === "down" ? anchorRect.bottom + 4 : anchorRect.top - 4,
                left: anchorRect.right,
                transform: `translate(-100%, ${direction === "down" ? "0" : "-100%"})`
              },
              children: items.map((item) => {
                const Icon = item.icon;
                return /* @__PURE__ */ jsxs(
                  Button,
                  {
                    type: "button",
                    variant: "ghost",
                    size: "sm",
                    className: "w-full justify-start",
                    role: "menuitem",
                    disabled: item.disabled,
                    onClick: () => {
                      setOpen(false);
                      item.onSelect();
                    },
                    children: [
                      item.loading ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : Icon ? /* @__PURE__ */ jsx(Icon, { className: "size-4" }) : /* @__PURE__ */ jsx("span", { className: "size-4" }),
                      item.label
                    ]
                  },
                  item.id
                );
              })
            }
          ),
          document.body
        )
      ]
    }
  );
}
export {
  ActionsDropdown
};
//# sourceMappingURL=ActionsDropdown.js.map
