/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a795c5b | Cube Dev Team */
import { extractStyles } from "../../../tasty/utils/styles.js";
import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
import { _CollectionItem } from "../../CollectionItem.js";
import { useMenuContext } from "./context.js";
import { MenuItem } from "./MenuItem.js";
import { StyledDivider, StyledFooter, StyledHeader, StyledMenu, StyledMenuWrapper } from "./styled.js";
import { MenuSection } from "./MenuSection.js";
import { _MenuTrigger } from "./MenuTrigger.js";
import { SubMenuTrigger } from "./SubMenuTrigger.js";
import React, { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useMenu } from "react-aria";
import { useDOMRef } from "@react-spectrum/utils";
import { Section, useTreeState } from "react-stately";
import { useSyncRef } from "@react-aria/utils";

//#region src/components/actions/Menu/Menu.tsx
function Menu(props, ref) {
	const { header, footer, menuStyles, headerStyles, footerStyles, itemStyles, sectionStyles, sectionHeadingStyles, size = "medium", focusOnHover = false, qa, selectedKeys, defaultSelectedKeys, onSelectionChange, ...rest } = props;
	const domRef = useDOMRef(ref);
	const contextProps = useMenuContext();
	const completeProps = mergeProps$1(contextProps, rest, {
		focusOnHover,
		selectedKeys: selectedKeys ? new Set(selectedKeys) : void 0,
		defaultSelectedKeys: defaultSelectedKeys ? new Set(defaultSelectedKeys) : void 0,
		onSelectionChange: onSelectionChange ? (keys) => {
			if (keys === "all") onSelectionChange(Array.from(state.collection.getKeys()).map((key) => String(key)));
			else if (keys instanceof Set) onSelectionChange(Array.from(keys).map((key) => String(key)));
			else onSelectionChange([]);
		} : void 0
	});
	const state = useTreeState(completeProps);
	const collectionItems = [...state.collection];
	const hasSections = collectionItems.some((item) => item.type === "section");
	const { menuProps } = useMenu(completeProps, state, domRef);
	const styles = useMemo(() => extractStyles(completeProps, CONTAINER_STYLES), [completeProps]);
	const wrapperMods = useMemo(() => {
		return {
			popover: completeProps.mods?.popover,
			footer: !!footer,
			header: !!header
		};
	}, [
		completeProps.mods?.popover,
		footer,
		header
	]);
	const menuMods = useMemo(() => {
		return { sections: hasSections };
	}, [hasSections]);
	useSyncRef(contextProps, domRef);
	const renderedItems = useMemo(() => {
		const items = [];
		let isFirstSection = true;
		collectionItems.forEach((item) => {
			if (item.type === "section") {
				if (!isFirstSection) items.push(/* @__PURE__ */ jsx(StyledDivider, {
					role: "separator",
					"aria-orientation": "horizontal"
				}, `divider-${String(item.key)}`));
				items.push(/* @__PURE__ */ jsx(MenuSection, {
					item,
					state,
					styles: sectionStyles,
					itemStyles,
					headingStyles: sectionHeadingStyles,
					size
				}, item.key));
				isFirstSection = false;
				return;
			}
			let menuItem = /* @__PURE__ */ jsx(MenuItem, {
				item,
				state,
				styles: itemStyles,
				size,
				onAction: item.onAction
			}, item.key);
			if (item.props?.wrapper) menuItem = item.props.wrapper(menuItem);
			else if (item.wrapper) menuItem = item.wrapper(menuItem);
			items.push(React.cloneElement(menuItem, { key: item.key }));
		});
		return items;
	}, [
		collectionItems,
		state,
		sectionStyles,
		itemStyles,
		sectionHeadingStyles
	]);
	return /* @__PURE__ */ jsxs(StyledMenuWrapper, {
		qa,
		styles,
		mods: wrapperMods,
		...filterBaseProps(completeProps),
		children: [
			header ? /* @__PURE__ */ jsx(StyledHeader, {
				"data-size": size,
				styles: headerStyles,
				children: header
			}) : /* @__PURE__ */ jsx("div", { role: "presentation" }),
			/* @__PURE__ */ jsx(StyledMenu, {
				...mergeProps$1({
					styles: menuStyles,
					"data-size": size,
					mods: menuMods
				}, menuProps),
				ref: domRef,
				role: menuProps.role ?? "menu",
				children: renderedItems
			}),
			footer ? /* @__PURE__ */ jsx(StyledFooter, {
				"data-size": size,
				styles: footerStyles,
				children: footer
			}) : /* @__PURE__ */ jsx("div", { role: "presentation" })
		]
	});
}
const _Menu = React.forwardRef(Menu);
const Section$1 = Object.assign(Section, { displayName: "Section" });
const __Menu = Object.assign(_Menu, {
	Item: _CollectionItem,
	Section: Section$1,
	SubMenuTrigger,
	Trigger: _MenuTrigger,
	displayName: "Menu"
});
__Menu.displayName = "Menu";

//#endregion
export { __Menu };
//# sourceMappingURL=Menu.js.map