/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.108.1
 * Released under the MIT license.
 */

import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useRef } from 'react';
import { useTimeField, } from 'react-aria';
import { useTimeFieldState } from 'react-stately';
import { useProviderProps } from '../../../provider.js';
import { CONTAINER_STYLES, extractStyles, } from '../../../tasty/index.js';
import { mergeProps } from '../../../utils/react/index.js';
import { useFieldProps, useFormProps, wrapWithField } from '../../form/index.js';
import { DateInputBase } from './DateInputBase.js';
import { DatePickerSegment } from './DatePickerSegment.js';
import { DEFAULT_TIME_PROPS } from './props.js';
import { useFocusManagerRef } from './utils.js';
function TimeInput(props, ref) {
    props = useProviderProps(props);
    props = useFormProps(props);
    props = useFieldProps(props, {
        defaultValidationTrigger: 'onBlur',
    });
    props = Object.assign({}, DEFAULT_TIME_PROPS, props);
    let styles = extractStyles(props, CONTAINER_STYLES);
    let { qa, inputStyles, wrapperStyles, autoFocus, isDisabled, isReadOnly, isRequired, validationState, size = 'medium', labelProps: userLabelProps, } = props;
    let domRef = useFocusManagerRef(ref);
    // let { locale } = useLocale();
    let state = useTimeFieldState({
        ...props,
        locale: 'en-US',
    });
    let fieldRef = useRef(null);
    let { labelProps, fieldProps } = useTimeField(props, state, fieldRef);
    const timeInput = (_jsx(DateInputBase, { ref: fieldRef, qa: qa || 'TimeInput', inputType: "timeinput", size: size, fieldProps: fieldProps, isDisabled: isDisabled, autoFocus: autoFocus, inputStyles: inputStyles, styles: wrapperStyles, validationState: validationState, children: state.segments.map((segment, i) => (_jsx(DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }));
    return wrapWithField(timeInput, domRef, {
        ...props,
        labelProps: mergeProps(labelProps, userLabelProps),
    });
}
/**
 * TimeFields allow users to enter and edit time values using a keyboard.
 * Each part of the time is displayed in an individually editable segment.
 */
const _TimeInput = forwardRef(TimeInput);
_TimeInput.displayName = 'TimeInput';
export { _TimeInput as TimeInput };

        