"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import "./style.scss";
import { clsx } from "../../../utils";
import GetSvgIcon from "../../GetSvgIcon";
function DropDownButton({ dropDownText, children, maxWidth = "100px", width = "100px", disabled = false, dataCy, whiteListedRef, isOpen = false, handleOpen, customRootElem, }) {
    const [listShow, setListShow] = useState(isOpen);
    const dropContainerRef = useRef(null);
    const dropdownRef = useRef(null);
    const [dropdownPosition, setDropdownPosition] = useState({
        top: 0,
        left: 0,
        width: 0,
        isVisible: false,
    });
    const background = clsx({
        "dropDownButton--KebabContainer": true,
    });
    const buttonClassName = clsx({
        "dropDownButton--Generic": true,
    });
    const calculateDropdownPosition = () => {
        if (!dropContainerRef.current)
            return;
        const rect = dropContainerRef.current.getBoundingClientRect();
        const dropdownRefRect = dropdownRef.current?.getBoundingClientRect();
        const offset = 10;
        const windowHeight = window.innerHeight;
        const dropdownHeight = dropdownRefRect?.height || 0;
        const wouldOverflowBottom = rect.top + rect.height + dropdownHeight + offset > windowHeight;
        const position = {
            top: wouldOverflowBottom
                ? rect.top - dropdownHeight - offset
                : rect.top + rect.height + offset,
            left: rect.left,
            width: rect.width,
        };
        setDropdownPosition({ ...position, isVisible: dropdownHeight > 0 });
    };
    const toggleListShow = () => {
        setListShow((prevState) => !prevState);
        calculateDropdownPosition();
        handleOpen?.(!listShow);
    };
    function handleClickOutside(e) {
        if (!dropdownRef?.current?.contains(e.target) &&
            !Array.from(whiteListedRef?.current?.querySelectorAll("*") || []).some((child) => child.contains(e.target)) &&
            !dropContainerRef?.current?.contains(e.target)) {
            setListShow(false);
        }
    }
    function handleScroll() {
        handleOpen?.(false);
        setListShow(false);
    }
    useEffect(() => {
        document?.addEventListener("mousedown", handleClickOutside);
        document?.addEventListener("wheel", handleScroll);
        return () => {
            document?.removeEventListener("mousedown", handleClickOutside);
            document?.removeEventListener("wheel", handleScroll);
        };
    }, []);
    useEffect(() => {
        if (isOpen !== undefined && isOpen !== listShow) {
            setListShow(isOpen);
        }
    }, [isOpen]);
    useEffect(() => {
        const dropdownRefRect = dropdownRef.current?.getBoundingClientRect();
        const dropdownHeight = dropdownRefRect?.height || 0;
        if (!dropdownPosition.isVisible && !!dropdownHeight) {
            calculateDropdownPosition();
        }
    }, [dropdownPosition]);
    return (_jsxs("div", { className: background, "data-cy": dataCy, children: [_jsxs("button", { type: "button", className: buttonClassName, onClick: toggleListShow, ref: dropContainerRef, disabled: disabled, style: { width, maxWidth }, children: [_jsxs("div", { className: "calendar-icon", children: [_jsx(GetSvgIcon, { iconType: "calendar", iconSize: "16" }), _jsx("span", { style: { textOverflow: "ellipsis", maxWidth }, children: dropDownText })] }), _jsx("div", { className: "rightIcon", children: _jsx(GetSvgIcon, { iconType: listShow ? "cheveronUp" : "cheveronDown", iconSize: "16" }) })] }), createPortal(_jsx("div", { className: `dropDownButton-DropDown ${listShow ? "dropDownButton-DropDown-show" : ""}`, ref: dropdownRef, style: {
                    top: dropdownPosition.top,
                    left: dropdownPosition.left,
                    width: dropdownPosition.width,
                    visibility: dropdownPosition.isVisible ? "unset" : "hidden",
                    maxWidth,
                }, children: children }), customRootElem || document.body)] }));
}
export default DropDownButton;
