import { _ as autoUpdate, d as arrow, g as size, m as offset, o as useFloating, t as FloatingArrow } from "./floating-ui.react.js";
import classNames from "classnames";
import React, { useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import styles from "./components/HelpDetails/styles.module.scss";
var BUBBLE_WIDTH_OFFSET = 26;
var BUBBLE_Y_OFFSET = 1;
var HelpDetails = (props) => {
	const { children, controllerRef, testId, ref } = props;
	const arrowRef = useRef(null);
	const [bubbleMinWidth, setBubbleMinWidth] = React.useState(null);
	const [arrowYOffsetValue, setArrowYOffsetValue] = useState();
	const { refs, context, floatingStyles } = useFloating({
		middleware: [
			offset(arrowYOffsetValue),
			controllerRef && arrow({ element: arrowRef }),
			size({ apply({ rects }) {
				setBubbleMinWidth(rects.reference.x + rects.reference.width / 2);
				const { reference, floating } = rects;
				const controllerBottom = reference.y + reference.height;
				setArrowYOffsetValue(floating.y - controllerBottom + BUBBLE_Y_OFFSET);
			} })
		],
		placement: "bottom",
		whileElementsMounted: autoUpdate,
		elements: { reference: controllerRef?.current }
	});
	const helpDetailsClasses = classNames(styles["help-details"], controllerRef ? styles["help-details--inline"] : styles["help-details--standalone"]);
	const contentClasses = classNames(controllerRef ? styles["help-details__content--inline"] : styles["help-details__content--standalone"]);
	return /* @__PURE__ */ jsxs("div", {
		className: helpDetailsClasses,
		"data-testid": testId,
		ref,
		style: { minWidth: bubbleMinWidth ? `${bubbleMinWidth + BUBBLE_WIDTH_OFFSET}px` : void 0 },
		children: [/* @__PURE__ */ jsx("div", {
			style: floatingStyles,
			ref: refs.setFloating,
			children: controllerRef && typeof arrowYOffsetValue !== "undefined" && /* @__PURE__ */ jsx(FloatingArrow, {
				ref: arrowRef,
				context,
				fill: "var(--core-color-plum-50)",
				stroke: "var(--core-color-plum-400)",
				strokeWidth: 1
			})
		}), /* @__PURE__ */ jsx("div", {
			className: contentClasses,
			children
		})]
	});
};
HelpDetails.displayName = "HelpDetails";
var HelpDetails_default = HelpDetails;
export { HelpDetails_default as t };

//# sourceMappingURL=HelpDetails.js.map