"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var ig_utilities_1 = require("@intelligentgraphics/ig.utilities");
var Resize_1 = require("./Resize");
var calculatePosition = function (targetRect, tooltipRect, _a) {
    var horizontalAlign = _a.horizontalAlign, horizontalSpacing = _a.horizontalSpacing, verticalAlign = _a.verticalAlign, verticalSpacing = _a.verticalSpacing;
    var left;
    var top;
    switch (horizontalAlign) {
        case "Left":
            left =
                targetRect.left -
                    tooltipRect.width +
                    targetRect.width / 2 -
                    horizontalSpacing +
                    2.5;
            break;
        case "Right":
            left = targetRect.left + targetRect.width + horizontalSpacing;
            break;
        case "Middle":
        default:
            left =
                targetRect.left + targetRect.width / 2 - tooltipRect.width / 2;
            break;
    }
    switch (verticalAlign) {
        case "Top":
            top = targetRect.top - tooltipRect.height - verticalSpacing;
            break;
        case "Center":
            top =
                targetRect.top + targetRect.height / 2 - tooltipRect.height / 2;
            break;
        default:
        case "Bottom":
            top = targetRect.top + targetRect.height + verticalSpacing;
            break;
    }
    return {
        left: left,
        top: top,
    };
};
var Tooltip = function (props) {
    var targetRef = React.useRef(null);
    var tooltipRef = React.useRef(null);
    var targetBounds = Resize_1.useElementBounds(targetRef);
    var tooltipBounds = Resize_1.useElementBounds(tooltipRef);
    var _a = tslib_1.__read(React.useState(false), 2), visible = _a[0], setVisible = _a[1];
    var _b = tslib_1.__read(React.useState({ left: 0, top: 0 }), 2), position = _b[0], setPosition = _b[1];
    React.useEffect(function () {
        if (!props.visible) {
            if (props.hideDelay !== undefined) {
                var timeout_1 = setTimeout(function () { return setVisible(false); }, props.hideDelay);
                return function () { return clearTimeout(timeout_1); };
            }
            return setVisible(false);
        }
        if (ig_utilities_1.isNullOrUndefined(targetBounds) ||
            ig_utilities_1.isNullOrUndefined(tooltipBounds)) {
            return;
        }
        var positionCalculator = props.calculatePosition === undefined
            ? calculatePosition
            : props.calculatePosition;
        var newPosition = positionCalculator(targetBounds, tooltipBounds, {
            horizontalAlign: ig_utilities_1.valueOrDefault(props.horizontalAlign, "Middle"),
            verticalAlign: ig_utilities_1.valueOrDefault(props.verticalAlign, "Bottom"),
            verticalSpacing: ig_utilities_1.valueOrDefault(props.verticalSpacing, 10),
            horizontalSpacing: ig_utilities_1.valueOrDefault(props.horizontalSpacing, 0),
        });
        setPosition(newPosition);
        if (props.showDelay !== undefined) {
            var timeout_2 = setTimeout(function () { return setVisible(true); }, props.showDelay);
            return function () { return clearTimeout(timeout_2); };
        }
        setVisible(true);
    }, [props.visible, targetBounds, tooltipBounds]);
    return (React.createElement(React.Fragment, null,
        props.renderTooltip(tslib_1.__assign({ visible: visible, htmlRef: tooltipRef }, position)),
        props.children({
            htmlRef: targetRef,
        })));
};
Tooltip.displayName = "Tooltip";
exports.default = Tooltip;
