'use strict';

var jsxRuntime = require('../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
var React = require('react');
var reactIcons_esm = require('../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
var box = require('../box/box.cjs');
var flex = require('../flex/flex.cjs');
var select = require('../select/select.cjs');
var text = require('../text/text.cjs');
var textfield = require('../textfield/textfield.cjs');
require('../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/UI.cjs');
require('../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/useDayPicker.cjs');
var datePicker = require('../calendar/date-picker.cjs');
var rangePicker = require('../calendar/range-picker.cjs');
var datatables_types = require('./datatables.types.cjs');
var useTable = require('./hooks/useTable.cjs');
var filterFns = require('./filterFns.cjs');
var datatable_module = require('./datatable.module.css.cjs');

const getFilterValueType = ({ filterOperation, columnType, }) => {
    if (filterOperation?.component) {
        return filterOperation?.component;
    }
    else if (columnType === datatables_types.columnTypesMap.date) {
        return datatables_types.filterValueTypeMap.datePicker;
    }
    else if (columnType === datatables_types.columnTypesMap.select) {
        return datatables_types.filterValueTypeMap.select;
    }
    else {
        return datatables_types.filterValueTypeMap.text;
    }
};
const FilterValues = ({ column, columnType = datatables_types.filterValueTypeMap.text, options = [], onValueChange, filterOperation, ...props }) => {
    const [value, setValue] = React.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 });
    React.useEffect(() => {
        if (onValueChange) {
            onValueChange(value);
        }
    }, [value]);
    switch (valueType) {
        case datatables_types.filterValueTypeMap.select:
            return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: value.value, onValueChange: (value) => setValue({ value }), children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: "Select value" }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { children: options.map((opt) => {
                            return (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value, children: opt.label || opt.value }, opt.key));
                        }) })] }));
        case datatables_types.filterValueTypeMap.datePicker:
            return (jsxRuntime.jsxRuntimeExports.jsx(datePicker.DatePicker, { onSelect: (date) => setValue({ date }), value: value.date }));
        case datatables_types.filterValueTypeMap.rangePicker:
            return (jsxRuntime.jsxRuntimeExports.jsx(rangePicker.RangePicker, { onSelect: (dateRange) => setValue({ dateRange }), value: value.dateRange }));
        default:
            return (jsxRuntime.jsxRuntimeExports.jsx(textfield.TextField, { value: value.value, onChange: (e) => setValue({ value: e.target.value }) }));
    }
};
const Operation = ({ columnType = datatables_types.columnTypesMap.text, onOperationSelect, }) => {
    const options = filterFns.operationsOptions[columnType] || [];
    const [value, setValue] = React.useState(options?.[0]?.value);
    React.useEffect(() => {
        const selectedOption = options.find((o) => o.value === value);
        if (selectedOption) {
            onOperationSelect(selectedOption);
        }
    }, [value]);
    return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { defaultValue: value, onValueChange: setValue, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { className: datatable_module.default.filterOperator, children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: "Select operation" }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { children: options.map((opt) => {
                    return (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.label, children: opt.label }, opt.label));
                }) })] }));
};
const FilteredChip = ({ column, updateColumnCustomFilter, }) => {
    const [filterOperation, setFilterOperation] = React.useState();
    const [filterValue, setFilterValue] = React.useState();
    const { table, removeFilterColumn } = useTable.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;
    React.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 (jsxRuntime.jsxRuntimeExports.jsxs(box.Box, { className: datatable_module.default.chip, children: [jsxRuntime.jsxRuntimeExports.jsx(text.Text, { className: datatable_module.default.filterText, children: columnName }), jsxRuntime.jsxRuntimeExports.jsx(Operation, { columnType: filterVariant, onOperationSelect: setFilterOperation }), filterOperation?.hideValueField ? null : (jsxRuntime.jsxRuntimeExports.jsx(FilterValues, { column: column, columnType: filterVariant, options: options, onValueChange: setFilterValue, filterOperation: filterOperation })), jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.Cross1Icon, { height: "12", width: "12", onClick: removeFilter }) })] }));
};

exports.FilteredChip = FilteredChip;
//# sourceMappingURL=FilteredChip.cjs.map
