import { j as jsxRuntimeExports } from '../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
import { useState, useEffect } from 'react';
import { Cross1Icon } from '../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
import { Box } from '../box/box.js';
import { Flex } from '../flex/flex.js';
import { Select } from '../select/select.js';
import { Text } from '../text/text.js';
import { TextField } from '../textfield/textfield.js';
import '../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/UI.js';
import '../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/useDayPicker.js';
import { DatePicker } from '../calendar/date-picker.js';
import { RangePicker } from '../calendar/range-picker.js';
import { filterValueTypeMap, columnTypesMap } from './datatables.types.js';
import { useTable } from './hooks/useTable.js';
import { operationsOptions } from './filterFns.js';
import styles from './datatable.module.css.js';

const getFilterValueType = ({ filterOperation, columnType, }) => {
    if (filterOperation?.component) {
        return filterOperation?.component;
    }
    else if (columnType === columnTypesMap.date) {
        return filterValueTypeMap.datePicker;
    }
    else if (columnType === columnTypesMap.select) {
        return filterValueTypeMap.select;
    }
    else {
        return filterValueTypeMap.text;
    }
};
const FilterValues = ({ column, columnType = filterValueTypeMap.text, options = [], onValueChange, filterOperation, ...props }) => {
    const [value, setValue] = useState(column?.columnDef?.meta?.defaultValue
        ? { value: (column?.columnDef.meta).defaultValue }
        : {
            value: "",
            date: new Date(),
            dateRange: { to: new Date(), from: new Date() },
        });
    const valueType = getFilterValueType({ filterOperation, columnType });
    useEffect(() => {
        if (onValueChange) {
            onValueChange(value);
        }
    }, [value]);
    switch (valueType) {
        case filterValueTypeMap.select:
            return (jsxRuntimeExports.jsxs(Select, { value: value.value, onValueChange: (value) => setValue({ value }), children: [jsxRuntimeExports.jsx(Select.Trigger, { children: jsxRuntimeExports.jsx(Select.Value, { placeholder: "Select value" }) }), jsxRuntimeExports.jsx(Select.Content, { children: options.map((opt) => {
                            return (jsxRuntimeExports.jsx(Select.Item, { value: opt.value, children: opt.label || opt.value }, opt.key));
                        }) })] }));
        case filterValueTypeMap.datePicker:
            return (jsxRuntimeExports.jsx(DatePicker, { onSelect: (date) => setValue({ date }), value: value.date }));
        case filterValueTypeMap.rangePicker:
            return (jsxRuntimeExports.jsx(RangePicker, { onSelect: (dateRange) => setValue({ dateRange }), value: value.dateRange }));
        default:
            return (jsxRuntimeExports.jsx(TextField, { value: value.value, onChange: (e) => setValue({ value: e.target.value }) }));
    }
};
const Operation = ({ columnType = columnTypesMap.text, onOperationSelect, }) => {
    const options = operationsOptions[columnType] || [];
    const [value, setValue] = useState(options?.[0]?.value);
    useEffect(() => {
        const selectedOption = options.find((o) => o.value === value);
        if (selectedOption) {
            onOperationSelect(selectedOption);
        }
    }, [value]);
    return (jsxRuntimeExports.jsxs(Select, { defaultValue: value, onValueChange: setValue, children: [jsxRuntimeExports.jsx(Select.Trigger, { className: styles.filterOperator, children: jsxRuntimeExports.jsx(Select.Value, { placeholder: "Select operation" }) }), jsxRuntimeExports.jsx(Select.Content, { children: options.map((opt) => {
                    return (jsxRuntimeExports.jsx(Select.Item, { value: opt.label, children: opt.label }, opt.label));
                }) })] }));
};
const FilteredChip = ({ column, updateColumnCustomFilter, }) => {
    const [filterOperation, setFilterOperation] = useState();
    const [filterValue, setFilterValue] = useState();
    const { table, removeFilterColumn } = useTable();
    const { filterVariant } = column?.columnDef;
    const options = column?.columnDef?.meta?.data || [];
    column?.getFacetedUniqueValues();
    const columnHeader = column?.columnDef?.header;
    const columnName = (typeof columnHeader === "string" && columnHeader) || column.id;
    useEffect(() => {
        if (filterOperation?.fn && filterValue) {
            updateColumnCustomFilter(column.id, filterOperation?.fn);
            column.setFilterValue(filterValue);
        }
    }, [filterOperation, filterValue]);
    function removeFilter() {
        column.setFilterValue(undefined);
        removeFilterColumn(column.id);
        setFilterOperation(undefined);
        setFilterValue({});
    }
    return (jsxRuntimeExports.jsxs(Box, { className: styles.chip, children: [jsxRuntimeExports.jsx(Text, { className: styles.filterText, children: columnName }), jsxRuntimeExports.jsx(Operation, { columnType: filterVariant, onOperationSelect: setFilterOperation }), filterOperation?.hideValueField ? null : (jsxRuntimeExports.jsx(FilterValues, { column: column, columnType: filterVariant, options: options, onValueChange: setFilterValue, filterOperation: filterOperation })), jsxRuntimeExports.jsx(Flex, { children: jsxRuntimeExports.jsx(Cross1Icon, { height: "12", width: "12", onClick: removeFilter }) })] }));
};

export { FilteredChip };
//# sourceMappingURL=FilteredChip.js.map
