"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NumberInput = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const index_1 = tslib_1.__importStar(require("./index"));
const join_1 = tslib_1.__importDefault(require("../utils/join"));
/**
 * This component allows - and empty values as intermediery values
 * it calls change only with valid numeric values
 */
exports.NumberInput = React.forwardRef((props, ref) => {
    const [value, setValue] = React.useState(() => {
        // awlays controlled
        return props.value ?? '';
    });
    const handleChange = React.useCallback((event) => {
        const { value } = event.target;
        let newVal = Number(value);
        if (value === '-' || value === '') {
            // we are saving invalid values so we allow values as empty string and '-'
            // there is a validation that prevents the
            newVal = value;
            // the value may be empty or negative
            setValue(value);
        }
        else if (!isNaN(newVal)) {
            setValue(value);
            // only set when a valid numer
            props.onChange(newVal);
        }
    }, []);
    React.useEffect(() => {
        setValue(props.value);
    }, [props.value]);
    const handleBlur = React.useCallback((event) => {
        props?.onBlur?.(event);
        // show the prop value
        if (value !== props.value) {
            setValue(props.value);
        }
    }, [props.value, value]);
    const { noArrows, ...restOfProps } = props;
    return (React.createElement(index_1.default, { ...restOfProps, ref: ref, className: (0, join_1.default)(noArrows ? `${index_1.baseClassName}--no-arrows` : '', props.className), value: value, onBlur: handleBlur, onChange: handleChange }));
});
