"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tooltip = void 0;
const tslib_1 = require("tslib");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_1 = tslib_1.__importStar(require("react"));
require("./style.less");
const Tooltip = ({ title, children, delay }) => {
    const [visible, setVisible] = (0, react_1.useState)(false);
    const targetRef = (0, react_1.useRef)(null);
    const tooltipRef = (0, react_1.useRef)(null);
    const arrowRef = (0, react_1.useRef)(null);
    const timerRef = (0, react_1.useRef)(null);
    (0, react_1.useEffect)(() => () => clearTimeout(timerRef.current), []);
    function handleMouseEnter() {
        if (visible) {
            if (timerRef.current) {
                clearTimeout(timerRef.current);
            }
            return;
        }
        timerRef.current = setTimeout(() => {
            setVisible(true);
            if (tooltipRef.current && targetRef.current && arrowRef.current) {
                const { x, y, width, height } = targetRef.current.getBoundingClientRect();
                const tooltipRect = tooltipRef.current.getBoundingClientRect();
                if (y < tooltipRect.height * 1.5) {
                    arrowRef.current.className += ' kt-tooltip-reverse-arrow';
                    tooltipRef.current.style.top = `${y + height + tooltipRect.height / 2}px`;
                }
                else {
                    tooltipRef.current.style.top = `${y - tooltipRect.height * 1.5}px`;
                }
                if (x + tooltipRect.width / 2 >= document.body.offsetWidth) {
                    arrowRef.current.style.right = `${width / 2 - 7}px`;
                    tooltipRef.current.style.left = `${x + width - tooltipRect.width}px`;
                }
                else if (x - tooltipRect.width / 2 <= 0) {
                    arrowRef.current.style.left = `${width / 2 - 7}px`;
                    tooltipRef.current.style.left = `${x}px`;
                }
                else {
                    arrowRef.current.style.left = `${tooltipRect.width / 2 - 7}px`;
                    tooltipRef.current.style.left = `${x + width / 2 - tooltipRect.width / 2}px`;
                }
            }
            clearTimeout(timerRef.current);
        }, delay || 500);
    }
    function handleMouseLeave() {
        if (timerRef.current) {
            clearTimeout(timerRef.current);
        }
        setVisible(false);
    }
    return (react_1.default.createElement("p", { ref: targetRef, className: 'kt-tooltip-wrapper', onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
        children,
        visible && (react_1.default.createElement("span", { ref: tooltipRef, className: (0, classnames_1.default)('kt-tooltip-content') },
            title,
            react_1.default.createElement("span", { ref: arrowRef, className: 'kt-tooltip-arrow-placeholder' })))));
};
exports.Tooltip = Tooltip;
//# sourceMappingURL=index.js.map