"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var DropdownGeneric_exports = {};
__export(DropdownGeneric_exports, {
  default: () => DropdownGeneric_default,
  placements: () => placements
});
module.exports = __toCommonJS(DropdownGeneric_exports);
var import_react = __toESM(require("react"));
var import_react_dom = require("@floating-ui/react-dom");
var import_styled_components = __toESM(require("styled-components"));
var import__ = require("../../../");
var import_Flex = __toESM(require("../../layout/Flex"));
var import_Flex2 = __toESM(require("../../layout/Flex"));
var import_Text = __toESM(require("../../asorted/Text"));
const ButtonContainer = (0, import_styled_components.default)(import_Flex2.default).attrs({
  flexDirection: "row",
  width: "auto",
  alignItems: "center",
  height: "36px"
})`
  cursor: ${(p) => !p.disabled && "pointer"};
  > :last-child {
    /* targeting the dropdown icon */
    ${(p) => p.opened && "transform: rotate(180deg);"}
    margin-left: ${(p) => p.theme.space[3]}px;
  }
`;
const DropdownContainer = (0, import_styled_components.default)(import_Flex.default).attrs(({ theme }) => {
  const isLight = theme.colors.type === "light";
  return {
    zIndex: 1,
    flexDirection: "column",
    padding: 3,
    border: `1px solid ${theme.colors.neutral[isLight ? "c20" : "c30"]}`,
    borderRadius: "8px",
    backgroundColor: isLight ? "neutral.c00" : "neutral.c20",
    color: theme.colors.neutral.c80
  };
})`
  overflow-y: auto;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, ${(p) => p.theme.colors.type === "light" ? 0.04 : 0.08});
`;
const placements = ["bottom-start", "bottom", "bottom-end"];
const DropdownGeneric = ({
  label,
  closeOnClickOutside = true,
  closeOnClickInside = false,
  disabled = false,
  placement = "bottom",
  flipDisabled = false,
  children
}) => {
  const divRef = (0, import_react.useRef)(null);
  const [maxHeight, setMaxHeight] = (0, import_react.useState)();
  const [maxWidth, setMaxWidth] = (0, import_react.useState)();
  const [opened, setOpened] = (0, import_react.useState)(false);
  const handleClickButton = (0, import_react.useCallback)(() => {
    if (!disabled)
      setOpened(!opened);
  }, [opened, disabled]);
  const handleClickInside = (0, import_react.useCallback)(() => {
    if (closeOnClickInside)
      setOpened(false);
  }, [setOpened, closeOnClickInside]);
  const { x, y, reference, floating, strategy, update, refs } = (0, import_react_dom.useFloating)({
    placement: placements.includes(placement) ? placement : "bottom",
    middleware: [
      (0, import_react_dom.shift)(),
      ...flipDisabled ? [] : [(0, import_react_dom.flip)()],
      (0, import_react_dom.size)({
        padding: 6,
        apply({ height, width }) {
          setMaxHeight(height);
          setMaxWidth(width);
        }
      })
    ]
  });
  const handleResizeOrScroll = (0, import_react.useCallback)(() => {
    if (opened && !disabled)
      update();
  }, [opened, disabled, update]);
  (0, import_react.useEffect)(() => {
    if (!refs.reference.current || !refs.floating.current) {
      return;
    }
    const parents = [
      ...(0, import_react_dom.getScrollParents)(refs.reference.current),
      ...(0, import_react_dom.getScrollParents)(refs.floating.current)
    ];
    parents.forEach((parent) => {
      parent.addEventListener("scroll", handleResizeOrScroll);
      parent.addEventListener("resize", handleResizeOrScroll);
    });
    return () => {
      parents.forEach((parent) => {
        parent.removeEventListener("scroll", handleResizeOrScroll);
        parent.removeEventListener("resize", handleResizeOrScroll);
      });
    };
  }, [flipDisabled, refs.reference, refs.floating, handleResizeOrScroll]);
  (0, import_react.useEffect)(() => {
    function handleClickOutside(event) {
      if (closeOnClickOutside && opened && divRef.current && !divRef.current.contains(event.target)) {
        setOpened(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [closeOnClickOutside, opened, setOpened, divRef]);
  const color = disabled ? "neutral.c50" : "neutral.c100";
  return /* @__PURE__ */ import_react.default.createElement(import_Flex2.default, { ref: divRef }, /* @__PURE__ */ import_react.default.createElement(
    ButtonContainer,
    {
      ref: reference,
      onClick: handleClickButton,
      disabled,
      opened: opened && !disabled
    },
    /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "paragraph", fontWeight: "medium", color }, label),
    /* @__PURE__ */ import_react.default.createElement(import__.IconsLegacy.DropdownMedium, { size: 20, color })
  ), opened && !disabled && /* @__PURE__ */ import_react.default.createElement(
    DropdownContainer,
    {
      ref: floating,
      style: {
        position: strategy,
        top: y ?? "",
        left: x ?? "",
        maxHeight: maxHeight ? `${maxHeight}px` : "",
        maxWidth: maxWidth ? "" : ""
        // maxWidth: maxWidth ? `${maxWidth}px` : "", /* TODO: fix this */
      },
      onClick: handleClickInside
    },
    children
  ));
};
var DropdownGeneric_default = DropdownGeneric;
//# sourceMappingURL=index.js.map
