/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
import { cx, getStyles } from "../../../styles/styler.js";
import { IconSlot } from "../../IconSlot.js";
import { Text } from "../../Text.js";
import { Box } from "../../Box.js";
import { VStack } from "../../VStack.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 { useTooltipConfig } from "./UDSTooltipConfigProvider.js";
import { TooltipInternalContext } from "./tooltipContext.js";
import { forwardRef, isValidElement, useContext, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Tooltip, TooltipArrow, useStoreState, useTooltipContext } from "@ariakit/react";
//#region src/components/client/Tooltip/TooltipContent.tsx
const ARROW_HEIGHT = 8;
const ARROW_WIDTH = 12;
const ARROW_TIP_RADIUS_FRACTION = .5;
const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth, startTitleIcon, title, endContent, className, id, slotProps }, ref) {
	const store = useTooltipContext();
	const open = useStoreState(store, "open");
	const internalContext = useContext(TooltipInternalContext);
	const currentPlacement = useStoreState(store, "currentPlacement");
	const placement = useStoreState(store, "placement");
	const effectivePlacement = currentPlacement ?? placement ?? "top";
	const { borderRadius, animationDuration } = useTooltipConfig();
	const defaultBorderRadius = borderRadius["default"];
	const arrowRef = useRef(null);
	const { internalRef, shift, onPositionUpdate, ...svgFloatingContentProps } = useSvgFloatingContent({
		open: open ?? false,
		effectivePlacement,
		borderRadius: defaultBorderRadius,
		arrowRef,
		animationDuration,
		arrowWidth: ARROW_WIDTH,
		arrowHeight: ARROW_HEIGHT,
		arrowTipRadiusFraction: ARROW_TIP_RADIUS_FRACTION
	});
	const mergedRef = useForkRef(ref, internalRef);
	const classNames = {
		root: getStyles({
			tooltipSizeRoot: "default",
			tooltipVariantRoot: "default",
			className: cx(maxWidth === void 0 && "max-w-lg", "flex", "z-[9999]", className)
		}),
		svg: getStyles({
			tooltipSizeSvg: "default",
			tooltipVariantSvg: "default",
			className: cx("uds-bgBlurFillFallback")
		}),
		blur: getStyles({
			tooltipVariantBlur: "default",
			position: "absolute",
			width: "full",
			height: "full",
			className: cx("uds-bgBlurFallback", "top-0", "left-0", "z-[1]")
		}),
		title: getStyles({ tooltipSizeTitle: "default" }),
		body: getStyles({ tooltipSizeBody: "default" }),
		endContent: getStyles({ tooltipSizeEndContent: "default" }),
		icon: getStyles({
			tooltipSizeIcon: "default",
			tooltipVariantIcon: "default"
		})
	};
	return /* @__PURE__ */ jsxs(Tooltip, {
		ref: mergedRef,
		className: classNames.root,
		...slotProps?.root,
		hideOnHoverOutside: internalContext?.isControlled ? false : void 0,
		hideOnInteractOutside: internalContext?.isControlled ? false : void 0,
		portal: internalContext ? internalContext.portal : true,
		gutter: 10,
		updatePosition: onPositionUpdate,
		getAnchorRect: getUnscaledAnchorRect,
		style: {
			...shift.x !== 0 || shift.y !== 0 ? { transform: `translate(${shift.x}px, ${shift.y}px)` } : void 0,
			...maxWidth !== void 0 ? { maxWidth } : void 0
		},
		children: [/* @__PURE__ */ jsx(SvgFloatingOverlay, {
			blurClassName: classNames.blur,
			svgClassNames: { base: classNames.svg },
			arrowHeight: ARROW_HEIGHT,
			contentWrapperSlotProps: { id },
			contentOverflow: "visible",
			...svgFloatingContentProps,
			children: /* @__PURE__ */ jsxs(VStack, {
				className: "gap-[inherit]",
				children: [title && /* @__PURE__ */ jsxs(Box, {
					alignItems: "center",
					columnGap: "1",
					children: [startTitleIcon && /* @__PURE__ */ jsx(IconSlot, {
						iconProps: { variant: "fill" },
						icon: startTitleIcon,
						className: classNames.icon,
						...slotProps?.icon
					}), /* @__PURE__ */ jsx(Text, {
						className: classNames.title,
						color: "inherit",
						...slotProps?.title,
						children: title
					})]
				}), /* @__PURE__ */ jsxs(Box, {
					alignItems: "center",
					columnGap: "1.5",
					children: [/* @__PURE__ */ jsx(Text, {
						className: classNames.body,
						color: "inherit",
						...slotProps?.body,
						children
					}), endContent && !isValidElement(endContent) ? /* @__PURE__ */ jsx(Text, {
						className: classNames.endContent,
						color: "inherit",
						...slotProps?.endContent,
						children: endContent
					}) : endContent]
				})]
			})
		}), /* @__PURE__ */ jsx(TooltipArrow, {
			ref: arrowRef,
			style: { opacity: 0 },
			...slotProps?.arrow
		})]
	});
});
TooltipContent.displayName = "TooltipContent";
//#endregion
export { TooltipContent };
