"use client";
import { useCallback, useRef, useState } from "react";
import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect.js";
import { withinRange } from "../utils/withinRange.js";
import { useFormReset } from "./useFormReset.js";
import { useTextField } from "./useTextField.js";
const noop = ()=>{
// do nothing
};
/**
 * @internal
 * @see {@link https://react-md.dev/components/text-field#number | Number TextField Demos}
 * @see {@link https://react-md.dev/hooks/use-number-field | useNumberField Demos}
 * @see {@link useTextField}
 * @see {@link useNumberField} overrides for other examples.
 */ export function useNumberField(options) {
    const { min, max, step, form, onBlur = noop, onChange = noop, updateValue = "change", updateValueOnBlur = true, disableReset, defaultValue, ...textOptions } = options;
    const [number, setNumber] = useState(defaultValue);
    const initial = useRef(number);
    const { value: _value, reset: resetTextField, fieldRef, fieldProps, setState: setTextFieldState, ...remaining } = useTextField({
        ...textOptions,
        isNumber: true,
        defaultValue: `${number ?? ""}`,
        disableReset: true,
        onBlur (event) {
            onBlur(event);
            if (event.isPropagationStopped()) {
                return;
            }
            const input = event.currentTarget;
            input.setCustomValidity("");
            input.checkValidity();
            if (!updateValueOnBlur || // do nothing else since it's a weird value like: `"--0"` which causes
            // the value to be `""` and `numberAsValue` to be `NaN`
            input.validity.badInput) {
                return;
            }
            let value = input.valueAsNumber;
            if (input.value === "" && typeof initial.current === "number") {
                value = min ?? initial.current;
            }
            // can't have both rangeUnderflow and rangeOverflow at the same time, so
            // it's "safe" to always provide both
            value = withinRange({
                min,
                max,
                value
            });
            if (!Number.isNaN(value)) {
                setNumber(value);
                input.value = `${value}`;
            } else if (typeof initial.current === "undefined") {
                setNumber(undefined);
            }
        },
        onChange (event) {
            onChange(event);
            if (event.isPropagationStopped() || updateValue === "blur") {
                return;
            }
            const input = event.currentTarget;
            input.checkValidity();
            const value = withinRange({
                min,
                max,
                value: event.currentTarget.valueAsNumber
            });
            if (!input.validity.valid && !input.validity.rangeUnderflow && !input.validity.rangeOverflow) {
                return;
            }
            if (!Number.isNaN(value)) {
                setNumber(value);
            } else if (initial.current === undefined) {
                setNumber(undefined);
            }
        }
    });
    const { error, errorMessage } = remaining;
    const prevState = useRef({
        error,
        errorMessage,
        value: number
    });
    useIsomorphicLayoutEffect(()=>{
        prevState.current = {
            error,
            errorMessage,
            value: number
        };
    });
    const reset = useCallback(()=>{
        resetTextField();
        setNumber(initial.current);
    }, [
        resetTextField
    ]);
    const setState = useCallback((nextState)=>{
        const resolvedNextState = typeof nextState === "function" ? nextState(prevState.current) : nextState;
        const { value, error, errorMessage } = resolvedNextState;
        setNumber(value);
        setTextFieldState({
            value: `${value ?? ""}`,
            error,
            errorMessage
        });
    }, [
        setTextFieldState
    ]);
    useFormReset({
        form,
        elementRef: fieldRef,
        onReset: disableReset ? undefined : reset
    });
    return {
        ...remaining,
        reset,
        value: number,
        setState,
        fieldRef,
        fieldProps: {
            ...fieldProps,
            min,
            max,
            step,
            type: "number"
        }
    };
}

//# sourceMappingURL=useNumberField.js.map