import { jsx, jsxs } from 'react/jsx-runtime';
import * as React from 'react';
import { Tooltip, TooltipTrigger, TooltipContent } from '../../../../tooltip.mjs';
import { cn } from '../../../../../lib/utils.mjs';
import { Button } from '../../../../button.mjs';
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../../../../dropdown-menu.mjs';
import { DotsHorizontalIcon, SizeIcon, DownloadIcon, ClipboardCopyIcon, Link2Icon } from '../../../../../../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.mjs';

const ActionWrapper = ({
  children,
  className,
  ...props
}) => /* @__PURE__ */ jsx(
  "div",
  {
    className: cn(
      "absolute top-3 right-3 flex flex-row rounded px-0.5 opacity-0 group-hover/node-image:opacity-100",
      "border-[0.5px] bg-[var(--mt-bg-secondary)] [backdrop-filter:saturate(1.8)_blur(20px)]",
      className
    ),
    ...props,
    children
  }
);
ActionWrapper.displayName = "ActionWrapper";
const ActionButton = ({
  icon,
  tooltip,
  className,
  ...props
}) => /* @__PURE__ */ jsxs(Tooltip, { children: [
  /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
    Button,
    {
      variant: "ghost",
      className: cn(
        "text-muted-foreground hover:text-foreground relative flex h-7 w-7 flex-row rounded-none p-0",
        "bg-transparent hover:bg-transparent",
        className
      ),
      ...props,
      children: icon
    }
  ) }),
  /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: tooltip })
] });
ActionButton.displayName = "ActionButton";
const ActionItems = [
  {
    key: "onView",
    icon: /* @__PURE__ */ jsx(SizeIcon, {}),
    tooltip: "View image"
  },
  {
    key: "onDownload",
    icon: /* @__PURE__ */ jsx(DownloadIcon, {}),
    tooltip: "Download image"
  },
  {
    key: "onCopy",
    icon: /* @__PURE__ */ jsx(ClipboardCopyIcon, {}),
    tooltip: "Copy image to clipboard"
  },
  {
    key: "onCopyLink",
    icon: /* @__PURE__ */ jsx(Link2Icon, {}),
    tooltip: "Copy image link",
    isLink: true
  }
];
const ImageActions = ({
  shouldMerge = false,
  isLink = false,
  ...actions
}) => {
  const [isOpen, setIsOpen] = React.useState(false);
  const handleAction = React.useCallback(
    (e, action) => {
      e.preventDefault();
      e.stopPropagation();
      action?.();
    },
    []
  );
  const filteredActions = React.useMemo(
    () => ActionItems.filter((item) => isLink || !item.isLink),
    [isLink]
  );
  return /* @__PURE__ */ jsx(ActionWrapper, { className: cn({ "opacity-100": isOpen }), children: shouldMerge ? /* @__PURE__ */ jsxs(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [
    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
      ActionButton,
      {
        icon: /* @__PURE__ */ jsx(DotsHorizontalIcon, {}),
        tooltip: "Open menu",
        onClick: (e) => e.preventDefault()
      }
    ) }),
    /* @__PURE__ */ jsx(DropdownMenuContent, { className: "w-56", align: "end", children: filteredActions.map(({ key, icon, tooltip }) => /* @__PURE__ */ jsx(
      DropdownMenuItem,
      {
        onClick: (e) => handleAction(e, actions[key]),
        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2", children: [
          icon,
          /* @__PURE__ */ jsx("span", { children: tooltip })
        ] })
      },
      key
    )) })
  ] }) : filteredActions.map(({ key, icon, tooltip }) => /* @__PURE__ */ jsx(
    ActionButton,
    {
      icon,
      tooltip,
      onClick: (e) => handleAction(e, actions[key])
    },
    key
  )) });
};
ImageActions.displayName = "ImageActions";

export { ActionButton, ActionWrapper, ImageActions };
