import { AmbientTokenButton } from "../inputs/buttons/AmbientTokenButton.mjs";
import { useDynamicListCalculation } from "../../hooks/useDynamicListCalculation.mjs";
import React, { Children, cloneElement, forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
import { MenuItem, Popover } from "@material-ui/core";
import { MoreVerticalIcon } from "@fluentui/react-icons";
import PropTypes from "prop-types";
import { makeStyles as makeStyles$1 } from "@material-ui/core/styles";
//#region src/UI/containers/DynamicContainerWithMenu.jsx
const useStyles = makeStyles$1((theme) => ({ filterChipMenuIcon: {
	background: theme.palette.common.grey,
	padding: theme.spacing(1),
	color: theme.palette.primary.main
} }));
const DynamicContainerWithMenu = forwardRef((props, ref) => {
	const { children, className, menuButton, menuIconClassName, includeBuffer = true } = props;
	const classes = useStyles();
	const { calculateNumberOfVisibleChildren } = useDynamicListCalculation();
	const modifiedMenuButton = useMemo(() => {
		if (!menuButton) return null;
		return cloneElement(menuButton, {
			onClick: (event) => {
				menuButton.props.onClick(event);
				handlePopoverClick(event);
			},
			...menuButton.props
		}, menuButton.props.children);
	}, [menuButton]);
	const [allChildren, setAllChildren] = useState([]);
	const [visibleChildren, setVisibleChildren] = useState([]);
	const [menuChildren, setMenuChildren] = useState([]);
	const [anchorEl, setAnchorEl] = useState(null);
	const open = Boolean(anchorEl);
	const id = open ? "simple-popover" : void 0;
	const containerRef = useRef(ref);
	const outerContainerRef = useRef(null);
	const childrenRefs = useRef([]);
	const handlePopoverClick = (event_0) => {
		setAnchorEl(event_0.currentTarget);
	};
	const handlePopoverClose = () => {
		setAnchorEl(null);
	};
	const handleSizeChange = useCallback(() => {
		const maxVisibleChildren = calculateNumberOfVisibleChildren(containerRef, childrenRefs, includeBuffer);
		const visibleChildren_0 = allChildren.slice(0, maxVisibleChildren);
		const menuChildren_0 = allChildren.slice(maxVisibleChildren);
		setVisibleChildren(visibleChildren_0);
		setMenuChildren(menuChildren_0);
	}, [
		containerRef,
		allChildren,
		childrenRefs,
		calculateNumberOfVisibleChildren,
		includeBuffer
	]);
	const handleMenuItemClick = useCallback((child) => {
		if (child.props.onClick && typeof child.props.onClick === "function") child.props.onClick();
		let children_0 = child.props.children;
		while (children_0) {
			if (Array.isArray(children_0) && children_0.length > 0) children_0.forEach((child_0) => {
				if (child_0.props.onClick && typeof child_0.props.onClick === "function") child_0.props.onClick();
			});
			else if (typeof children_0 === "object") {
				if (children_0.props.onClick && typeof children_0.props.onClick === "function") children_0.props.onClick();
			}
			children_0 = children_0.props.children;
		}
		handlePopoverClose();
	}, []);
	useEffect(() => {
		const arrayChildren = Children.toArray(children);
		setAllChildren(arrayChildren);
		setVisibleChildren(arrayChildren);
	}, [children]);
	useLayoutEffect(handleSizeChange, [handleSizeChange]);
	useLayoutEffect(() => {
		window.addEventListener("resize", handleSizeChange);
		const resizeObserver = new ResizeObserver(handleSizeChange);
		if (outerContainerRef.current) resizeObserver.observe(outerContainerRef.current);
		return () => {
			window.removeEventListener("resize", handleSizeChange);
			resizeObserver.disconnect();
		};
	}, [handleSizeChange, outerContainerRef]);
	return /* @__PURE__ */ React.createElement("div", {
		ref: outerContainerRef,
		style: {
			width: "100%",
			overflow: "hidden"
		}
	}, /* @__PURE__ */ React.createElement("div", {
		className,
		ref: containerRef,
		style: {
			display: "flex",
			flexWrap: "noWrap",
			overflow: "hidden",
			flexGrow: 1
		}
	}, visibleChildren && Children.map(visibleChildren, (child_1, index) => {
		return cloneElement(child_1, {
			ref: (ref_0) => childrenRefs.current[index] = ref_0,
			...child_1.props
		}, child_1.props.children);
	}), menuChildren && menuChildren.length > 0 && /* @__PURE__ */ React.createElement("div", null, modifiedMenuButton ?? /* @__PURE__ */ React.createElement(AmbientTokenButton, {
		id,
		icon: MoreVerticalIcon,
		tooltip: "Additional Filter Values",
		ariaLabel: "Additional Filter Values",
		onClick: handlePopoverClick,
		iconClassName: menuIconClassName ?? classes.filterChipMenuIcon
	}), /* @__PURE__ */ React.createElement(Popover, {
		id,
		open,
		anchorEl,
		onClose: handlePopoverClose,
		anchorOrigin: {
			vertical: "bottom",
			horizontal: "right"
		},
		transformOrigin: {
			vertical: "top",
			horizontal: "right"
		}
	}, Children.map(menuChildren, (child_2, index_0) => {
		return /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => handleMenuItemClick(child_2) }, cloneElement(child_2, { ...child_2.props }, child_2.props.children));
	})))));
});
DynamicContainerWithMenu.displayName = "DynamicContainerWithMenu";
DynamicContainerWithMenu.propTypes = {
	children: PropTypes.node.isRequired,
	className: PropTypes.string,
	menuButton: PropTypes.node,
	menuIconClassName: PropTypes.string,
	includeBuffer: PropTypes.bool
};
//#endregion
export { DynamicContainerWithMenu };

//# sourceMappingURL=DynamicContainerWithMenu.mjs.map