import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import "./style.scss";
import { GetSvgIcon } from "..";
import clsx from "clsx";
const DropDownButton = ({ dropDownText, children, dropdownRight = false, maxWidth = "100px", textEllipses = "ellipsis", disabled = false, iconType = "cheveronDown", showIcon = false, colorStyling = "gray", dataCy, }) => {
    const [listShow, setListShow] = useState(false);
    const dropContainerRef = useRef(null);
    const dropdownRef = useRef(null);
    const background = clsx({
        "dropDownButton--KebabContainer": true,
        "dropDownButton-DropDownLeft": !dropdownRight,
        "dropDownButton-DropDownRight": dropdownRight,
    });
    const buttonClassName = clsx({
        "dropDownButton--Generic": true,
        [`${colorStyling}--DropDownButton`]: true,
    });
    const toggleListShow = () => {
        setListShow((prevState) => !prevState);
    };
    useEffect(() => {
        function handleClickOutside(e) {
            if (!dropdownRef?.current?.contains(e.target) &&
                !dropContainerRef?.current?.contains(e.target)) {
                setListShow(false);
            }
        }
        document?.addEventListener("mousedown", handleClickOutside);
        return () => {
            document?.removeEventListener("mousedown", handleClickOutside);
        };
    }, []);
    return (_jsxs("div", { className: background, "data-cy": dataCy, children: [_jsxs("button", { type: "button", className: buttonClassName, onClick: toggleListShow, ref: dropContainerRef, disabled: disabled, children: [showIcon && (_jsx("div", { className: "leftIcon", children: _jsx(GetSvgIcon, { iconType: iconType, iconSize: "16" }) })), _jsx("span", { style: { textOverflow: textEllipses, maxWidth: maxWidth }, children: dropDownText }), _jsx("div", { className: "rightIcon", children: _jsx(GetSvgIcon, { iconType: listShow ? "cheveronUp" : "cheveronDown", iconSize: "16" }) })] }), listShow && (_jsx("div", { className: "dropDownButton-DropDown", onClick: toggleListShow, ref: dropdownRef, children: children }))] }));
};
export default DropDownButton;
