import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { TextWithSvgButton, Tooltip } from "..";
import "./style.scss";
import clsx from "clsx";
const LabelButton = ({ onClick, value, isIsolated, isDisabled, showComingSoon, dataCy, }) => {
    return (_jsx("li", { children: isDisabled && showComingSoon ? (_jsx(Tooltip, { content: "Coming Soon", children: _jsx("button", { className: clsx({
                    "filterDropDownButton--Generic": true,
                    "filterDropDownButton--Isolated": isIsolated,
                }), onClick: onClick, disabled: isDisabled, children: value }) })) : (_jsx("button", { className: clsx({
                "filterDropDownButton--Generic": true,
                "filterDropDownButton--Isolated": isIsolated,
            }), onClick: onClick, disabled: isDisabled, "data-cy": `${dataCy}-${value.toLowerCase().replace(/\s+/g, "-")}`, children: value })) }));
};
const FilterAndSortDropdown = ({ iconType, usageTypeText, filterDropdownItemList, isolateFilterDropdowns = [], disabledButtons = [], onLabelClick, showHeading = true, showComingSoon = true, dataCy, }) => {
    const [listShow, setListShow] = useState(false);
    const toggleListShow = () => {
        setListShow((prevState) => !prevState);
    };
    return (_jsx("div", { className: "filterButtondropdown--container", children: _jsxs("span", { className: "filterButtondropdown--dropdown", children: [_jsx("span", { className: "filterAndSortDropdown-Button", children: _jsx(TextWithSvgButton, { text: usageTypeText, colorVariant: "gray", onClick: toggleListShow, sizeVariant: "sm", iconType: iconType, "data-cy": dataCy }) }), _jsxs("ul", { className: `filterButtondropdown--dropdown-list-${listShow ? "show" : "hide"}`, children: [showHeading && (_jsx("span", { className: "filter-span-dropdown", children: usageTypeText })), filterDropdownItemList.map((item, index) => {
                            const onClick = () => {
                                setListShow(false);
                                onLabelClick(item);
                            };
                            return (_jsx(LabelButton, { onClick: onClick, value: item, isIsolated: isolateFilterDropdowns.includes(item), isDisabled: disabledButtons.includes(item), showComingSoon: showComingSoon, dataCy: dataCy }, index));
                        })] })] }) }));
};
export default FilterAndSortDropdown;
