import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import "./style.scss";
import GetSvgIcon from "../GetSvgIcon";
const Dropdown = ({ dropdownOnClickHandler }) => {
    const [listShow, setListShow] = useState(false);
    const [selected, setSelected] = useState("Personalise");
    const [cheveron, setcheveron] = useState(false);
    const elementRef = useRef(null);
    const toggleListShow = () => {
        setListShow((prevState) => !prevState);
    };
    const cheveronHandle = () => {
        toggleListShow();
        setcheveron(!cheveron);
    };
    // Add an event listener to the document to detect clicks outside the element
    useEffect(() => {
        function handleClickOutside(event) {
            if (elementRef.current &&
                !elementRef.current.contains(event.target)) {
                cheveronHandle();
            }
        }
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, []);
    return (_jsxs("div", { children: [_jsxs("div", { className: "drop-down-dd", children: [selected, _jsx("span", { className: "svg-dd", onClick: cheveronHandle, children: _jsx(GetSvgIcon, { iconType: !cheveron ? "cheveronDown" : "cheveronUp", iconSize: "16" }) })] }), listShow && (_jsxs("div", { ref: elementRef, className: `dropdown-body`, children: [_jsx("span", { onClick: () => {
                            setSelected("Personalise");
                            cheveronHandle();
                            dropdownOnClickHandler("Personalise");
                        }, children: "Personlise" }), _jsx("span", { onClick: () => {
                            setSelected("Templates");
                            cheveronHandle();
                            dropdownOnClickHandler("Templates");
                        }, children: "Templates" })] }))] }));
};
export default Dropdown;
