import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
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 { useState, useEffect } from 'react';
import { Box } from '../box/box.js';
import { cva, cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.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 { Flex } from '../flex/flex.js';
import { Select } from '../select/select.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 '../popover/popover.js';
import '../input-field/input-field.js';
import { Text } from '../text/text.js';
import { TextField } from '../textfield/textfield.js';
import styles from './filter-chip.module.css.js';
import { FilterType, filterOperators } from '../../types/filters.js';

const chip = cva(styles.chip, {
    variants: {
        variant: {
            default: styles["chip-default"],
            text: null,
        },
    },
    defaultVariants: {
        variant: "default",
    },
});
const Operation = ({ label, columnType = FilterType.string, onOperationSelect, }) => {
    const filterOptions = filterOperators[columnType] || [];
    // FilterOperatorTypes gives error as Select returns string
    const [value, setValue] = useState(filterOptions?.[0]?.value);
    useEffect(() => {
        const selectedOption = filterOptions.find(o => o.value === value);
        if (selectedOption) {
            onOperationSelect(selectedOption);
        }
    }, [value]);
    return (jsxRuntimeExports.jsxs(Select, { value: value, onValueChange: setValue, "aria-labelledby": `${label}-label`, children: [jsxRuntimeExports.jsx(Select.Trigger, { variant: "text", className: styles.selectValue, "aria-label": `${label} filter operation`, children: jsxRuntimeExports.jsx(Select.Value, { placeholder: "Select operation", className: styles.operationText }) }), jsxRuntimeExports.jsx(Select.Content, { "data-variant": "filter", children: filterOptions.map(opt => {
                    return (jsxRuntimeExports.jsx(Select.Item, { value: opt.value, "aria-label": `Filter ${label} ${opt.label}`, children: opt.label }, opt.value));
                }) })] }));
};
const FilterChip = ({ label, value, onRemove, className, ref, columnType = FilterType.string, options = [], onValueChange, onOperationChange, leadingIcon, variant, ...props }) => {
    const [operation, setOperation] = useState();
    const [filterValue, setFilterValue] = useState(value || "");
    const showOnRemove = typeof onRemove === "function";
    useEffect(() => {
        if (onOperationChange && operation?.value) {
            onOperationChange(operation?.value);
        }
    }, [operation?.value]);
    useEffect(() => {
        if (onValueChange) {
            onValueChange(filterValue);
        }
    }, [filterValue]);
    const renderValueInput = () => {
        switch (columnType) {
            case FilterType.select:
                return (jsxRuntimeExports.jsxs(Select, { value: filterValue.toString(), onValueChange: setFilterValue, children: [jsxRuntimeExports.jsx(Select.Trigger, { variant: "text", className: cx(styles.selectValue, styles.selectColumn), children: jsxRuntimeExports.jsx(Select.Value, { placeholder: "Select value" }) }), jsxRuntimeExports.jsx(Select.Content, { "data-variant": "filter", children: options.map(opt => (jsxRuntimeExports.jsx(Select.Item, { value: opt.value.toString(), children: opt.label }, opt.value.toString()))) })] }));
            case FilterType.date:
                return (jsxRuntimeExports.jsx("div", { className: styles.dateFieldWrapper, children: jsxRuntimeExports.jsx(DatePicker, { value: filterValue, onSelect: date => setFilterValue(date), showCalendarIcon: false, textFieldProps: { className: styles.dateField } }) }));
            default:
                return (jsxRuntimeExports.jsx("div", { className: styles.textFieldWrapper, children: jsxRuntimeExports.jsx(TextField, { className: styles.textField, value: filterValue, onChange: e => setFilterValue(e.target.value) }) }));
        }
    };
    return (jsxRuntimeExports.jsx(Box, { ref: ref, className: chip({ variant, className }), role: "group", "aria-label": `Filter by ${label}`, ...props, children: jsxRuntimeExports.jsxs(Flex, { align: "center", children: [jsxRuntimeExports.jsxs(Flex, { align: "center", gap: 2, children: [leadingIcon && (jsxRuntimeExports.jsx("span", { className: styles.leadingIcon, "aria-hidden": "true", children: leadingIcon })), jsxRuntimeExports.jsx(Text, { size: 2, weight: "normal", children: label })] }), jsxRuntimeExports.jsx(Operation, { columnType: columnType, label: label, onOperationSelect: setOperation }), renderValueInput(), showOnRemove && (jsxRuntimeExports.jsx("button", { className: styles.removeIconContainer, "aria-label": `Remove ${label} filter`, onClick: onRemove, children: jsxRuntimeExports.jsx(Cross1Icon, { className: styles.removeIcon }) }))] }) }));
};
FilterChip.displayName = "FilterChip";

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