'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { getTranslation } from '@payloadcms/translations';
import React from 'react';
import { useTranslation } from '../../../../providers/Translation/index.js';
import { ReactSelect } from '../../../ReactSelect/index.js';
import './index.scss';
const baseClass = 'condition-value-number';
export const NumberFilter = (props)=>{
    const { disabled, field: { admin, hasMany }, onChange, operator, value } = props;
    const { i18n, t } = useTranslation();
    const isMulti = [
        'in',
        'not_in'
    ].includes(operator) || hasMany;
    const [valueToRender, setValueToRender] = React.useState([]);
    const onSelect = React.useCallback((selectedOption)=>{
        let newValue;
        if (!selectedOption) {
            newValue = [];
        } else if (isMulti) {
            if (Array.isArray(selectedOption)) {
                newValue = selectedOption.map((option)=>Number(option.value?.value || option.value));
            } else {
                newValue = [
                    Number(selectedOption.value?.value || selectedOption.value)
                ];
            }
        }
        onChange(newValue);
    }, [
        isMulti,
        onChange
    ]);
    React.useEffect(()=>{
        if (Array.isArray(value)) {
            setValueToRender(value.map((val, index)=>{
                return {
                    id: `${val}${index}`,
                    // append index to avoid duplicate keys but allow duplicate numbers
                    label: `${val}`,
                    value: {
                        toString: ()=>`${val}${index}`,
                        value: val?.value || val
                    }
                };
            }));
        } else {
            setValueToRender([]);
        }
    }, [
        value
    ]);
    const placeholder = getTranslation(admin?.placeholder, i18n) || t('general:enterAValue');
    return isMulti ? /*#__PURE__*/ _jsxDEV(ReactSelect, {
        disabled: disabled,
        isClearable: true,
        isCreatable: true,
        isMulti: isMulti,
        isSortable: true,
        numberOnly: true,
        onChange: onSelect,
        options: [],
        placeholder: placeholder,
        value: valueToRender || []
    }, void 0, false, {
        fileName: "src/elements/WhereBuilder/Condition/Number/index.tsx",
        lineNumber: 70,
        columnNumber: 5
    }, this) : /*#__PURE__*/ _jsxDEV("input", {
        className: baseClass,
        disabled: disabled,
        onChange: (e)=>onChange(e.target.value),
        placeholder: placeholder,
        type: "number",
        value: value
    }, void 0, false, {
        fileName: "src/elements/WhereBuilder/Condition/Number/index.tsx",
        lineNumber: 83,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map