import { __assign, __read, __rest } from "tslib";
import React, { useState, useRef, useEffect, useMemo } from "react";
import { CSSTransition } from "react-transition-group";
import { useOnClickOutside } from "../../../hooks/useOnClickOutside";
import { DEFAULT_RECT_ELEMENT, calculateRectElement, getDirection } from "../../helpers";
import { DropdownListStyled } from "./styles";
var TIMEOUT_TRANSITION = 100;
var DropdownPortal = function (_a) {
    var direction = _a.direction, anchorRect = _a.anchorRect, onClickOutsideClose = _a.onClickOutsideClose, anchorRef = _a.anchorRef, props = __rest(_a, ["direction", "anchorRect", "onClickOutsideClose", "anchorRef"]);
    var _b = __read(useState(DEFAULT_RECT_ELEMENT), 2), dropdownRect = _b[0], setDropdownRect = _b[1];
    var maxHeight = useMemo(function () {
        return document.documentElement.scrollHeight -
            anchorRect.height -
            anchorRect.y -
            8;
    }, [anchorRect]);
    var dropdownRef = useRef(null);
    useEffect(function () {
        setDropdownRect(calculateRectElement(dropdownRef.current));
    }, []);
    useOnClickOutside([dropdownRef, anchorRef], onClickOutsideClose);
    var portalDirection = useMemo(function () { return getDirection({ anchorRect: anchorRect, direction: direction, dropdownRect: dropdownRect, offset: 8 }); }, [dropdownRect, direction]);
    return (React.createElement(CSSTransition, { in: dropdownRect.width !== 0, timeout: TIMEOUT_TRANSITION, classNames: "dropdown-transition" },
        React.createElement(DropdownListStyled, __assign({ height: props.height, maxHeight: maxHeight, anchorRect: anchorRect, dropdownRect: dropdownRect, ref: dropdownRef, direction: portalDirection }, props))));
};
DropdownPortal.displayName = "DropdownPortal";
export default DropdownPortal;
