import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import "./style.scss";
import GetSvgIcon from "../GetSvgIcon";
import clsx from "clsx";
const DropdownWithSvg = ({ text = "", iconType = "", children, }) => {
    const [listShow, setListShow] = useState(false);
    const elementRef = useRef(null);
    const buttonRef = useRef(null);
    const toggleListShow = () => {
        setListShow((prevState) => !prevState);
    };
    useEffect(() => {
        function handleClickOutside(event) {
            if (elementRef.current &&
                !elementRef.current.contains(event.target) &&
                buttonRef.current &&
                !buttonRef.current.contains(event.target)) {
                setListShow(false);
            }
        }
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, []);
    const className = clsx({
        "dropdownWithSvg-Left": true,
        "dropdownWithSvg-Left-SvgStyle": iconType !== "linkedinLogo",
    });
    return (_jsxs("button", { ref: buttonRef, type: "button", onClick: toggleListShow, className: "dropdownWithSvg-Button", children: [_jsxs("div", { className: className, children: [iconType && _jsx(GetSvgIcon, { iconType: iconType, iconSize: "16" }), text] }), _jsx(GetSvgIcon, { iconType: !listShow ? "cheveronDown" : "cheveronUp", iconSize: "16" }), listShow && (_jsx("div", { ref: elementRef, className: "dropdownWithSvg-Body", children: children }))] }));
};
export default DropdownWithSvg;
