"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { useMemo } from 'react';
import { ReactComponent as SvgFilter } from '../../../icons/assets/filter.svg.js';
import { FilterType } from '../../../types/filters.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 { useDataTable } from '../hooks/useDataTable.js';
import { useFilters } from '../hooks/useFilters.js';

function AddFilter({ columnList = [], appliedFiltersSet, onAddFilter, children }) {
    const availableFilters = columnList?.filter(col => !appliedFiltersSet.has(col.id));
    const trigger = useMemo(() => {
        if (typeof children === 'function')
            return children({ availableFilters, appliedFilters: appliedFiltersSet });
        else if (children)
            return children;
        else if (appliedFiltersSet.size > 0)
            return (jsx(IconButton, { size: 4, children: jsx(SvgFilter, {}) }));
        else
            return (jsx(Button, { variant: 'text', size: 'small', leadingIcon: jsx(SvgFilter, {}), color: 'neutral', children: "Filter" }));
    }, [children, appliedFiltersSet, availableFilters]);
    return availableFilters.length > 0 ? (jsxs(DropdownMenu, { children: [jsx(DropdownMenu.Trigger, { asChild: true, children: trigger }), jsx(DropdownMenu.Content, { children: availableFilters?.map(column => {
                    const columnDef = column.columnDef;
                    const id = columnDef.accessorKey || column.id;
                    return (jsx(DropdownMenu.Item, { onClick: () => onAddFilter(column), children: columnDef.header || id }, id));
                }) })] })) : null;
}
function Filters({ classNames, className, trigger }) {
    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 (jsxs(Flex, { gap: 3, className: className, children: [jsx(Flex, { gap: 3, className: classNames?.container, children: appliedFilters.map(filter => (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, className: classNames?.filterChips }, filter.name))) }), jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter, children: trigger })] }));
}

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