import React__default, { useRef, useState } from 'react';
import classnames from 'classnames';
import { u as useFloating, F as FloatingPortal } from './floating-ui.react-es.js';
import { motion } from 'framer-motion';
import { useSafeLayoutEffect, useIsMounted } from '@jobber/hooks';
import { s as shift, n as flip, o as arrow, p as hide, q as autoUpdate, r as limitShift } from './floating-ui.react-dom-es.js';

var styles = {"shadowActivator":"sZQ1M6tj8-c-","tooltipWrapper":"_0o-yEgfXmSQ-","tooltip":"Q1YfFqI71cw-","arrow":"ZP3ev-wT-OI-","top":"jlEmO6f6uHg-","bottom":"z9JQ-DR-QYc-","left":"zWATWgq3bS4-","right":"-tDm6lNCCic-","tooltipMessage":"djrmr4mADlA-","hidden":"p92TIli5Sgw-","spinning":"bobYmlUMnuY-"};

const TOOLTIP_SHIFT_PADDING = 8;
const TOOLTIP_ARROW_PADDING = 6;
function useTooltipPositioning({ preferredPlacement, }) {
    var _a, _b, _c;
    const shadowRef = useRef(null);
    const [arrowElement, setArrowRef] = useState();
    const referenceElement = (_a = shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling;
    const { refs, floatingStyles, middlewareData, placement } = useFloating({
        placement: preferredPlacement,
        strategy: "absolute",
        middleware: [
            shift({
                mainAxis: true,
                crossAxis: false,
                padding: TOOLTIP_SHIFT_PADDING,
                limiter: limitShift(),
            }),
            flip({ fallbackPlacements: ["top", "bottom", "left", "right"] }),
            arrow({
                element: arrowElement || null,
                padding: TOOLTIP_ARROW_PADDING,
            }),
            hide(),
        ],
        elements: {
            reference: referenceElement || null,
        },
        whileElementsMounted: autoUpdate,
    });
    const isHidden = (_c = (_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden) !== null && _c !== void 0 ? _c : false;
    return {
        styles: {
            float: floatingStyles,
            arrow: middlewareData.arrow,
        },
        isHidden,
        placement: placement,
        shadowRef,
        setArrowRef,
        setTooltipRef: refs.setFloating,
    };
}

const variation = {
    startOrStop: { opacity: 0 },
    done: { opacity: 1 },
};
function Tooltip({ message, children, preferredPlacement = "top", setTabIndex = true, }) {
    var _a, _b, _c, _d;
    const [show, setShow] = useState(false);
    const { placement, shadowRef, styles: floatingStyles, setArrowRef, setTooltipRef, isHidden, } = useTooltipPositioning({ preferredPlacement: preferredPlacement });
    initializeListeners();
    const toolTipClassNames = classnames(styles.tooltipWrapper, placement === "bottom" && styles.bottom, placement === "top" && styles.top, placement === "left" && styles.left, placement === "right" && styles.right, isHidden && styles.hidden);
    const arrowX = (_a = floatingStyles.arrow) === null || _a === void 0 ? void 0 : _a.x;
    const arrowY = (_b = floatingStyles.arrow) === null || _b === void 0 ? void 0 : _b.y;
    const arrowStyles = {
        position: "absolute",
        left: arrowX !== null && arrowX !== undefined
            ? `${(_c = floatingStyles.arrow) === null || _c === void 0 ? void 0 : _c.x}px`
            : "",
        top: arrowY !== null && arrowY !== undefined
            ? `${(_d = floatingStyles.arrow) === null || _d === void 0 ? void 0 : _d.y}px`
            : "",
    };
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
        children,
        React__default.createElement(TooltipPortal, null, show && Boolean(message) && (React__default.createElement("div", { className: toolTipClassNames, style: floatingStyles.float, ref: setTooltipRef, role: "tooltip", hidden: isHidden, "data-placement": placement },
            React__default.createElement(motion.div, { className: styles.tooltip, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", transition: {
                    ease: "easeOut",
                    duration: 0.15,
                    delay: 0.3,
                } },
                React__default.createElement("p", { className: styles.tooltipMessage }, message),
                React__default.createElement("div", { ref: setArrowRef, style: arrowStyles, className: styles.arrow })))))));
    function initializeListeners() {
        const showTooltip = () => {
            setShow(true);
        };
        const hideTooltip = () => {
            setShow(false);
        };
        const injectAttributes = () => {
            var _a;
            if ((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling) {
                const activator = shadowRef.current.nextElementSibling;
                // Manually inject "aria-description" and "tabindex" to let the screen
                // readers read the tooltip message.
                // This is to avoid having to add those attribute as a prop on every
                // component we have.
                activator.setAttribute("aria-description", message);
                if (setTabIndex) {
                    activator.setAttribute("tabindex", "0"); // enable focus
                }
            }
        };
        const addListeners = () => {
            var _a;
            if ((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling) {
                const activator = shadowRef.current.nextElementSibling;
                activator.addEventListener("mouseenter", showTooltip);
                activator.addEventListener("mouseleave", hideTooltip);
                activator.addEventListener("focus", showTooltip);
                activator.addEventListener("blur", hideTooltip);
            }
        };
        const removeListeners = () => {
            var _a;
            if ((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling) {
                const activator = shadowRef.current.nextElementSibling;
                activator.removeEventListener("mouseenter", showTooltip);
                activator.removeEventListener("mouseleave", hideTooltip);
                activator.removeEventListener("focus", showTooltip);
                activator.removeEventListener("blur", hideTooltip);
            }
        };
        useSafeLayoutEffect(() => {
            injectAttributes();
            addListeners();
            return () => {
                removeListeners();
            };
        }, []);
    }
}
function TooltipPortal({ children }) {
    const mounted = useIsMounted();
    if (!(mounted === null || mounted === void 0 ? void 0 : mounted.current)) {
        return null;
    }
    return React__default.createElement(FloatingPortal, null, children);
}

export { Tooltip as T };
