'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React, { useEffect } from 'react';
import { useIntersect } from '../../hooks/useIntersect.js';
import './index.scss';
/**
   * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false
   */ export const Tooltip = (props)=>{
    const { alignCaret = 'center', boundingRef, children, className, delay = 350, position: positionFromProps, show: showFromProps = true, staticPositioning = false } = props;
    const [show, setShow] = React.useState(showFromProps);
    const [position, setPosition] = React.useState('top');
    const getTitleAttribute = (content)=>typeof content === 'string' ? content : '';
    const [ref, intersectionEntry] = useIntersect({
        root: boundingRef?.current || null,
        rootMargin: '-145px 0px 0px 100px',
        threshold: 0
    }, staticPositioning);
    useEffect(()=>{
        let timerID;
        // do not use the delay on transition-out
        if (delay && showFromProps) {
            timerID = setTimeout(()=>{
                setShow(showFromProps);
            }, delay);
        } else {
            setShow(showFromProps);
        }
        return ()=>{
            if (timerID) {
                clearTimeout(timerID);
            }
        };
    }, [
        showFromProps,
        delay
    ]);
    useEffect(()=>{
        if (staticPositioning) {
            return;
        }
        setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom');
    }, [
        intersectionEntry,
        staticPositioning
    ]);
    // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.
    return /*#__PURE__*/ _jsxDEV(React.Fragment, {
        children: [
            !staticPositioning && /*#__PURE__*/ _jsxDEV("aside", {
                "aria-hidden": "true",
                className: [
                    'tooltip',
                    className,
                    `tooltip--caret-${alignCaret}`,
                    'tooltip--position-top'
                ].filter(Boolean).join(' '),
                ref: ref,
                style: {
                    opacity: '0'
                },
                children: /*#__PURE__*/ _jsxDEV("div", {
                    className: "tooltip-content",
                    children: children
                }, void 0, false, {
                    fileName: "src/elements/Tooltip/index.tsx",
                    lineNumber: 85,
                    columnNumber: 11
                }, this)
            }, void 0, false, {
                fileName: "src/elements/Tooltip/index.tsx",
                lineNumber: 77,
                columnNumber: 9
            }, this),
            /*#__PURE__*/ _jsxDEV("aside", {
                className: [
                    'tooltip',
                    className,
                    show && 'tooltip--show',
                    `tooltip--caret-${alignCaret}`,
                    `tooltip--position-${positionFromProps || position}`
                ].filter(Boolean).join(' '),
                title: getTitleAttribute(children),
                children: /*#__PURE__*/ _jsxDEV("div", {
                    className: "tooltip-content",
                    children: children
                }, void 0, false, {
                    fileName: "src/elements/Tooltip/index.tsx",
                    lineNumber: 100,
                    columnNumber: 9
                }, this)
            }, void 0, false, {
                fileName: "src/elements/Tooltip/index.tsx",
                lineNumber: 88,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/Tooltip/index.tsx",
        lineNumber: 75,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map