import "../Dropdown.css";
import { jsx } from "react/jsx-runtime";
import { Popover, Dropdown as Dropdown$1 } from "antd";
import { useCallback, useMemo } from "react";
import { useTheme } from "./Theme/UI.js";
import "./Theme/themeUtils.js";
import "./Theme/themes.js";
const css = {};
const Dropdown = ({
  children,
  content,
  disabled,
  isContextMenu,
  menu = [],
  open,
  autoWidthOverlay,
  placement = "bottomLeft",
  onClick,
  onOpenChange,
  selectable,
  selectedKeys
}) => {
  const {
    themeSettings: { className: themeClass }
  } = useTheme();
  const addFocusToMenu = useCallback((menuItem) => {
    if (menuItem === null)
      return null;
    if (menuItem.type === "divider") {
      return menuItem;
    } else if (menuItem.type === "group") {
      return { ...menuItem, children: menuItem.children.map(addFocusToMenu) };
    } else {
      return { ...menuItem, tabIndex: 0 };
    }
  }, []);
  const antdMenu = useMemo(() => {
    return {
      items: menu.map(addFocusToMenu),
      onClick: (info) => {
        info.domEvent.stopPropagation();
        onClick == null ? void 0 : onClick(info.key, info.domEvent);
      },
      selectable,
      selectedKeys
    };
  }, [addFocusToMenu, menu, onClick, selectable, selectedKeys]);
  const overlayStyle = autoWidthOverlay ? { minWidth: "auto" } : void 0;
  const className = [css.base, themeClass].join(" ");
  return content ? /* @__PURE__ */ jsx(
    Popover,
    {
      className,
      content,
      open,
      overlayClassName: themeClass,
      overlayStyle,
      placement,
      showArrow: false,
      trigger: "click",
      onOpenChange,
      children
    }
  ) : /* @__PURE__ */ jsx(
    Dropdown$1,
    {
      className,
      disabled,
      menu: antdMenu,
      open,
      overlayClassName: themeClass,
      overlayStyle,
      placement,
      trigger: [isContextMenu ? "contextMenu" : "click"],
      onOpenChange,
      children
    }
  );
};
export {
  Dropdown as default
};
