import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import { GetSvgIcon, NumberInputField, PrimaryButton, TertiaryButton, Tooltip, } from "..";
import "./style.scss";
import SearchCheckboxComponent from "../SearchCheckboxComponent";
import { v4 as uuidv4 } from "uuid";
import clsx from "clsx";
const SelectDropDown = ({ onApplyClick, selectedCount = 0, showCancel = true, onCancelClick = () => false, totalCount = 10, isAllSelected, isDisabled, tooltipContent, dataCy, hideSelectedText = false, limit, }) => {
    const [listShow, setListShow] = useState(false);
    const [topRange, setTopRange] = useState(selectedCount);
    const dropdownRef = useRef(null);
    const selectContainerRef = useRef(null);
    const localTotalCount = limit || totalCount;
    const toggleListShow = () => {
        if (isDisabled)
            return;
        setListShow((prev) => {
            if (prev && dropdownRef.current) {
                dropdownRef.current.close();
            }
            else if (dropdownRef.current) {
                dropdownRef.current.show();
            }
            return !prev;
        });
    };
    const handleCheckboxClick = () => {
        if (!isDisabled) {
            if (isAllSelected) {
                onCancelClick();
            }
            else {
                toggleListShow();
            }
        }
    };
    useEffect(() => {
        function handleClickOutside(e) {
            if (dropdownRef.current &&
                selectContainerRef.current &&
                !dropdownRef.current.contains(e.target) &&
                !selectContainerRef.current.contains(e.target)) {
                dropdownRef.current.close();
                setListShow(false);
            }
        }
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, []);
    const handleSelectAllClick = () => {
        onApplyClick(localTotalCount);
        toggleListShow();
    };
    const handleChange = (value) => {
        if (value >= 0 && value <= localTotalCount) {
            setTopRange(value);
        }
    };
    const handleCancel = () => {
        setTopRange(0);
        onCancelClick();
        toggleListShow();
    };
    const handleApply = () => {
        onApplyClick(topRange);
        toggleListShow();
    };
    const dropDownListClassName = clsx({
        "selectDropDown--dropdown-list-show": listShow,
        "selectDropDown--dropdown-list-hide": !listShow,
    });
    return (_jsx(Tooltip, { content: tooltipContent, toolTipPosition: "top", isDisabled: !tooltipContent, children: _jsx("div", { className: "selectDropDown--container", "data-cy": dataCy, children: _jsxs("span", { className: "selectDropDown--dropdown", children: [_jsxs("button", { onClick: toggleListShow, disabled: isDisabled, className: "selectDropDown--btn--dropdown", ref: selectContainerRef, children: [_jsx(SearchCheckboxComponent, { sizeVariant: "base", checked: false, onClick: handleCheckboxClick, isAllSelected: isAllSelected, isSubsetSelected: !isAllSelected && selectedCount > 0, isDisabled: isDisabled }), selectedCount > 0 && (_jsxs("p", { children: [selectedCount, " ", !hideSelectedText && "selected"] })), _jsx("span", { children: _jsx(GetSvgIcon, { iconType: "arrowDown", iconSize: "16" }) })] }), _jsx("dialog", { id: uuidv4(), ref: dropdownRef, className: "dropdownContainer", children: _jsxs("ul", { className: dropDownListClassName, children: [_jsx("li", { onClick: handleSelectAllClick, "data-cy": `${dataCy}-select-all`, children: limit ? `Select Top ${limit}` : "Select All" }), _jsxs("li", { children: ["Select Top", _jsx("span", { className: "space", children: listShow && (_jsx(NumberInputField, { initialNumber: String(topRange), handleChange: handleChange, props: { style: { width: "70px", maxWidth: "70px" } }, dataCy: `${dataCy}-input` })) })] }), _jsx("span", { className: "apply", children: _jsx(PrimaryButton, { text: "Apply", colorVariant: "orange", onClick: handleApply, isDisabled: topRange < 0, dataCy: `${dataCy}-apply` }) }), showCancel && (_jsx("span", { className: "cancel", children: _jsx(TertiaryButton, { text: "Clear Selection", onClick: handleCancel, dataCy: `${dataCy}-clear-selection` }) }))] }) })] }) }) }));
};
export default SelectDropDown;
