"use client";
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { cx, getStyles } from "../../../styles/styler.js";
import { VStack } from "../../VStack.js";
import { forwardRef, useEffect, useMemo, useState } from "react";
import { spacingMap } from "@yahoo/uds/fixtures";
import { jsx } from "react/jsx-runtime";
import { useStoreState } from "@ariakit/react";
import { AnimatePresence, m } from "motion/react";
import { Menu, useMenuContext } from "@ariakit/react/menu";

//#region src/components/client/Menu/Menu.Content.tsx
const MotionVStack = m.create(VStack);
const ANIMATION_CONFIG = {
	distance: 5,
	scale: .97
};
const variants = {
	top: {
		x: 0,
		y: ANIMATION_CONFIG.distance
	},
	bottom: {
		x: 0,
		y: -ANIMATION_CONFIG.distance
	},
	left: {
		x: ANIMATION_CONFIG.distance,
		y: 0
	},
	right: {
		x: -ANIMATION_CONFIG.distance,
		y: 0
	}
};
const getMenuAnimationVariants = (placement = "bottom") => {
	const [base = "top"] = placement?.split("-");
	return {
		closed: {
			...variants[base],
			opacity: 0,
			scale: ANIMATION_CONFIG.scale
		},
		open: {
			y: 0,
			x: 0,
			opacity: 1,
			scale: 1
		}
	};
};
const useMenuAnimationVariants = (placement) => {
	return useMemo(() => getMenuAnimationVariants(placement), [placement]);
};
/**
* **📦 A Menu Content component**
*
* @componentType Client component
*
* @description
* A content component for the menu, which is used to provide the menu context to the menu items.
*
* @see The {@link https://uds.build/docs/components/menu-content Menu.Content Docs} for more info
*
* @example
* ```tsx
* 'use client'; // Next.js client component
*
* import { Menu, Button } from "@yahoo/uds";
* import { Calendar, Clipboard } from "@yahoo/uds-icons";
*
* export function MenuProviderExample() {
*   return (
*     <Menu.Provider>
*       <Menu.Trigger asChild>
*         <Button>Menu Options</Button>
*       </Menu.Trigger>
*       <Menu.Content>
*         <Menu.Item startIcon={Calendar}>Calendar</Menu.Item>
*         <Menu.Item startIcon={Clipboard} endIcon={DiagonalRightUp}>
*           Clipboard
*         </Menu.Item>
*         <Menu.Item active>Active Item</Menu.Item>
*       </Menu.Content>
*     </Menu.Provider>
*   )
* }
* ```
*
* @usage
* Using Menu.Content is required to use Menu.Item and Menu.ItemCheckbox. It acts as the actual menu container.
*
* @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
**/
const MenuContent = forwardRef(function MenuContent({ size = "default", variant = "default", gutter = "1", overflow, className, sameWidth, focusable, children, portalElement, portal = true, disableAutoBorderRadius, nestedBorderRadius = !disableAutoBorderRadius, nestedBorderRadiusSize, nestedBorderRadiusSpacing, nestedBorderRadiusWidth, ...props }, ref) {
	const context = useMenuContext();
	const open = useStoreState(context, "open");
	const mounted = useStoreState(context, "mounted");
	const currentPlacement = useStoreState(context, "currentPlacement");
	const placement = useStoreState(context, "placement");
	const [prevPlacement, setPrevPlacement] = useState(currentPlacement);
	const [nextPlacement, setNextPlacement] = useState(currentPlacement);
	useEffect(() => {
		if (placement !== nextPlacement) setNextPlacement(placement);
	}, [placement]);
	useEffect(() => {
		if (currentPlacement !== nextPlacement) setNextPlacement(currentPlacement);
	}, [currentPlacement]);
	useEffect(() => {
		if (mounted && nextPlacement !== prevPlacement) setPrevPlacement(nextPlacement);
	}, [
		mounted,
		nextPlacement,
		prevPlacement
	]);
	const motionState = useMemo(() => {
		if (!open || !mounted) return "closed";
		return "open";
	}, [open, mounted]);
	const variants = useMenuAnimationVariants(nextPlacement);
	const gutterValue = useMemo(() => spacingMap[gutter], [gutter]);
	const classNames = { root: getStyles({
		menucontentSizeRoot: size,
		menucontentVariantRoot: variant,
		className: cx("uds-menu-content", "transition-shadow", "duration-200", "ease-in-out", "min-w-60", "max-w-lg", "max-h-96", "overflow-auto", "uds-ring", "z-10", "group", className)
	}) };
	return /* @__PURE__ */ jsx(AnimatePresence, {
		initial: false,
		children: /* @__PURE__ */ jsx(Menu, {
			gutter: gutterValue,
			sameWidth,
			focusable,
			store: context,
			ref,
			portalElement,
			portal,
			...props,
			render: /* @__PURE__ */ jsx(MotionVStack, {
				overflow,
				animate: motionState,
				variants,
				nestedBorderRadius,
				nestedBorderRadiusSize,
				nestedBorderRadiusSpacing,
				nestedBorderRadiusWidth,
				className: classNames.root,
				children
			})
		})
	});
});
MenuContent.displayName = "MenuContent";

//#endregion
export { MenuContent };