import { __read } from "tslib";
import React, { useEffect, useRef, useState } from "react";
import { CSSTransition } from "react-transition-group";
import { MARGIN, TooltipContentWrapper, TrailContentStyled } from "../../styles";
import P2 from "../../../typography/P2";
import { getComputedDirection, calculateSizeAnPositionElement, DEFAULT_SIZE_AND_POSITION_ELEMENT } from "../../../helpers/getPosition/helpers";
import { useReposition } from "../../../hooks/useReposition";
var DEFAULT_DIRECTION = "top";
var TIMEOUT_TRANSITION = 100;
var TooltipContent = function (_a) {
    var text = _a.text, direction = _a.direction, anchorSizeAndPosition = _a.anchorSizeAndPosition, isShadow = _a.isShadow, onTrailClick = _a.onTrailClick, trailText = _a.trailText, isTrail = _a.isTrail, className = _a.className;
    var _b = __read(useState(direction || DEFAULT_DIRECTION), 2), _direction = _b[0], setDirection = _b[1];
    var _c = __read(useState(DEFAULT_SIZE_AND_POSITION_ELEMENT), 2), textContentSize = _c[0], setTextContentSize = _c[1];
    var textContentRef = useRef(null);
    useEffect(function () {
        setTextContentSize(calculateSizeAnPositionElement(textContentRef.current));
    }, []);
    var callComputedDirection = function () {
        var computedDirection = getComputedDirection({
            componentSizeAndPosition: anchorSizeAndPosition,
            textContentSize: textContentSize,
            offset: MARGIN,
            direction: direction || DEFAULT_DIRECTION
        });
        setDirection(computedDirection);
    };
    useEffect(function () {
        callComputedDirection();
    }, [textContentSize]);
    useEffect(function () {
        setDirection(direction || DEFAULT_DIRECTION);
    }, [direction]);
    useReposition(callComputedDirection);
    return (React.createElement(CSSTransition, { in: textContentSize.width !== 0, timeout: TIMEOUT_TRANSITION, classNames: "tooltip-content" },
        React.createElement(TooltipContentWrapper, { className: className, ref: textContentRef, isShadow: isShadow, direction: _direction, componentSizeAndPosition: anchorSizeAndPosition, textContentSize: textContentSize },
            React.createElement(P2, { type: "lynx" }, text),
            isTrail && (React.createElement(TrailContentStyled, { type: "cygnus", onClick: onTrailClick }, trailText)))));
};
export default TooltipContent;
