"use client";
import { useRef } from "react";
import { useTextField } from "../form/useTextField.js";
import { getTimeStep } from "./utils.js";
/**
 * The `useTimeField` is a small wrapper around the {@link useTextField} to be used
 * with `<input type="time" />`. It is used in the `NativeTimeField` if an example
 * implementation would like to be seen.
 *
 * @example Simple Example
 * ```tsx
 * import { useTimeField } from "@react-md/core/datetime/useTimeField";
 * import { TextField } from "@react-md/core/form/TextField";
 * import { type ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   const { value, fieldProps } = useTimeField({
 *     name: "appt",
 *     required: true,
 *     min: "08:00",
 *     max: "17:00",
 *     step: { minute: 15 },
 *   });
 *
 *   // value: `""` or `"HH:mm"`
 *
 *   return <TextField label="Appointment" {...fieldProps} />
 * }
 * ```
 *
 * @since 6.3.0
 * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}
 * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}
 */ export function useTimeField(options) {
    const { min, max, step, ...fieldOptions } = options;
    if (process.env.NODE_ENV !== "production" && typeof step !== "undefined" && (!min || !max)) {
        throw new Error("A `step` was provided to a time field without the `min` or `max` props.");
    }
    const { errorMessage, fieldProps, ...impl } = useTextField(fieldOptions);
    // NOTE: Unlike the other text field components, the `value` should **not**
    // be provided since the time input behaves a bit weirdly with the `onChange`
    // event and it is better to rely on default browser behavior instead of
    // controlling the value. The flow is:
    // - user types `12:30`
    //   - `onChange` is fired with `12:30`
    // - user selects `30` and hits backspace
    //   - `onChange` is fired with `""`
    // If the `value` is set, the other time values would be lost
    const { value, ...allowedFieldProps } = fieldProps;
    const initial = useRef(value);
    return {
        ...impl,
        errorMessage,
        fieldProps: {
            ...allowedFieldProps,
            defaultValue: initial.current,
            min,
            max,
            step: getTimeStep(step),
            type: "time"
        }
    };
}

//# sourceMappingURL=useTimeField.js.map