import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { createContext, useEffect, useRef, useState, } from "react";
import { GetSvgIcon } from "..";
import "./style.scss";
import clsx from "clsx";
export const SelectContext = createContext({ value: "", onChange: () => { }, setShowMenu: () => { } });
function Select({ value, onChange, children, iconType = "bell", disabled = false, menuPosition = "left", showIconRight = false, showIconLeft = false, iconSizeLeft = "16", iconSizeRight = "16", colorStyling = "gray", maxWidth = "200px", className, containerStyles = {}, renderContent, dataCy, }) {
    // ================================== children validation ================================== //
    React.Children.forEach(children, (child) => {
        if (React.isValidElement(child)) {
            if (child.type === React.Fragment) {
                React.Children.forEach(child.props.children, (nestedChild) => {
                    if (React.isValidElement(nestedChild) &&
                        !nestedChild.type
                            .selectItemComponent) {
                        throw new Error("Select children should be SelectItem from UILibrary");
                    }
                });
            }
            else if (!child.type.selectItemComponent) {
                throw new Error("Select children should be SelectItem from UILibrary");
            }
        }
    });
    // ================================== CLSX ================================== //
    const containerCLSX = clsx({
        "select--Container": true,
        [`select-${colorStyling}`]: !className,
        [`menu-${menuPosition}`]: true,
        ...(className && { [className]: true }),
    });
    const buttonClassName = clsx({
        "select--Button": true,
        [`select--${colorStyling}`]: true,
    });
    const menuStyle = clsx({
        "select-Menu": true,
    });
    const [showMenu, setShowMenu] = useState(false);
    const dropContainerRef = useRef(null);
    const dropdownRef = useRef(null);
    useEffect(() => {
        function handleClickOutside(e) {
            if (dropdownRef.current &&
                !dropdownRef.current.contains(e.target) &&
                dropContainerRef.current &&
                !dropContainerRef.current.contains(e.target)) {
                setShowMenu(false);
            }
        }
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, []);
    const toggleMenuShow = () => {
        setShowMenu((prevState) => !prevState);
    };
    return (_jsxs("div", { style: { ...containerStyles }, className: `${containerCLSX}`, children: [_jsxs("button", { type: "button", className: buttonClassName, onClick: toggleMenuShow, ref: dropContainerRef, disabled: disabled, "data-cy": dataCy, children: [showIconLeft && (_jsx("div", { className: "leftIcon", children: _jsx(GetSvgIcon, { iconType: iconType, iconSize: iconSizeLeft }) })), _jsx("span", { style: {
                            textOverflow: "ellipsis",
                            maxWidth: maxWidth,
                            marginRight: "24px",
                            whiteSpace: "nowrap",
                        }, children: renderContent ? renderContent() : value }), showIconRight && (_jsx("div", { className: "rightIcon", children: _jsx(GetSvgIcon, { iconType: showMenu ? "arrowUp" : "arrowDown", iconSize: iconSizeRight }) }))] }), showMenu && (_jsx("div", { ref: dropdownRef, className: menuStyle, children: _jsx(SelectContext.Provider, { value: { value, onChange, setShowMenu }, children: _jsx("div", { className: "select--MenuList", children: children }) }) }))] }));
}
export default Select;
