import {
  smHeaderLogoMarginLeft
} from "./chunk-SLEBHXIK.js";
import {
  useLiveRef
} from "./chunk-UDFJ6IWI.js";
import {
  MultiToggle
} from "./chunk-UWAU4HGV.js";
import {
  Toggle
} from "./chunk-JXEBM5BK.js";
import {
  Button
} from "./chunk-SIPHI6JZ.js";
import {
  UnstyledButton
} from "./chunk-5NUOBJXP.js";
import {
  z
} from "./chunk-55OQPFLF.js";
import {
  Icon
} from "./chunk-DMPXNHDT.js";
import {
  overlaySurface,
  standardBorderRadius,
  standardFocusOutline
} from "./chunk-HGZGGJQB.js";
import {
  Link
} from "./chunk-SWMGDTQN.js";
import {
  themeOr
} from "./chunk-VAH342U2.js";
import {
  bp
} from "./chunk-JSGRNWSB.js";
import {
  __spreadProps,
  __spreadValues
} from "./chunk-W7FAWX6T.js";

// src/components/Dropdown.tsx
import { css, useTheme } from "@emotion/react";
import styled from "@emotion/styled";
import {
  useCallback,
  useEffect,
  useLayoutEffect,
  useRef,
  useState
} from "react";
import ReactDOM from "react-dom";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
function Dropdown({
  button,
  dropdownItems,
  horizontalScrollRef,
  onClickDropdownItems,
  getCSS,
  getDropdownItemsCSS,
  isOpen: isOpenProp,
  onOpen,
  onClose,
  closeOnScroll = false,
  openOnHover = false,
  minDropdownItemsWidth = 200,
  maxDropdownItemsWidth = 300,
  align = "center",
  verticalPlacement = "bottom",
  footer = null,
  dropdownContent = null,
  borderRadius = 8
}) {
  const theme = useTheme();
  const [isOpen, setIsOpen] = useState(isOpenProp || false);
  const [dropdownButtonHeight, setDropdownButtonHeight] = useState(0);
  const [dropdownButtonWidth, setDropdownButtonWidth] = useState(0);
  const [dropdownCoords, setDropdownCoords] = useState({
    top: 0,
    left: 0,
    right: 0
  });
  const dropdownRef = useRef(null);
  const [dropdownButtonRef, dropdownButtonRefCb] = useLiveRef();
  const dropdownItemsRef = useRef(null);
  const [dropdownItemsWidth, setDropdownItemsWidth] = useState(0);
  const [dropdownItemsHeight, setDropdownItemsHeight] = useState(0);
  const nodeRef = useRef(null);
  const [nodeReady, setNodeReady] = useState(false);
  useEffect(() => {
    if (isOpenProp !== void 0) {
      setIsOpen(isOpenProp);
    }
  }, [isOpenProp]);
  useEffect(() => {
    if (!nodeRef.current) {
      nodeRef.current = document.createElement("div");
      document.body.appendChild(nodeRef.current);
    }
    setNodeReady(true);
    return () => {
      if (nodeRef.current) {
        document.body.removeChild(nodeRef.current);
        nodeRef.current = null;
      }
    };
  }, []);
  const setOpen = useCallback(
    (newValue) => {
      setIsOpen(newValue);
      if (newValue && onOpen) {
        onOpen();
      } else if (!newValue && onClose) {
        onClose();
      }
    },
    [onOpen, onClose]
  );
  function handleKeyDown(event) {
    if (event.key === "Escape") {
      event.preventDefault();
      setOpen(false);
    } else if (["Enter", "Return"].includes(event.key)) {
      event.preventDefault();
      setOpen(!isOpen);
    }
  }
  function handleBlur(event) {
    const targetOutsideDropdownItems = dropdownItemsRef.current && !dropdownItemsRef.current.contains(event.relatedTarget) && event.relatedTarget !== null;
    if (targetOutsideDropdownItems) {
      setOpen(false);
    }
  }
  useEffect(() => {
    function handleClickOutside(event) {
      const targetOutsideDropdownItems = dropdownItemsRef.current && !dropdownItemsRef.current.contains(event.target);
      const targetOutsideDropdownButton = dropdownButtonRef.current && !dropdownButtonRef.current.contains(event.target);
      if (isOpen && event.target && targetOutsideDropdownItems && targetOutsideDropdownButton) {
        setOpen(false);
      }
    }
    window.document.addEventListener("mousedown", handleClickOutside);
    return () => {
      window.document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [isOpen, setOpen, dropdownButtonRef]);
  const reposition = useCallback(() => {
    if (dropdownButtonRef.current && dropdownItemsRef.current) {
      const dropdownButtonRect = dropdownButtonRef.current.getBoundingClientRect();
      setDropdownCoords({
        top: dropdownButtonRect.top,
        left: dropdownButtonRect.left,
        right: dropdownButtonRect.right
      });
      setDropdownButtonHeight(dropdownButtonRect.height);
      setDropdownButtonWidth(dropdownButtonRect.width);
      const dropdownItemsRect = dropdownItemsRef.current.getBoundingClientRect();
      setDropdownItemsWidth(dropdownItemsRect.width);
      setDropdownItemsHeight(dropdownItemsRect.height);
    }
  }, [dropdownButtonRef]);
  useLayoutEffect(() => {
    function onWindowResize() {
      setOpen(false);
      reposition();
    }
    function handleScroll() {
      if (closeOnScroll) {
        setOpen(false);
      }
      reposition();
    }
    reposition();
    let dropdownButtonResizeObserver = null;
    if (dropdownButtonRef.current) {
      dropdownButtonResizeObserver = new ResizeObserver(reposition);
      dropdownButtonResizeObserver.observe(dropdownButtonRef.current);
    }
    let dropdownResizeObserver = null;
    if (dropdownButtonRef.current) {
      dropdownResizeObserver = new ResizeObserver(reposition);
      dropdownResizeObserver.observe(dropdownButtonRef.current);
    }
    window.addEventListener("resize", onWindowResize);
    let navItemsResizeObserver = null;
    window.addEventListener("scroll", handleScroll);
    if (horizontalScrollRef == null ? void 0 : horizontalScrollRef.current) {
      horizontalScrollRef.current.addEventListener("scroll", handleScroll);
      navItemsResizeObserver = new ResizeObserver(reposition);
      navItemsResizeObserver.observe(horizontalScrollRef.current);
    }
    return () => {
      window.removeEventListener("resize", onWindowResize);
      window.removeEventListener("scroll", handleScroll);
      dropdownButtonResizeObserver == null ? void 0 : dropdownButtonResizeObserver.disconnect();
      navItemsResizeObserver == null ? void 0 : navItemsResizeObserver.disconnect();
      dropdownResizeObserver == null ? void 0 : dropdownResizeObserver.disconnect();
    };
  }, [
    setOpen,
    horizontalScrollRef,
    closeOnScroll,
    reposition,
    dropdownButtonRef
  ]);
  const handleClickDropdownItems = useCallback(() => {
    setOpen(false);
    onClickDropdownItems && onClickDropdownItems();
  }, [onClickDropdownItems, setOpen]);
  const dropdownTopMargin = 8;
  let dropdownItemOffsetTop = dropdownCoords.top + dropdownButtonHeight + dropdownTopMargin;
  let dropdownItemOffsetLeft = 0;
  if (align === "center") {
    dropdownItemOffsetLeft = dropdownCoords.left - (dropdownItemsWidth - dropdownButtonWidth) / 2;
  } else if (align === "right") {
    dropdownItemOffsetLeft = dropdownCoords.right - dropdownItemsWidth;
  }
  if (verticalPlacement === "top") {
    dropdownItemOffsetTop = dropdownCoords.top - dropdownItemsHeight - dropdownTopMargin;
  }
  const commonButtonProps = {
    id: button.id,
    type: "button",
    onMouseEnter: () => {
      if (openOnHover) {
        reposition();
        setOpen(true);
      }
    },
    onMouseLeave: () => {
      if (openOnHover) {
        setOpen(false);
      }
    },
    onMouseDown: () => {
      reposition();
      setOpen(!isOpen);
    },
    onKeyDown: handleKeyDown,
    onFocus: () => {
      reposition();
      setOpen(true);
    },
    onBlur: handleBlur,
    ref: dropdownButtonRefCb
  };
  const commonUnstyledButtonProps = __spreadProps(__spreadValues({}, commonButtonProps), {
    css: "getCSS" in button && button.getCSS ? button.getCSS({ isOpen, theme }) : void 0
  });
  let buttonNode = null;
  if ("label" in button) {
    buttonNode = /* @__PURE__ */ jsx(UnstyledDropdownButton, __spreadProps(__spreadValues({}, commonUnstyledButtonProps), { children: button.label }));
  } else if ("getContent" in button) {
    buttonNode = /* @__PURE__ */ jsx(UnstyledDropdownButton, __spreadProps(__spreadValues({}, commonUnstyledButtonProps), { children: button.getContent({ isOpen, theme }) }));
  } else {
    buttonNode = /* @__PURE__ */ jsx(Button, __spreadValues(__spreadValues({}, button), commonButtonProps));
  }
  const containerCSS = getCSS && getCSS({ isOpen, theme });
  const dropdownItemsCSS = getDropdownItemsCSS && getDropdownItemsCSS({ isOpen, theme });
  return /* @__PURE__ */ jsxs(
    "div",
    {
      css: __spreadValues({ position: "relative", display: "inline-flex" }, containerCSS),
      ref: dropdownRef,
      children: [
        buttonNode,
        nodeReady && nodeRef.current ? ReactDOM.createPortal(
          /* @__PURE__ */ jsxs(
            DropdownItems,
            {
              isOpen,
              left: dropdownItemOffsetLeft,
              top: dropdownItemOffsetTop,
              ref: dropdownItemsRef,
              minWidth: minDropdownItemsWidth,
              maxWidth: maxDropdownItemsWidth,
              hasItems: dropdownItems ? dropdownItems.length > 0 : false,
              borderRadius,
              css: dropdownItemsCSS,
              children: [
                dropdownItems == null ? void 0 : dropdownItems.map((dropdownItem, i) => {
                  return /* @__PURE__ */ jsx("li", { onBlur: handleBlur, children: /* @__PURE__ */ jsx(
                    DropdownItem,
                    {
                      dropdownItem,
                      onClick: handleClickDropdownItems
                    }
                  ) }, dropdownItem.label);
                }),
                dropdownContent,
                footer && /* @__PURE__ */ jsx(DropdownFooter, { children: footer })
              ]
            }
          ),
          nodeRef.current
        ) : null
      ]
    }
  );
}
var DropdownFooter = styled.div`
  padding: 24px 16px 0;
  border-top: 1px solid ${({ theme }) => theme.c2Neutral};
  margin-top: 16px;
`;
var DropdownItems = styled.ul`
  ${overlaySurface}
  color: ${({ theme }) => themeOr(theme.c6Neutral, theme.c8Neutral)};
  ${({ borderRadius }) => standardBorderRadius(borderRadius)}
  ${({ hasItems }) => hasItems ? "padding: 12px 0;" : "padding: 0;"}
  visibility: ${({ isOpen }) => isOpen ? "visible" : "hidden"};
  position: fixed;
  ${({ minWidth }) => minWidth ? `min-width: ${minWidth}px;` : ""}
  ${({ maxWidth }) => maxWidth ? `max-width: ${maxWidth}px;` : ""}
  left: ${({ left }) => left}px;
  top: ${({ top }) => top}px;
  z-index: ${z.dropdown};
  list-style: none;
  margin: 0;
`;
function DropdownItem({ dropdownItem, onClick }) {
  const theme = useTheme();
  const dropdownItemIcon = dropdownItem.getIcon && dropdownItem.getIcon({ dropdownItem, theme });
  const dropdownItemIconNode = dropdownItemIcon ? /* @__PURE__ */ jsx(
    Icon,
    {
      name: dropdownItemIcon.name,
      width: dropdownItemIcon.width || 12,
      mr: 10
    }
  ) : null;
  const cssProp2 = dropdownItem.getCSS && dropdownItem.getCSS({ theme, dropdownItem });
  const onClickDropdownItem = useCallback(() => {
    dropdownItem.onClick && dropdownItem.onClick(dropdownItem);
    onClick && onClick();
  }, [dropdownItem, onClick]);
  if (dropdownItem.to !== void 0 || dropdownItem.externalLink) {
    return /* @__PURE__ */ jsxs(
      DropdownItemLink,
      {
        selected: Boolean(dropdownItem.selected),
        to: dropdownItem.to,
        externalLink: dropdownItem.externalLink,
        params: dropdownItem.params,
        onClick: onClickDropdownItem,
        css: cssProp2,
        hash: dropdownItem.hash,
        children: [
          dropdownItemIconNode,
          dropdownItem.label
        ]
      }
    );
  }
  if (dropdownItem.toggle) {
    return /* @__PURE__ */ jsxs(DropdownItemDiv, { selected: false, css: cssProp2, withHoverColor: false, children: [
      dropdownItemIconNode,
      dropdownItem.label,
      /* @__PURE__ */ jsx("div", { css: { marginLeft: "auto" }, children: "options" in dropdownItem.toggle ? /* @__PURE__ */ jsx(MultiToggle, __spreadValues({}, dropdownItem.toggle)) : /* @__PURE__ */ jsx(Toggle, __spreadValues({}, dropdownItem.toggle)) })
    ] });
  }
  return /* @__PURE__ */ jsxs(
    DropdownItemDiv,
    {
      selected: false,
      css: cssProp2,
      onClick: onClickDropdownItem,
      children: [
        dropdownItemIconNode,
        dropdownItem.label
      ]
    }
  );
}
var UnstyledDropdownButton = styled(UnstyledButton)`
  ${standardFocusOutline}
`;
var dropdownItemStyle = ({
  theme,
  selected,
  withHoverColor = true
}) => `
  background-color: ${selected ? theme.primary : "transparent"};
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  outline-color: ${selected ? theme.onPrimaryText : theme.hcNeutral} !important;
  white-space: nowrap;

  padding: 8px 16px;
  ${bp.sm(`padding-left: ${smHeaderLogoMarginLeft};`)}

  ${withHoverColor ? `
      &:hover {
        color: ${theme.hcNeutral} !important;
      }
      ` : ""}
`;
var cssProp = ({
  theme,
  selected
}) => css`
  ${dropdownItemStyle({ theme, selected: Boolean(selected) })}
  ${standardFocusOutline({ theme })}
`;
function DropdownItemLink(props) {
  const theme = useTheme();
  return /* @__PURE__ */ jsx(
    Link,
    __spreadProps(__spreadValues({}, props), {
      css: cssProp({ theme, selected: Boolean(props.selected) })
    })
  );
}
var DropdownItemDiv = styled.div`
  ${dropdownItemStyle}
  ${standardFocusOutline}
`;

export {
  Dropdown
};
