import { __read } from "tslib";
import React, { useEffect, useRef, useState } from "react";
import { CSSTransition } from "react-transition-group";
import { MARGIN, PopoverContentWrapper } from "../../styles";
import P2 from "../../../typography/P2";
import H from "../../../typography/H";
import { getComputedDirection, calculateSizeAnPositionElement, DEFAULT_SIZE_AND_POSITION_ELEMENT } from "../../../helpers/getPosition/helpers";
import { useReposition } from "../../../hooks/useReposition";
import Button from "../../../Button";
var DEFAULT_DIRECTION = "top";
var TIMEOUT_TRANSITION = 100;
var PopoverContent = function (_a) {
    var title = _a.title, description = _a.description, direction = _a.direction, anchorSizeAndPosition = _a.anchorSizeAndPosition, onPrimaryButton = _a.onPrimaryButton, onSecondaryButton = _a.onSecondaryButton, handleClose = _a.handleClose, primaryButtonContent = _a.primaryButtonContent, secondaryButtonContent = _a.secondaryButtonContent, isPrimaryButton = _a.isPrimaryButton, isSecondaryButton = _a.isSecondaryButton, 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]);
    var handlePrimaryClick = function (event) {
        onPrimaryButton === null || onPrimaryButton === void 0 ? void 0 : onPrimaryButton(event);
        handleClose === null || handleClose === void 0 ? void 0 : handleClose();
    };
    var handleSecondaryClick = function (event) {
        onSecondaryButton === null || onSecondaryButton === void 0 ? void 0 : onSecondaryButton(event);
        handleClose === null || handleClose === void 0 ? void 0 : handleClose();
    };
    useEffect(function () {
        setDirection(direction || DEFAULT_DIRECTION);
    }, [direction]);
    useReposition(callComputedDirection);
    return (React.createElement(CSSTransition, { in: textContentSize.width !== 0, timeout: TIMEOUT_TRANSITION, classNames: "Popover-content" },
        React.createElement(PopoverContentWrapper, { onMouseDown: function (e) { return e.preventDefault(); }, className: className, ref: textContentRef, direction: _direction, componentSizeAndPosition: anchorSizeAndPosition, textContentSize: textContentSize },
            React.createElement("div", { className: "popoverHeader" },
                title && React.createElement(H, { type: "capricornus" }, title),
                description && React.createElement(P2, { type: "corvus" }, description)),
            React.createElement("div", { className: "buttonHolder" },
                isSecondaryButton && secondaryButtonContent && (React.createElement(Button, { size: "s", viewType: "ghost", onClick: function (e) { return handleSecondaryClick(e); } }, secondaryButtonContent)),
                isPrimaryButton && primaryButtonContent && (React.createElement(Button, { size: "s", viewType: "link", onClick: function (e) { return handlePrimaryClick(e); } }, primaryButtonContent))))));
};
export default PopoverContent;
