'use client';
import { getTranslation } from '@payloadcms/translations';
import { isNumber } from 'payload/utilities';
import React, { useCallback, useEffect, useState } from 'react';
import ReactSelect from '../../../elements/ReactSelect/index.js';
import { useTranslation } from '../../../providers/Translation/index.js';
import LabelComp from '../../Label/index.js';
import useField from '../../useField/index.js';
import { withCondition } from '../../withCondition/index.js';
import { fieldBaseClass } from '../shared.js';
const NumberField = (props)=>{
    const { name, AfterInput, BeforeInput, Description, Error, Label: LabelFromProps, className, label, onChange: onChangeFromProps, path: pathFromProps, placeholder, readOnly, required, style, validate, width } = props;
    const Label = LabelFromProps || /*#__PURE__*/ React.createElement(LabelComp, {
        label: label,
        required: required
    });
    const max = 'max' in props ? props.max : Infinity;
    const min = 'min' in props ? props.min : -Infinity;
    const step = 'step' in props ? props.step : 1;
    const hasMany = 'hasMany' in props ? props.hasMany : false;
    const maxRows = 'maxRows' in props ? props.maxRows : Infinity;
    const { i18n, t } = useTranslation();
    const memoizedValidate = useCallback((value, options)=>{
        if (typeof validate === 'function') {
            return validate(value, {
                ...options,
                max,
                min,
                required
            });
        }
    }, [
        validate,
        min,
        max,
        required
    ]);
    const { path, setValue, showError, value } = useField({
        path: pathFromProps || name,
        validate: memoizedValidate
    });
    const handleChange = useCallback((e)=>{
        const val = parseFloat(e.target.value);
        let newVal = val;
        if (Number.isNaN(val)) {
            newVal = undefined;
        }
        if (typeof onChangeFromProps === 'function') {
            onChangeFromProps(newVal);
        }
        setValue(newVal);
    }, [
        onChangeFromProps,
        setValue
    ]);
    const [valueToRender, setValueToRender] = useState([]) // Only for hasMany
    ;
    const handleHasManyChange = useCallback((selectedOption)=>{
        if (!readOnly) {
            let newValue;
            if (!selectedOption) {
                newValue = [];
            } else if (Array.isArray(selectedOption)) {
                newValue = selectedOption.map((option)=>Number(option.value?.value || option.value));
            } else {
                newValue = [
                    Number(selectedOption.value?.value || selectedOption.value)
                ];
            }
            setValue(newValue);
        }
    }, [
        readOnly,
        setValue
    ]);
    // useEffect update valueToRender:
    useEffect(()=>{
        if (hasMany && Array.isArray(value)) {
            setValueToRender(value.map((val, index)=>{
                return {
                    id: `${val}${index}`,
                    label: `${val}`,
                    value: {
                        toString: ()=>`${val}${index}`,
                        value: val?.value || val
                    }
                };
            }));
        }
    }, [
        value,
        hasMany
    ]);
    return /*#__PURE__*/ React.createElement("div", {
        className: [
            fieldBaseClass,
            'number',
            className,
            showError && 'error',
            readOnly && 'read-only',
            hasMany && 'has-many'
        ].filter(Boolean).join(' '),
        style: {
            ...style,
            width
        }
    }, Error, Label, hasMany ? /*#__PURE__*/ React.createElement(ReactSelect, {
        className: `field-${path.replace(/\./g, '__')}`,
        disabled: readOnly,
        filterOption: (option, rawInput)=>{
            // eslint-disable-next-line no-restricted-globals
            const isOverHasMany = Array.isArray(value) && value.length >= maxRows;
            return isNumber(rawInput) && !isOverHasMany;
        },
        isClearable: true,
        isCreatable: true,
        isMulti: true,
        isSortable: true,
        noOptionsMessage: ({ inputValue })=>{
            const isOverHasMany = Array.isArray(value) && value.length >= maxRows;
            if (isOverHasMany) {
                return t('validation:limitReached', {
                    max: maxRows,
                    value: value.length + 1
                });
            }
            return null;
        },
        // numberOnly
        onChange: handleHasManyChange,
        options: [],
        placeholder: t('general:enterAValue'),
        showError: showError,
        value: valueToRender
    }) : /*#__PURE__*/ React.createElement("div", null, BeforeInput, /*#__PURE__*/ React.createElement("input", {
        disabled: readOnly,
        id: `field-${path.replace(/\./g, '__')}`,
        max: max,
        min: min,
        name: path,
        onChange: handleChange,
        onWheel: (e)=>{
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-expect-error
            e.target.blur();
        },
        placeholder: getTranslation(placeholder, i18n),
        step: step,
        type: "number",
        value: typeof value === 'number' ? value : ''
    }), AfterInput), Description);
};
export default withCondition(NumberField);

//# sourceMappingURL=index.js.map