var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import * as React from "react";
import { FloatingPortal, arrow as arrowMiddleware, offset, flip, shift, useClick, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, autoUpdate } from "@floating-ui/react";
import { cn } from "@utils";
import { tooltipVariants } from "./tooltipVariants";
export const Tooltip = React.forwardRef((_a, ref) => {
    var { title, children, trigger, size = "md", placement = "bottom-end", clickable = false, className, triggerElementClassName, onTriggerClick, renderOutsidePortal = false, triggerAriaLabel, disabled = false } = _a, props = __rest(_a, ["title", "children", "trigger", "size", "placement", "clickable", "className", "triggerElementClassName", "onTriggerClick", "renderOutsidePortal", "triggerAriaLabel", "disabled"]);
    const [open, setOpen] = React.useState(false);
    const arrowRef = React.useRef(null);
    const { x, y, refs, strategy, context, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, placement: hookPlacement } = useFloating({
        open,
        onOpenChange: setOpen,
        placement,
        whileElementsMounted: autoUpdate,
        middleware: [offset(10), flip(), shift(), arrowMiddleware({ element: arrowRef, padding: 14 })]
    });
    const hover = useHover(context, { move: false, enabled: !clickable, delay: 200 });
    const focus = useFocus(context);
    const click = useClick(context, { enabled: clickable && !disabled });
    const dismiss = useDismiss(context);
    const role = useRole(context, { role: "tooltip" });
    const { getReferenceProps, getFloatingProps } = useInteractions([
        hover,
        focus,
        click,
        dismiss,
        role
    ]);
    const invalidTrigger = isNodeInvalid(trigger);
    const invalidChild = isNodeInvalid(children);
    const referenceProps = getReferenceProps({
        onClick: () => {
            if (!disabled) {
                onTriggerClick === null || onTriggerClick === void 0 ? void 0 : onTriggerClick();
            }
        }
    });
    const popupContent = (_jsxs("div", Object.assign({ role: "tooltip", ref: (node) => {
            refs.setFloating(node);
            if (ref && typeof ref === "function") {
                ref(node);
            }
            else if (ref && "current" in ref) {
                ref.current = node;
            }
        }, style: { position: strategy, top: y !== null && y !== void 0 ? y : 0, left: x !== null && x !== void 0 ? x : 0 }, className: cn(tooltipVariants({ size }), open ? "visible" : "invisible", className) }, getFloatingProps(), props, { children: [_jsxs("div", { "data-testid": "tooltip-content", className: cn("flex flex-col gap-1 relative z-10 break-words dark:text-secondary-50", size === "sm"
                    ? "text-xs text-secondary-300"
                    : "text-sm text-secondary-300"), children: [title && (_jsx("h1", { className: cn(size === "sm" ? "text-xs" : "text-base", "font-medium text-black dark:text-white"), children: title })), !invalidChild && children] }), _jsx("div", { ref: arrowRef, style: { left: arrowX, top: arrowY, [getCSSPropertyForPlacement(hookPlacement)]: "-9px" }, className: cn("absolute aspect-square w-4 h-4 rounded-tl-sm bg-inherit border-1.5 border-r-0 border-b-0 border-gray-100 dark:border-secondary-500", getArrowPlacementClass(hookPlacement)) })] })));
    if (invalidTrigger) {
        return null;
    }
    return (_jsxs(_Fragment, { children: [_jsx("span", Object.assign({ "data-testid": "tooltip-trigger", role: "button", ref: refs.setReference, tabIndex: 0, "aria-label": triggerAriaLabel, className: cn("relative text-secondary-400 dark:text-secondary-50 max-w-max", disabled && "!text-secondary-200 cursor-not-allowed", triggerElementClassName) }, referenceProps, { children: trigger })), open && (renderOutsidePortal ? popupContent : _jsx(FloatingPortal, { children: popupContent }))] }));
});
Tooltip.displayName = "Tooltip";
/**
 * Determines the CSS property for positioning the arrow based on placement
 */
const getCSSPropertyForPlacement = (placementSide) => {
    const [staticPosition] = placementSide.split("-");
    const mapping = {
        top: "bottom",
        right: "left",
        bottom: "top",
        left: "right"
    };
    return mapping[staticPosition];
};
/**
 * Checks if the node is an invalid ReactNode (empty object)
 */
const isNodeInvalid = (node) => typeof node === "object" && !Array.isArray(node) && Object.keys(node).length === 0;
/**
 * Returns the rotation class for the arrow based on placement
 */
function getArrowPlacementClass(placementSide) {
    const [staticPosition] = placementSide.split("-");
    switch (staticPosition) {
        case "top":
            return "-rotate-[135deg]";
        case "right":
            return "-rotate-45";
        case "left":
            return "rotate-[135deg]";
        case "bottom":
        default:
            return "rotate-45";
    }
}
//# sourceMappingURL=tooltip.js.map