import { j as jsxRuntimeExports } from '../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
import { Button } from '../../button/button.js';
import { DropdownMenu } from '../../dropdown-menu/dropdown-menu.js';
import { FilterChip } from '../../filter-chip/filter-chip.js';
import { Flex } from '../../flex/flex.js';
import { IconButton } from '../../icon-button/icon-button.js';
import { ReactComponent as SvgFilter } from '../../../icons/assets/filter.svg.js';
import { useDataTable } from '../hooks/useDataTable.js';
import { FilterType } from '../../../types/filters.js';
import { useFilters } from '../hooks/useFilters.js';

function AddFilter({ columnList = [], appliedFiltersSet, onAddFilter, }) {
    const availableFilters = columnList?.filter((col) => !appliedFiltersSet.has(col.id));
    return availableFilters.length > 0 ? (jsxRuntimeExports.jsxs(DropdownMenu, { children: [jsxRuntimeExports.jsx(DropdownMenu.Trigger, { asChild: true, children: appliedFiltersSet.size > 0 ? (jsxRuntimeExports.jsx(IconButton, { size: 4, children: jsxRuntimeExports.jsx(SvgFilter, {}) })) : (jsxRuntimeExports.jsx(Button, { variant: "text", size: "small", leadingIcon: jsxRuntimeExports.jsx(SvgFilter, {}), children: "Filter" })) }), jsxRuntimeExports.jsx(DropdownMenu.Content, { align: "start", children: availableFilters?.map((column) => {
                    const columnDef = column.columnDef;
                    const id = columnDef.accessorKey || column.id;
                    return (jsxRuntimeExports.jsx(DropdownMenu.Item, { onSelect: () => onAddFilter(column), children: columnDef.header || id }, id));
                }) })] })) : null;
}
function Filters() {
    const { table, tableQuery } = useDataTable();
    const columns = table?.getAllColumns();
    const { onAddFilter, handleRemoveFilter, handleFilterValueChange, handleFilterOperationChange, } = useFilters();
    const columnList = columns?.filter((column) => column.columnDef.enableColumnFilter);
    const appliedFiltersSet = new Set(tableQuery?.filters?.map((filter) => filter.name));
    const appliedFilters = tableQuery?.filters?.map((filter) => {
        const columnDef = columns?.find((col) => {
            const columnDef = col.columnDef;
            const id = columnDef.accessorKey || col.id;
            return id === filter.name;
        })?.columnDef;
        return {
            filterType: columnDef?.filterType || FilterType.string,
            label: columnDef?.header || "",
            options: columnDef?.filterOptions || [],
            ...filter,
        };
    }) || [];
    return (jsxRuntimeExports.jsxs(Flex, { gap: 3, children: [jsxRuntimeExports.jsx(Flex, { gap: 3, children: appliedFilters.map((filter) => (jsxRuntimeExports.jsx(FilterChip, { label: filter.label, value: filter.value, onRemove: () => handleRemoveFilter(filter.name), onValueChange: (value) => handleFilterValueChange(filter.name, value), onOperationChange: (operator) => handleFilterOperationChange(filter.name, operator), columnType: filter.filterType, options: filter.options }, filter.name))) }), jsxRuntimeExports.jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter })] }));
}

export { Filters };
//# sourceMappingURL=filters.js.map
