"use client";
import { createScopedKeydownHandler } from "../../../core/utils/create-scoped-keydown-handler/create-scoped-keydown-handler.mjs";
import { createEventHandler } from "../../../core/utils/create-event-handler/create-event-handler.mjs";
import { parseThemeColor } from "../../../core/MantineProvider/color-functions/parse-theme-color/parse-theme-color.mjs";
import { useMantineTheme } from "../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs";
import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
import { polymorphicFactory } from "../../../core/factory/polymorphic-factory.mjs";
import { useDirection } from "../../../core/DirectionProvider/DirectionProvider.mjs";
import { UnstyledButton } from "../../UnstyledButton/UnstyledButton.mjs";
import { useMenuContext } from "../Menu.context.mjs";
import { SubMenuContext } from "../MenuSub/MenuSub.context.mjs";
import Menu_module_default from "../Menu.module.mjs";
import { use, useRef } from "react";
import { useMergedRef } from "@mantine/hooks";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Menu/MenuItem/MenuItem.tsx
const MenuItem = polymorphicFactory((props) => {
	const { classNames, className, style, styles, vars, color, closeMenuOnClick, leftSection, rightSection, children, disabled, "data-disabled": dataDisabled, ref, ...others } = useProps("MenuItem", null, props);
	const ctx = useMenuContext();
	const subCtx = use(SubMenuContext);
	const theme = useMantineTheme();
	const { dir } = useDirection();
	const itemRef = useRef(null);
	const _others = others;
	const handleClick = createEventHandler(_others.onClick, () => {
		if (dataDisabled) return;
		if (typeof closeMenuOnClick === "boolean") closeMenuOnClick && ctx.closeDropdownImmediately();
		else ctx.closeOnItemClick && ctx.closeDropdownImmediately();
	});
	const handleMouseMove = createEventHandler(_others.onMouseMove, () => {
		if (!ctx.hasSearch) return;
		const dropdown = itemRef.current?.closest("[data-menu-dropdown]");
		if (!dropdown) return;
		dropdown.querySelectorAll("[data-menu-active]").forEach((node) => {
			if (node !== itemRef.current && node.closest("[data-menu-dropdown]") === dropdown) node.removeAttribute("data-menu-active");
		});
	});
	const colors = color ? theme.variantColorResolver({
		color,
		theme,
		variant: "light"
	}) : void 0;
	const parsedThemeColor = color ? parseThemeColor({
		color,
		theme
	}) : null;
	const handleKeydown = createEventHandler(_others.onKeyDown, (event) => {
		if (event.key === "ArrowLeft" && subCtx) {
			subCtx.close();
			subCtx.focusParentItem();
		}
	});
	return /* @__PURE__ */ jsxs(UnstyledButton, {
		onMouseDown: (event) => event.preventDefault(),
		...others,
		unstyled: ctx.unstyled,
		tabIndex: ctx.menuItemTabIndex,
		...ctx.getStyles("item", {
			className,
			style,
			styles,
			classNames
		}),
		ref: useMergedRef(itemRef, ref),
		role: "menuitem",
		disabled,
		"data-menu-item": true,
		"data-disabled": disabled || dataDisabled || void 0,
		"data-mantine-stop-propagation": true,
		onClick: handleClick,
		onMouseMove: handleMouseMove,
		onKeyDown: createScopedKeydownHandler({
			siblingSelector: "[data-menu-item]:not([data-disabled])",
			parentSelector: "[data-menu-dropdown]",
			activateOnFocus: false,
			loop: ctx.loop,
			dir,
			orientation: "vertical",
			onKeyDown: handleKeydown
		}),
		__vars: {
			"--menu-item-color": parsedThemeColor?.isThemeColor && parsedThemeColor?.shade === void 0 ? `var(--mantine-color-${parsedThemeColor.color}-6)` : colors?.color,
			"--menu-item-hover": colors?.hover
		},
		children: [
			ctx.alignItemsLabels === "all" && /* @__PURE__ */ jsx("div", {
				...ctx.getStyles("itemIndicator", {
					styles,
					classNames
				}),
				"data-placeholder": true
			}),
			leftSection && /* @__PURE__ */ jsx("div", {
				...ctx.getStyles("itemSection", {
					styles,
					classNames
				}),
				"data-position": "left",
				children: leftSection
			}),
			children && /* @__PURE__ */ jsx("div", {
				...ctx.getStyles("itemLabel", {
					styles,
					classNames
				}),
				"data-menu-item-label": true,
				children
			}),
			rightSection && /* @__PURE__ */ jsx("div", {
				...ctx.getStyles("itemSection", {
					styles,
					classNames
				}),
				"data-position": "right",
				children: rightSection
			})
		]
	});
});
MenuItem.classes = Menu_module_default;
MenuItem.displayName = "@mantine/core/MenuItem";
//#endregion
export { MenuItem };

//# sourceMappingURL=MenuItem.mjs.map