/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
import { cx, getStyles } from "../../../styles/styler.js";
import { MenuItemBase } from "./Menu.ItemBase.js";
import { Check } from "@yahoo/uds-icons";
import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
import { jsx } from "react/jsx-runtime";
import { useStoreState } from "@ariakit/react";
import { MenuItemCheckbox as MenuItemCheckbox$2, useMenuContext } from "@ariakit/react/menu";
//#region src/components/client/Menu/Menu.ItemCheckbox.tsx
/**
* **✅ A Menu Item Checkbox component**
*
* @componentType Client component
*
* @description
* A checkable menu item that toggles between selected and unselected states. Menu item checkboxes
* allow users to select multiple options from a menu, displaying a checkmark when active. They maintain
* their state even when the menu is closed and reopened.
*
* @see The {@link https://uds.build/docs/components/menu-item-checkbox Menu.ItemCheckbox Docs} for more info
*
* @example
* ```tsx
* 'use client'; // Next.js client component
*
* import { Menu, Button } from "@yahoo/uds";
*
* export function MenuItemCheckboxExample() {
*   return (
*     <Menu.Provider>
*       <Menu.Trigger asChild>
*         <Button>Filter Options</Button>
*       </Menu.Trigger>
*       <Menu.Content>
*         <Menu.ItemCheckbox name="showArchived" defaultChecked={false}>
*           Show Archived
*         </Menu.ItemCheckbox>
*         <Menu.ItemCheckbox name="includeComments" defaultChecked={true}>
*           Include Comments
*         </Menu.ItemCheckbox>
*       </Menu.Content>
*     </Menu.Provider>
*   )
* }
* ```
*
* @usage
* Use MenuItemCheckbox when you need to provide users with multiple selectable options within a menu.
* Unlike radio options, checkboxes allow for multiple simultaneous selections.
*
* @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
**/
const MenuItemCheckbox = forwardRef(function MenuItemCheckbox({ name, endIcon = Check, checked, defaultChecked, hideOnClick, className, ...props }, ref) {
	const itemName = name;
	const hasInitialized = useRef(false);
	const context = useMenuContext();
	const allState = useStoreState(context);
	useEffect(() => {
		if (!hasInitialized.current && defaultChecked !== void 0 && context) {
			context.setValues((prev) => ({
				...prev,
				[itemName]: defaultChecked
			}));
			hasInitialized.current = true;
		}
	}, [
		context,
		defaultChecked,
		itemName
	]);
	const isChecked = useMemo(() => {
		if (checked !== void 0) return checked;
		if (allState?.items?.length) {
			const item = allState?.items.find((item) => item.element?.name === itemName);
			if (item?.element) return item.element.checked;
		}
		const storeValue = allState?.values[itemName];
		return typeof storeValue === "boolean" ? storeValue : defaultChecked ?? false;
	}, [
		allState?.items,
		allState?.values,
		itemName,
		checked,
		defaultChecked
	]);
	const handleChange = useCallback((d) => {
		if (checked === void 0) context?.setValues((prev) => ({
			...prev,
			[itemName]: d.target.checked
		}));
	}, [
		itemName,
		context,
		checked
	]);
	const menuSlotProps = {
		root: { className: getStyles({
			menuitemItemCheckboxVariantRoot: "default",
			menuitemItemCheckboxVariantActiveRoot: isChecked ? "on" : "off"
		}) },
		text: { className: getStyles({
			menuitemItemCheckboxVariantText: "default",
			menuitemItemCheckboxVariantActiveText: isChecked ? "on" : "off"
		}) },
		startIcon: { className: getStyles({
			menuitemItemCheckboxVariantStartIcon: "default",
			menuitemItemCheckboxVariantActiveStartIcon: isChecked ? "on" : "off"
		}) },
		endIcon: { className: getStyles({
			menuitemItemCheckboxVariantEndIcon: "default",
			menuitemItemCheckboxVariantActiveEndIcon: isChecked ? "on" : "off"
		}) }
	};
	return /* @__PURE__ */ jsx(MenuItemBase, {
		ref,
		as: MenuItemCheckbox$2,
		hideEndIcon: !isChecked,
		endIcon,
		active: isChecked,
		className: cx("uds-menu-item-checkbox", className),
		slotProps: menuSlotProps,
		name,
		rootProps: {
			onChange: handleChange,
			defaultChecked,
			checked: checked !== void 0 ? checked : void 0,
			hideOnClick
		},
		...props
	});
});
MenuItemCheckbox.displayName = "MenuItemCheckbox";
//#endregion
export { MenuItemCheckbox };
