"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
var React = require('react');
var filters = require('../../types/filters.cjs');
var flex = require('../flex/flex.cjs');
require('../icon-button/icon-button.cjs');
var select = require('../select/select.cjs');
require('../skeleton/skeleton.cjs');
require('../tooltip/tooltip.cjs');
var datePicker = require('../calendar/date-picker.cjs');
require('../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.cjs');
var inputField = require('../input-field/input-field.cjs');
require('../popover/popover.cjs');
var text = require('../text/text.cjs');
var filterChipOperation = require('./filter-chip-operation.cjs');
var filterChip_module = require('./filter-chip.module.css.cjs');

const chip = index.cva(filterChip_module.default.chip, {
    variants: {
        variant: {
            default: filterChip_module.default['chip-default'],
            text: null
        }
    },
    defaultVariants: {
        variant: 'default'
    }
});
const FilterChip = ({ label, value, onRemove, className, ref, columnType = filters.FilterType.string, options = [], onValueChange, onOperationChange, leadingIcon, variant, operations, ...props }) => {
    const computedOperations = operations?.length
        ? operations
        : filters.filterOperators[columnType];
    const [operation, setOperation] = React.useState(computedOperations?.[0]);
    const [filterValue, setFilterValue] = React.useState(value || '');
    const showOnRemove = typeof onRemove === 'function';
    const isMultiSelectColumn = columnType === filters.FilterType.multiselect;
    const handleOperationChange = React.useCallback((operation) => {
        setOperation(operation);
        if (operation?.value)
            onOperationChange?.(operation.value);
    }, [onOperationChange]);
    const handleFilterValueChange = React.useCallback((value) => {
        setFilterValue(value);
        onValueChange?.(value, operation?.value ?? '');
    }, [operation, onValueChange]);
    const renderValueInput = () => {
        switch (columnType) {
            case filters.FilterType.multiselect:
            case filters.FilterType.select:
                return (jsxRuntime.jsxs(select.Select, { value: isMultiSelectColumn ? filterValue : filterValue.toString(), onValueChange: handleFilterValueChange, multiple: isMultiSelectColumn, children: [jsxRuntime.jsx(select.Select.Trigger, { iconProps: {
                                style: {
                                    display: 'none'
                                }
                            }, variant: 'text', className: index.cx(filterChip_module.default.selectValue, !showOnRemove && filterChip_module.default.selectColumn), children: jsxRuntime.jsx(select.Select.Value, { placeholder: 'Select value', children: isMultiSelectColumn && filterValue.length > 1
                                    ? `${filterValue.length} selected`
                                    : undefined }) }), jsxRuntime.jsx(select.Select.Content, { "data-variant": 'filter', children: options.map(opt => (jsxRuntime.jsx(select.Select.Item, { value: opt.value.toString(), children: opt.label }, opt.value.toString()))) })] }));
            case filters.FilterType.date:
                return (jsxRuntime.jsx("div", { className: filterChip_module.default.dateFieldWrapper, children: jsxRuntime.jsx(datePicker.DatePicker, { value: filterValue, onSelect: date => handleFilterValueChange(date), showCalendarIcon: false, inputFieldProps: { className: filterChip_module.default.dateField } }) }));
            default:
                return (jsxRuntime.jsx("div", { className: filterChip_module.default.inputFieldWrapper, children: jsxRuntime.jsx(inputField.InputField, { variant: variant === 'text' ? 'borderless' : 'default', className: filterChip_module.default.inputField, value: filterValue, onChange: e => handleFilterValueChange(e.target.value) }) }));
        }
    };
    return (jsxRuntime.jsxs(flex.Flex, { align: 'center', ref: ref, className: chip({ variant, className }), role: 'group', "aria-label": `Filter by ${label}`, "data-variant": variant, ...props, children: [jsxRuntime.jsxs(flex.Flex, { align: 'center', gap: 2, className: filterChip_module.default['chip-label'], children: [leadingIcon && (jsxRuntime.jsx("span", { className: filterChip_module.default.leadingIcon, "aria-hidden": 'true', children: leadingIcon })), jsxRuntime.jsx(text.Text, { size: 2, weight: 'normal', children: label })] }), jsxRuntime.jsx(filterChipOperation.Operation, { operations: computedOperations, label: label, value: operation, onChange: handleOperationChange, showAlternateLabel: isMultiSelectColumn && filterValue.length <= 1 }), renderValueInput(), showOnRemove && (jsxRuntime.jsx("button", { className: filterChip_module.default.removeIconContainer, "aria-label": `Remove ${label} filter`, onClick: onRemove, children: jsxRuntime.jsx(reactIcons_esm.Cross1Icon, { className: filterChip_module.default.removeIcon }) }))] }));
};
FilterChip.displayName = 'FilterChip';

exports.FilterChip = FilterChip;
//# sourceMappingURL=filter-chip.cjs.map
