"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { Cross1Icon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
import { cva, cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
import { useState, useCallback } from 'react';
import { filterOperators, FilterType } from '../../types/filters.js';
import { Flex } from '../flex/flex.js';
import '../icon-button/icon-button.js';
import { Select } from '../select/select.js';
import '../skeleton/skeleton.js';
import '../tooltip/tooltip.js';
import { DatePicker } from '../calendar/date-picker.js';
import '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.js';
import { InputField } from '../input-field/input-field.js';
import '../popover/popover.js';
import { Text } from '../text/text.js';
import { Operation } from './filter-chip-operation.js';
import styles from './filter-chip.module.css.js';

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

export { FilterChip };
//# sourceMappingURL=filter-chip.js.map
