import { isString } from "../utils/assertion.js";
import { useTh } from "../core/theme.js";
import { useUp } from "../core/media.js";
import { v } from "../core/styled.js";
import Link from "../link/link.js";
import { bg } from "./consts.js";
import { TooltipContent } from "./tooltipContent.js";
import { cloneElement, isValidElement, useRef, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { FloatingArrow, FloatingPortal, arrow, autoUpdate, flip, offset, shift, useFloating, useHover, useInteractions, useRole, useTransitionStyles } from "@floating-ui/react";

//#region src/tooltip/tooltip.tsx
const stripHtmlTags = (html) => {
	const withoutTags = html.replace(/<[^>]*>/g, "");
	const textarea = document.createElement("textarea");
	textarea.innerHTML = withoutTags;
	return textarea.value;
};
/**
* A simple text popup hint.
*
* Displayed on mouse enter, and is hidden on mouse leave.
*
* */
const Tooltip = (props) => {
	const { children, fontSize = "16px", linkText, linkProps, minWidth, maxWidth = "400px", text = "", placement = "top", disabled = false, visible = false, offset: offsetProp = [0, 0], whiteSpace = "pre-wrap", wordBreak = "break-word" } = props;
	const isDesktop = useUp("md");
	const [isOpen, setIsOpen] = useState(visible);
	const arrowRef = useRef(null);
	const { refs, floatingStyles, context } = useFloating({
		open: visible || isOpen,
		onOpenChange: setIsOpen,
		placement,
		middleware: [
			offset({
				mainAxis: offsetProp[1] + 6,
				crossAxis: offsetProp[0]
			}),
			flip(),
			shift(),
			arrow({ element: arrowRef })
		],
		whileElementsMounted: autoUpdate
	});
	const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
		duration: 150,
		initial: { opacity: 0 },
		open: { opacity: 1 },
		close: { opacity: 0 }
	});
	const { getReferenceProps, getFloatingProps } = useInteractions([useHover(context, { move: false }), useRole(context, { role: "tooltip" })]);
	const darkBlue18 = useTh(`colors.${bg.regular}`);
	const sandstone55 = useTh(`colors.${bg.disabled}`);
	const arrowColor = disabled ? sandstone55 : darkBlue18;
	const content = isString(text) ? /* @__PURE__ */ jsx(TooltipContent, {
		disabled,
		fontSize,
		maxWidth,
		minWidth,
		whiteSpace,
		wordBreak,
		children: /* @__PURE__ */ jsxs(v.div, { children: [stripHtmlTags(text), !!linkText && /* @__PURE__ */ jsxs(Fragment$1, { children: ["\xA0", /* @__PURE__ */ jsx(Link, {
			variant: "white",
			...linkProps,
			children: linkText
		})] })] })
	}) : /* @__PURE__ */ jsx(TooltipContent, {
		disabled,
		fontSize,
		maxWidth,
		minWidth,
		children: text
	});
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [isValidElement(children) ? cloneElement(children, {
		ref: refs.setReference,
		...getReferenceProps()
	}) : children, isMounted && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs("div", {
		ref: refs.setFloating,
		style: {
			...floatingStyles,
			...transitionStyles
		},
		...getFloatingProps(),
		children: [content, isDesktop && /* @__PURE__ */ jsx(FloatingArrow, {
			ref: arrowRef,
			context,
			fill: arrowColor,
			width: 12,
			height: 6
		})]
	}) })] });
};
Tooltip.displayName = "Tooltip";

//#endregion
export { Tooltip as default };
globalThis.__vuiVersion__ = "4.0.0"
//# sourceMappingURL=tooltip.js.map