import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import GetSvgIcon from "../GetSvgIcon";
import "./style.scss";
import { v4 as uuidv4 } from "uuid";
import clsx from "clsx";
import { Loader } from "..";
const ChatDropDown = ({ value = "", isCreateShown = true, zIndex = 100, placeholder = "Search options", showSearchIcon = true, filteredOptions = [], isLoading = false, isReadOnly = false, showNoResults = false, dataCyInput, dataCySuggestion, dataCyCreate, onFocus, onBlur, handleCreateClick = (value) => {
    console.log({ value });
}, handleOptionClick = (value) => {
    console.log({ value });
}, handleInputChange = () => { }, renderProps = (props) => _jsx("li", { children: props.label }), }) => {
    const [showOptions, setShowOptions] = 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)) {
                setShowOptions(false);
            }
        }
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, []);
    const handleChange = (e) => {
        if (e.target.value === "") {
            setShowOptions(false);
        }
        else {
            setShowOptions(true);
        }
        handleInputChange(e);
    };
    const getWidthControl = (searchIconShown, loading) => {
        if (searchIconShown) {
            if (!loading) {
                return "inputField--LogoNotLoading";
            }
            return "inputField--LogoLoading";
        }
        if (!loading) {
            return "inputField--NotLoading";
        }
        return "inputField--Loading";
    };
    const getWidthControlParent = (searchIconShown, loading) => {
        if (searchIconShown) {
            if (!loading) {
                return "input-chatDropdownLogo";
            }
            return "input-chatDropdownLogoLoading";
        }
        if (!loading) {
            return "input-chatDropdown";
        }
        return "input-chatDropdownLoading";
    };
    return (_jsxs("div", { className: "dropdown", children: [_jsxs("div", { ref: dropContainerRef, className: clsx({
                    "input-chatDropdown": true,
                    [getWidthControlParent(showSearchIcon, isLoading)]: true,
                }), children: [showSearchIcon && _jsx(GetSvgIcon, { iconType: "search", iconSize: "24" }), _jsx("input", { type: "text", placeholder: placeholder, onChange: handleChange, onClick: () => setShowOptions(!!value), readOnly: isReadOnly, value: value, className: clsx({
                            "inputField--Generic": true,
                            [getWidthControl(showSearchIcon, isLoading)]: true,
                        }), onFocus: onFocus, onBlur: onBlur, "data-cy": dataCyInput }), isLoading && _jsx(Loader, { height: "20", width: "20" })] }), (filteredOptions.length > 0 || isCreateShown || showNoResults) &&
                showOptions && (_jsx("div", { ref: dropdownRef, children: _jsxs("ul", { className: "options-list", style: { zIndex }, children: [showNoResults && _jsx("p", { className: "noResults", children: "No Results Found" }), isCreateShown && (_jsx(_Fragment, { children: _jsx("li", { "data-cy": dataCyCreate, className: "create-section", onClick: (e) => {
                                    e.stopPropagation();
                                    setShowOptions(false);
                                    handleCreateClick(value);
                                }, children: `Create ${value}` }) })), filteredOptions.map((props) => (_jsx("div", { onClick: (e) => {
                                e.stopPropagation();
                                setShowOptions(false);
                                handleOptionClick(props);
                            }, "data-cy": dataCySuggestion, children: renderProps(props) }, uuidv4())))] }) }))] }));
};
export default ChatDropDown;
