import { a as IconSize, n as AnalyticsId } from "../../constants2.js";
import { t as usePseudoClasses } from "../../usePseudoClasses.js";
import { t as Icon_default } from "../../Icon.js";
import { t as LazyIcon_default } from "../../LazyIcon.js";
import { t as isComponent } from "../../component.js";
import { t as useIsMobileBreakpoint } from "../../useIsMobileBreakpoint.js";
import { t as Button_default } from "../../Button.js";
import { t as useOutsideEvent } from "../../useOutsideEvent.js";
import { t as X_default } from "../../X.js";
import { t as PopOver_default } from "../../PopOver.js";
import { t as VerticalDots_default } from "../../VerticalDots.js";
import { t as LinkList_default } from "../../LinkList.js";
import classNames from "classnames";
import React, { useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import styles from "./styles.module.scss";
let PopMenuVariant = /* @__PURE__ */ function(PopMenuVariant$1) {
	PopMenuVariant$1["onWhite"] = "on-white";
	PopMenuVariant$1["onGray"] = "on-gray";
	PopMenuVariant$1["onBlueberry"] = "on-blueberry";
	return PopMenuVariant$1;
}({});
let PopMenuLabelPosition = /* @__PURE__ */ function(PopMenuLabelPosition$1) {
	PopMenuLabelPosition$1["right"] = "right";
	PopMenuLabelPosition$1["left"] = "left";
	return PopMenuLabelPosition$1;
}({});
const PopMenu = (props) => {
	const triggerButtonRef = useRef(null);
	const iconRef = useRef(null);
	const outerRef = useRef(null);
	const [isOpen, setIsOpen] = useState(false);
	const { children, popOverClassName, popMenuClassName, openButtonTestId, closeButtonTestId, popOverTestId, openButtonAriaLabel, closeButtonAriaLabel, svgIcon, labelText, labelTextPosition = PopMenuLabelPosition.right } = props;
	const isMobile = useIsMobileBreakpoint();
	useOutsideEvent(outerRef, () => {
		setIsOpen(false);
	});
	const { isHovered: triggerButtonIsHovered } = usePseudoClasses(triggerButtonRef);
	const mobileIconSize = isMobile ? IconSize.XSmall : IconSize.Small;
	const handleClick = (cb) => {
		setIsOpen(false);
		if (cb) cb();
	};
	const renderChildren = () => {
		if (isComponent(children, LinkList_default)) return /* @__PURE__ */ jsx(PopOver_default, {
			testId: popOverTestId,
			className: classNames(styles["pop-menu__pop-over"], popOverClassName),
			controllerRef: iconRef,
			role: "dialog",
			show: isOpen,
			children: React.Children.map(children, (child) => React.cloneElement(child, { children: React.Children.map(child.props.children, (child$1) => isComponent(child$1, LinkList_default.Link) ? React.cloneElement(child$1, { onClick: (event) => handleClick(() => child$1.props.onClick && child$1.props.onClick(event)) }) : child$1) }))
		});
	};
	const toggleOpenOnClick = () => {
		setIsOpen(!isOpen);
	};
	const iconComponent = svgIcon && typeof svgIcon === "string" ? /* @__PURE__ */ jsx(LazyIcon_default, {
		iconName: svgIcon,
		size: IconSize.XSmall,
		isHovered: triggerButtonIsHovered
	}) : svgIcon && /* @__PURE__ */ jsx(Icon_default, {
		svgIcon,
		size: IconSize.XSmall,
		isHovered: triggerButtonIsHovered
	});
	const openIcon = svgIcon ? iconComponent : /* @__PURE__ */ jsx(Icon_default, {
		ref: iconRef,
		svgIcon: svgIcon ?? VerticalDots_default,
		size: mobileIconSize,
		isHovered: triggerButtonIsHovered
	});
	const closeIcon = /* @__PURE__ */ jsx(Icon_default, {
		svgIcon: X_default,
		ref: iconRef,
		size: mobileIconSize,
		isHovered: triggerButtonIsHovered
	});
	return /* @__PURE__ */ jsxs("div", {
		ref: outerRef,
		className: classNames(popMenuClassName),
		"data-analyticsid": AnalyticsId.PopMenu,
		children: [/* @__PURE__ */ jsxs(Button_default, {
			variant: "borderless",
			"aria-expanded": isOpen,
			onClick: toggleOpenOnClick,
			ref: triggerButtonRef,
			ariaLabel: isOpen ? closeButtonAriaLabel : openButtonAriaLabel,
			testId: isOpen ? closeButtonTestId : openButtonTestId,
			children: [
				labelText && labelTextPosition == PopMenuLabelPosition.left && /* @__PURE__ */ jsx("span", { children: labelText }),
				isOpen ? closeIcon : openIcon,
				labelText && labelTextPosition == PopMenuLabelPosition.right && /* @__PURE__ */ jsx("span", { children: labelText })
			]
		}), isOpen && renderChildren()]
	});
};
var PopMenu_default = PopMenu;
export { PopMenu, PopMenuLabelPosition, PopMenuVariant, PopMenu_default as default };

//# sourceMappingURL=index.js.map