/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
import { spacingMap } from "../../../fixtures/dist/index.js";
import { cx, getStyles } from "../../../styles/styler.js";
import { Pressable } from "../Pressable.js";
import { IconSlot } from "../../IconSlot.js";
import { Box } from "../../Box.js";
import { PopoverInternalContext } from "./PopoverContext.js";
import { usePopoverConfig } from "./UDSPopoverConfigProvider.js";
import { useForkRef } from "../../../hooks/useForkRef.js";
import { useSvgFloatingContent } from "../../../hooks/useSvgFloatingContent.js";
import { getUnscaledAnchorRect } from "../../../utils/getUnscaledAnchorRect.js";
import { SvgFloatingOverlay } from "../../SvgFloatingOverlay.js";
import { Cross } from "@yahoo/uds-icons";
import { forwardRef, useContext, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Popover, PopoverArrow, PopoverDismiss, usePopoverContext, useStoreState } from "@ariakit/react";
//#region src/components/client/Popover/PopoverContent.tsx
const ARROW_HEIGHT = 12;
const ARROW_WIDTH = 22;
const ARROW_TIP_RADIUS_FRACTION = .3;
const PopoverContent = forwardRef(function PopoverContent({ children, className, closeIcon = Cross, slotProps, maxWidth, maxHeight }, ref) {
	const store = usePopoverContext();
	const open = useStoreState(store, "open");
	const internalContext = useContext(PopoverInternalContext);
	const disableVerticalSpacing = internalContext?.disableVerticalSpacing ?? false;
	const disableHorizontalSpacing = internalContext?.disableHorizontalSpacing ?? false;
	const sameWidth = internalContext?.sameWidth ?? false;
	const gutter = internalContext?.gutter ?? 4;
	const currentPlacement = useStoreState(store, "currentPlacement");
	const placement = useStoreState(store, "placement");
	const effectivePlacement = currentPlacement ?? placement ?? "top";
	const { borderRadius, gap, spacingHorizontal, spacingVertical, dismissButtonSpacing, dismissIconSize } = usePopoverConfig();
	const dismissButtonSize = dismissIconSize + 2 * spacingMap[dismissButtonSpacing];
	const arrowRef = useRef(null);
	const reducedMotion = internalContext ? internalContext.reducedMotion : false;
	const animationDuration = reducedMotion || !internalContext ? 0 : internalContext.animationDuration;
	const { internalRef, shift, onPositionUpdate, ...svgFloatingContentProps } = useSvgFloatingContent({
		open: open ?? false,
		effectivePlacement,
		borderRadius,
		arrowRef,
		animationDuration,
		hideArrow: internalContext?.hideArrow,
		arrowWidth: ARROW_WIDTH,
		arrowHeight: ARROW_HEIGHT,
		arrowTipRadiusFraction: ARROW_TIP_RADIUS_FRACTION
	});
	const mergedRef = useForkRef(ref, internalRef);
	const { className: closeIconClassName, ...closeIconProps } = slotProps?.closeIcon ?? {};
	const { className: closeIconContainerClassName, ...closeIconContainerProps } = slotProps?.closeIconContainer ?? {};
	const classNames = {
		root: getStyles({
			popoverSizeRoot: "default",
			popoverVariantRoot: "default",
			display: "flex",
			position: "relative",
			className: cx("z-[9999]", "outline-none", "focus-visible:outline-none", className)
		}),
		contentWrapper: getStyles({
			display: "block",
			spacingTop: disableVerticalSpacing ? "0" : spacingVertical,
			spacingStart: disableHorizontalSpacing ? "0" : spacingHorizontal,
			spacingBottom: disableVerticalSpacing ? "0" : spacingVertical,
			spacingEnd: internalContext?.hideDismissButton ? disableHorizontalSpacing ? "0" : spacingHorizontal : void 0
		}),
		svgBase: getStyles({
			popoverSizeSvgBase: "default",
			popoverVariantSvgBase: "default",
			className: cx("uds-bgBlurFillFallback")
		}),
		svgBorder: getStyles({
			popoverSizeSvgBorder: "default",
			popoverVariantSvgBorder: "default"
		}),
		blur: getStyles({
			popoverVariantBlur: "default",
			position: "absolute",
			width: "full",
			height: "full",
			className: cx("uds-bgBlurFallback", "top-0", "left-0", "z-[1]")
		}),
		closeIconContainer: getStyles({
			flexShrink: "0",
			borderRadius: "full",
			alignItems: "center",
			justifyContent: "center",
			display: "flex",
			className: cx(reducedMotion ? "duration-0" : "duration-120", "transition-[background-color]", "bg-carbon-15/0", "hover:bg-carbon-15/10", "active:bg-carbon-15/15", "uds-ring")
		}),
		closeIcon: getStyles({
			popoverVariantCloseIcon: "default",
			popoverSizeCloseIcon: "default"
		})
	};
	return /* @__PURE__ */ jsxs(Popover, {
		hideOnInteractOutside: (event) => {
			if (internalContext && !internalContext.isControlled) return true;
			internalContext?.onClose?.(event);
			return false;
		},
		ref: mergedRef,
		className: classNames.root,
		...slotProps?.root,
		portal: internalContext ? internalContext.portal : true,
		gutter: internalContext?.hideArrow ? gutter : ARROW_HEIGHT + gutter,
		updatePosition: onPositionUpdate,
		style: {
			...shift.x !== 0 || shift.y !== 0 ? { transform: `translate(${shift.x}px, ${shift.y}px)` } : {},
			maxWidth,
			maxHeight
		},
		onClose: internalContext?.onClose,
		sameWidth,
		autoFocusOnShow: internalContext?.disableAutoFocus ? false : (element) => {
			element?.focus({ preventScroll: true });
			return false;
		},
		autoFocusOnHide: !internalContext?.disableAutoFocus,
		getAnchorRect: getUnscaledAnchorRect,
		children: [
			/* @__PURE__ */ jsx(SvgFloatingOverlay, {
				blurClassName: classNames.blur,
				svgClassNames: {
					base: classNames.svgBase,
					border: classNames.svgBorder
				},
				arrowHeight: ARROW_HEIGHT,
				contentWrapperSlotProps: { alignItems: "flex-start" },
				borderRadius,
				svgBaseStyle: slotProps?.svgBase?.style,
				svgBorderStyle: slotProps?.svgBorder?.style,
				...svgFloatingContentProps,
				children: /* @__PURE__ */ jsx(Box, {
					className: cx(classNames.contentWrapper),
					...slotProps?.content,
					style: { paddingInlineEnd: internalContext?.hideDismissButton || disableHorizontalSpacing ? void 0 : spacingMap[gap] + spacingMap[spacingHorizontal] + dismissButtonSize },
					children
				})
			}),
			!internalContext?.hideDismissButton && /* @__PURE__ */ jsx(PopoverDismiss, { render: /* @__PURE__ */ jsx(Pressable, {
				className: cx(classNames.closeIconContainer, "absolute", "z-[4]", closeIconContainerClassName),
				...closeIconContainerProps,
				style: {
					...closeIconContainerProps?.style,
					top: spacingMap[spacingVertical],
					insetInlineEnd: spacingMap[spacingHorizontal],
					width: dismissButtonSize,
					height: dismissButtonSize,
					...svgFloatingContentProps.childTransitionStyle
				},
				children: /* @__PURE__ */ jsx(IconSlot, {
					icon: closeIcon,
					iconProps: {
						className: cx(classNames.closeIcon, closeIconClassName),
						...closeIconProps
					}
				})
			}) }),
			!internalContext?.hideArrow && /* @__PURE__ */ jsx(PopoverArrow, {
				size: 1,
				ref: arrowRef,
				style: { opacity: 0 },
				...slotProps?.caret
			})
		]
	});
});
PopoverContent.displayName = "PopoverContent";
//#endregion
export { PopoverContent };
