import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import { GetSvgIcon, NumberInputField, SecondaryButton, Tooltip } from "..";
import "./style.scss";
import clsx from "clsx";
import SearchCheckboxComponent from "../SearchCheckboxComponent";
const SelectionDropDown = ({ onApplyClick, selectedCount, showCancel, onCancelClick, totalCount, isAllSelected, isDisabled, tooltipContent, }) => {
    const [listShow, setListShow] = useState(false);
    const [topRange, setTopRange] = useState(selectedCount);
    const dropdownRef = useRef(null);
    const selectContainerRef = useRef(null);
    const toggleListShow = () => {
        if (isDisabled)
            return;
        setListShow((prev) => !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)) {
                setListShow(false);
            }
        }
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, []);
    const handleSelectAllClick = () => {
        onApplyClick(totalCount);
        toggleListShow();
    };
    const handleChange = (value) => {
        if (value >= 0 && value <= totalCount) {
            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 selectDropDown--redo-container", children: _jsxs("span", { className: "selectDropDown--dropdown selectDropDown--redo", children: [_jsxs("button", { onClick: toggleListShow, disabled: isDisabled, className: "selectDropDown--btn--dropdown selectDropDown--redo-trigger", 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, " selected"] }), _jsx("span", { children: listShow ? (_jsx(GetSvgIcon, { iconType: "arrowUp", iconSize: "16" })) : (_jsx(GetSvgIcon, { iconType: "arrowDown", iconSize: "16" })) })] }), _jsx("div", { className: "selectDropDown--redo-content", ref: dropdownRef, children: _jsxs("ul", { className: dropDownListClassName, children: [_jsx("li", { onClick: handleSelectAllClick, children: "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" } } })) })] }), _jsx("span", { className: "apply applyRedo", children: _jsx(SecondaryButton, { text: "Apply", colorVariant: "orange", className: "sec", onClick: handleApply, isDisabled: topRange < 0 }) }), showCancel && (_jsx("span", { className: "cancel cancelRedo", children: _jsx(SecondaryButton, { colorVariant: "lightGray", text: "Clear Selection", onClick: handleCancel }) }))] }) })] }) }) }));
};
export default SelectionDropDown;
