import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useEffect, useMemo, useState } from "react";
import clsx from "clsx";
import { ADPIcon, iconList } from "../adpIcon/adpIcon";
import { Button } from "../button/button";
import { Checkbox } from "../checkbox/checkbox";
import { Radio } from "../radio/radio";
import { Panel } from "../panel/panel";
import { Accordion } from "../accordion/accordion";
import { dataTableAdvancedFilterButtonVariants } from "./dataTableVariants";
export const AdvancedFilters = ({ advancedFilters, basicFilters, selectedFilters, setSelectedFilters, handleClearFilter }) => {
    const [selectedAdvancedFilters, setSelectedAdvancedFilters] = useState(selectedFilters);
    const [showPanel, setShowPanel] = useState(false);
    // For handling advance filter-
    const handleAdvanceFilterChange = (e, id) => {
        var _a, _b;
        if (e.target.type === "checkbox") {
            const newFilterValue = { value: e.target.value, label: e.target.name };
            setSelectedAdvancedFilters((prev) => {
                const updatedVal = Object.assign({}, prev);
                const currentSelectedValues = updatedVal[id] || [];
                if (e.target.checked) {
                    updatedVal[id] = [...currentSelectedValues, newFilterValue];
                }
                else {
                    updatedVal[id] = currentSelectedValues.filter((item) => item.label !== e.target.name);
                    if (updatedVal[id].length === 0) {
                        delete updatedVal[id];
                    }
                }
                return updatedVal;
            });
        }
        else if (e.target.type === "radio") {
            setSelectedAdvancedFilters((prev) => (Object.assign(Object.assign({}, prev), { [id]: { value: e.target.value, label: e.target.name } })));
        }
        (_b = (_a = advancedFilters === null || advancedFilters === void 0 ? void 0 : advancedFilters.find((el) => el.id === id)) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a);
    };
    const customSelectedFilter = useMemo(() => {
        return advancedFilters === null || advancedFilters === void 0 ? void 0 : advancedFilters.filter((filter) => "selectedValue" in filter);
    }, [advancedFilters]);
    const handleApplyFilter = () => {
        let updatedFilters = Object.assign(Object.assign({}, selectedFilters), selectedAdvancedFilters);
        advancedFilters === null || advancedFilters === void 0 ? void 0 : advancedFilters.forEach((filter) => {
            if (filter === null || filter === void 0 ? void 0 : filter.selectedValue) {
                updatedFilters = Object.assign(Object.assign({}, updatedFilters), filter.selectedValue);
            }
        });
        setSelectedFilters(updatedFilters);
        setShowPanel(false);
    };
    const basicFilterIds = basicFilters === null || basicFilters === void 0 ? void 0 : basicFilters.map((filter) => filter.id);
    const advanceFilterSelectedLength = useMemo(() => {
        return Object.keys(selectedAdvancedFilters).filter((key) => !(basicFilterIds === null || basicFilterIds === void 0 ? void 0 : basicFilterIds.includes(key))).length;
    }, [basicFilterIds, selectedAdvancedFilters]);
    useEffect(() => {
        setSelectedAdvancedFilters(selectedFilters);
    }, [selectedFilters]);
    useEffect(() => {
        let updatedFilters = Object.assign({}, selectedAdvancedFilters);
        customSelectedFilter === null || customSelectedFilter === void 0 ? void 0 : customSelectedFilter.forEach((filter) => {
            if (filter === null || filter === void 0 ? void 0 : filter.selectedValue) {
                updatedFilters = Object.assign(Object.assign({}, updatedFilters), filter.selectedValue);
            }
            else {
                Object.keys(updatedFilters).forEach((key) => {
                    if (key === filter.id) {
                        delete updatedFilters[key];
                    }
                });
            }
        });
        setSelectedAdvancedFilters(updatedFilters);
        // Adding selectedAdvancedFilters to the dependency array causes an infinite re-render
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [customSelectedFilter]);
    if (!(advancedFilters === null || advancedFilters === void 0 ? void 0 : advancedFilters.length)) {
        return null;
    }
    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setShowPanel(true), prefixIcon: iconList.filter, size: "xs", variant: "text", color: "primary", "data-testid": "advanced-filter-btn", className: clsx(dataTableAdvancedFilterButtonVariants(), "min-w-fit"), children: "Advanced Filters" }), _jsxs(Panel, { showPanel: showPanel, className: "table-filter", "data-testid": "table-filter-panel", children: [_jsx(Panel.Header, { showCloseButton: true, header: "Filters", subHeader: "Apply filters to narrow down your search results", onCloseHandler: () => setShowPanel(false) }), _jsx(Panel.Body, { className: "bg-frostBlue dark:bg-iridium", children: advancedFilters === null || advancedFilters === void 0 ? void 0 : advancedFilters.map((props) => {
                            var _a, _b, _c;
                            const selectedCount = (_a = selectedAdvancedFilters[props.id]) === null || _a === void 0 ? void 0 : _a.length;
                            return _jsxs(Accordion, { className: "mb-6", expand: true, "data-testid": `table-filter-${props.id}`, children: [_jsx(Accordion.Header, { className: "", children: _jsxs("div", { className: "text-left", children: [_jsxs("p", { className: "flex items-center text-sm leading-5 font-semibold text-secondary-500", children: [_jsx(ADPIcon, { icon: props.icon, size: "xs", className: "!inline-block text-gray-800 me-1" }), props.title, " ", ((props.isMulti || props.selectedValue) && (selectedCount !== undefined && selectedCount > 0)) &&
                                                            _jsx("span", { className: "text-success-700 dark:text-success-400 font-medium ms-4", children: `${selectedCount} selected` })] }), _jsx("span", { className: "text-xs leading-[130%] text-secondary-300", children: props.subTitle })] }) }), _jsx(Accordion.Body, { className: clsx({ "!bg-transparent !p-0.5": props.render }), children: _jsx("div", { className: "flex flex-col gap-4", children: props.isMulti && ((_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.length) > 0
                                                ? props.options.map((option) => {
                                                    var _a;
                                                    return (_jsx(Checkbox, { label: option.label, name: option.label, value: option.value, size: "sm", onChange: (e) => handleAdvanceFilterChange(e, props.id), checked: ((_a = selectedAdvancedFilters[props.id]) === null || _a === void 0 ? void 0 : _a.findIndex((item) => item.value === option.value)) > -1 }, option.value));
                                                })
                                                : !props.isMulti && ((_c = props === null || props === void 0 ? void 0 : props.options) === null || _c === void 0 ? void 0 : _c.length) > 0
                                                    ? props.options.map((option) => {
                                                        var _a;
                                                        return (_jsx(Radio, { label: option.label, name: option.label, value: option.value, onChange: (e) => handleAdvanceFilterChange(e, props.id), checked: ((_a = selectedAdvancedFilters[props.id]) === null || _a === void 0 ? void 0 : _a.value) === option.value }, option.value));
                                                    }) : typeof (props === null || props === void 0 ? void 0 : props.render) === "function" ? props === null || props === void 0 ? void 0 : props.render() : props === null || props === void 0 ? void 0 : props.render }) })] }, props.id);
                        }) }), _jsx(Panel.Footer, { className: "min-h-0 py-4", children: _jsxs("div", { className: "flex justify-end gap-4", children: [_jsx(Button, { variant: "outline", color: "secondary", onClick: () => {
                                        handleClearFilter();
                                        setShowPanel(false);
                                    }, children: "Clear Filters" }), _jsxs(Button, { onClick: () => {
                                        handleApplyFilter();
                                        setShowPanel(false);
                                    }, disabled: advanceFilterSelectedLength === 0, children: ["Apply ", advanceFilterSelectedLength !== 0 && advanceFilterSelectedLength, " Filters"] })] }) })] })] }));
};
//# sourceMappingURL=advancedFilters.js.map