import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useMemo } from "react";
import { cn } from "@utils";
import { ADPIcon, iconList } from "../adpIcon/adpIcon";
import { Badge } from "../badge/badge";
import { Button } from "../button/button";
import { dataTableSelectedFilterVariants, dataTableSelectedFilterContainerVariants } from "./dataTableVariants";
import {} from "../adpIcon/svgObjects";
export const SelectedFilterList = ({ advancedFilters, selectedFilters, basicFilters, handleRemoveFilter, handleClearAllSelectedFilters }) => {
    var _a;
    const icons = useMemo(() => {
        const iconMap = {};
        Object.keys(selectedFilters).forEach((key) => {
            var _a, _b;
            const icon = ((_a = advancedFilters === null || advancedFilters === void 0 ? void 0 : advancedFilters.find((el) => (el === null || el === void 0 ? void 0 : el.id) === key)) === null || _a === void 0 ? void 0 : _a.icon) ||
                ((_b = basicFilters === null || basicFilters === void 0 ? void 0 : basicFilters.find((el) => (el === null || el === void 0 ? void 0 : el.id) === key)) === null || _b === void 0 ? void 0 : _b.icon);
            iconMap[key] = icon;
        });
        return iconMap;
    }, [advancedFilters, basicFilters, selectedFilters]);
    if (Object.keys(selectedFilters).length === 0) {
        return null;
    }
    return (_jsxs("div", { className: cn(dataTableSelectedFilterContainerVariants()), children: [Object.keys(selectedFilters).map((key) => {
                var _a, _b;
                const value = selectedFilters[key];
                const icon = icons[key];
                const filterName = ((_a = advancedFilters === null || advancedFilters === void 0 ? void 0 : advancedFilters.find((el) => (el === null || el === void 0 ? void 0 : el.id) === key)) === null || _a === void 0 ? void 0 : _a.title) ||
                    ((_b = basicFilters === null || basicFilters === void 0 ? void 0 : basicFilters.find((el) => (el === null || el === void 0 ? void 0 : el.id) === key)) === null || _b === void 0 ? void 0 : _b.title);
                if (Array.isArray(value)) {
                    return value.map((item, index) => (_jsx("div", { children: _jsx(Badge, { size: "sm", color: "secondary", variant: "outline", prefixIcon: icon ? _jsx(ADPIcon, { size: "xxs", icon: icon }) : undefined, label: item.label, suffixIcon: _jsx(ADPIcon, { icon: iconList.cross, size: "xs", onClick: () => handleRemoveFilter(key, index) }), className: cn(dataTableSelectedFilterVariants()), title: `${filterName}: ${item.label}` }, index) }, `${key}-${index}`)));
                }
                else if (typeof value === "object") {
                    return (_jsx("div", { children: _jsx(Badge, { size: "sm", color: "secondary", variant: "outline", prefixIcon: icon ? _jsx(ADPIcon, { icon: icon, size: "xxs" }) : undefined, label: value.label, suffixIcon: _jsx(ADPIcon, { icon: iconList.cross, size: "xs", onClick: () => handleRemoveFilter(key, 0) }), className: cn(dataTableSelectedFilterVariants()), title: `${filterName}: ${value.label}` }) }, key));
                }
                return null;
            }), ((_a = Object.keys(selectedFilters)) === null || _a === void 0 ? void 0 : _a.length) > 0 && (_jsx(Button, { onClick: handleClearAllSelectedFilters, variant: "text", size: "xs", className: "font-medium", children: "Clear all" }))] }));
};
export default SelectedFilterList;
//# sourceMappingURL=selectedFilterList.js.map