import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useEffect } from "react";
import { useSearchParams } from "react-router-dom";
import { Button } from "../form-controls/Button";
import { Dialog } from "./Dialog";
import { Filter } from "../layout/Filter";
import { Collection } from "../layout/Collection";
export const FiltersDialog = ({ filters }) => {
    const [searchParams, setSearchParams] = useSearchParams();
    const [isOpen, setIsOpen] = useState(false);
    const [filterValues, setFilterValues] = useState({});
    // Inicializar filterValues con los valores actuales de la URL
    useEffect(() => {
        const initialValues = {};
        filters.forEach((filter) => {
            const urlValue = searchParams.get(filter.paramName);
            initialValues[filter.paramName] = urlValue || undefined;
        });
        setFilterValues(initialValues);
    }, []); // Solo al montar el componente
    // Sincronizar filterValues cuando se abre el dialog con los valores actuales de la URL
    useEffect(() => {
        if (isOpen) {
            const currentValues = {};
            filters.forEach((filter) => {
                const urlValue = searchParams.get(filter.paramName);
                currentValues[filter.paramName] = urlValue || undefined;
            });
            setFilterValues(currentValues);
        }
    }, [isOpen, filters, searchParams]);
    const handleFilterChange = (paramName, value) => {
        setFilterValues((prev) => ({
            ...prev,
            [paramName]: value,
        }));
    };
    const handleApplyFilters = () => {
        const newSearchParams = new URLSearchParams(searchParams);
        // Aplicar todos los filtros a la URL
        filters.forEach((filter) => {
            const value = filterValues[filter.paramName];
            if (value) {
                newSearchParams.set(filter.paramName, value);
            }
            else {
                newSearchParams.delete(filter.paramName);
            }
        });
        setSearchParams(newSearchParams, { replace: true });
        setIsOpen(false);
    };
    const handleClose = () => {
        setIsOpen(false);
    };
    const handleOpen = () => {
        setIsOpen(true);
    };
    // Construir las props de Filter para cada filtro
    const getFilterProps = (filterConfig) => {
        const baseProps = {
            label: filterConfig.label,
            staticOptions: filterConfig.staticOptions,
            inputWidth: filterConfig.inputWidth,
            value: filterValues[filterConfig.paramName],
            onChange: (value) => handleFilterChange(filterConfig.paramName, value),
        };
        switch (filterConfig.filterType) {
            case "text":
                return {
                    ...baseProps,
                    filterType: "text",
                };
            case "number":
                return {
                    ...baseProps,
                    filterType: "number",
                    min: filterConfig.min,
                    max: filterConfig.max,
                };
            case "date":
                return {
                    ...baseProps,
                    filterType: "date",
                };
            case "autocomplete":
                return {
                    ...baseProps,
                    filterType: "autocomplete",
                    options: filterConfig.options || [],
                    getOptionLabel: filterConfig.getOptionLabel,
                    getOptionValue: filterConfig.getOptionValue,
                    renderOption: filterConfig.renderOption,
                    noResultsText: filterConfig.noResultsText,
                };
            default:
                return {
                    ...baseProps,
                    filterType: "text",
                };
        }
    };
    return (_jsxs(_Fragment, { children: [_jsx(Button, { icon: "fa-filter", variant: "outline", size: "sm", onClick: handleOpen, "aria-label": "Abrir filtros", children: "Filtrar" }), _jsx(Dialog, { isOpen: isOpen, title: "Filtros", footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: handleClose, children: "Cerrar" }), _jsx(Button, { variant: "primary", onClick: handleApplyFilters, children: "Aplicar filtros" })] }), onClose: handleClose, closeOnOverlayClick: false, children: _jsx("div", { className: "space-y-4", children: _jsx(Collection, { direction: "column", gap: "1rem", children: filters.map((filter) => (_jsx(Filter, { ...getFilterProps(filter) }, filter.paramName))) }) }) })] }));
};
