import { __assign, __read, __rest } from "tslib";
import React, { useState, cloneElement, useEffect, useRef, useLayoutEffect } from "react";
import { createPortal } from "react-dom";
import { Transition } from "react-transition-group";
import { DropdownWrapper } from "./styles";
import DropdownPortal from "./components/DropdownPortal";
import { calculateRectElement, DEFAULT_RECT_ELEMENT } from "./helpers";
var Dropdown = function (_a) {
    var children = _a.children, _b = _a.direction, direction = _b === void 0 ? "bottom" : _b, onItemClick = _a.onItemClick, onClickClose = _a.onClickClose, onClickOutside = _a.onClickOutside, isOpen = _a.isOpen, props = __rest(_a, ["children", "direction", "onItemClick", "onClickClose", "onClickOutside", "isOpen"]);
    var _c = __read(useState(isOpen || false), 2), _isOpen = _c[0], setIsOpen = _c[1];
    var _d = __read(useState(null), 2), containerDropdown = _d[0], setContainerDropdown = _d[1];
    var anchorRef = useRef(null);
    var _e = __read(useState(DEFAULT_RECT_ELEMENT), 2), anchorRect = _e[0], setAnchorRect = _e[1];
    var handleClickOutsideClose = function () {
        setIsOpen(false);
        if (_isOpen) {
            onClickOutside === null || onClickOutside === void 0 ? void 0 : onClickOutside();
            onClickClose === null || onClickClose === void 0 ? void 0 : onClickClose();
        }
    };
    var calculateAnchorRect = function () {
        setAnchorRect(calculateRectElement(anchorRef.current));
    };
    useLayoutEffect(function () {
        calculateAnchorRect();
    }, [_isOpen]);
    useEffect(function () {
        window.addEventListener("resize", calculateAnchorRect);
        return function () { return window.removeEventListener("resize", calculateAnchorRect); };
    }, []);
    useEffect(function () {
        var container = document.getElementsByTagName("body").item(0);
        setContainerDropdown(container);
    }, []);
    useEffect(function () {
        if (typeof isOpen !== "undefined") {
            setIsOpen(isOpen);
        }
    }, [isOpen]);
    var handleClick = function () {
        setIsOpen(function (prevState) { return !prevState; });
        if (_isOpen) {
            onClickClose === null || onClickClose === void 0 ? void 0 : onClickClose();
        }
    };
    return (React.createElement(DropdownWrapper, { ref: anchorRef },
        cloneElement(children, {
            onClick: function () {
                var _a, _b;
                handleClick();
                (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
            }
        }),
        _isOpen &&
            containerDropdown &&
            createPortal(React.createElement(Transition, { in: _isOpen, unmountOnExit: true, timeout: 500 },
                React.createElement(DropdownPortal, __assign({}, props, { direction: direction, anchorRect: anchorRect, onItemClick: onItemClick, anchorRef: anchorRef, onClickOutsideClose: handleClickOutsideClose }))), containerDropdown)));
};
Dropdown.displayName = "Dropdown";
export default Dropdown;
