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

import { jsx as _jsx } from "react/jsx-runtime";
import { createCalendar } from '@internationalized/date';
import { forwardRef, useRef } from 'react';
import { useDateField, useLocale, } from 'react-aria';
import { useDateFieldState } 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 { parseAbsoluteDate } from './parseDate.js';
import { DEFAULT_DATE_PROPS } from './props.js';
import { formatSegments, useFocusManagerRef } from './utils.js';
function DateInput(props, ref) {
    props = useProviderProps(props);
    props = useFormProps(props);
    props = useFieldProps(props, {
        defaultValidationTrigger: 'onBlur',
        valuePropsMapper: ({ value, onChange }) => ({
            value: typeof value === 'string' ? parseAbsoluteDate(value) : value,
            onChange,
        }),
    });
    props = Object.assign({}, DEFAULT_DATE_PROPS, props);
    let { qa, autoFocus, isDisabled, inputStyles, wrapperStyles, isReadOnly, isRequired, size = 'medium', useLocale: useLocaleProp, } = props;
    let styles = extractStyles(props, CONTAINER_STYLES, wrapperStyles);
    let domRef = useFocusManagerRef(ref);
    let { locale } = useLocale();
    let state = useDateFieldState({
        ...props,
        locale: useLocaleProp ? locale : 'en-US',
        createCalendar,
    });
    if (useLocaleProp == null) {
        state.segments = formatSegments(state.segments);
    }
    let fieldRef = useRef(null);
    let { labelProps, fieldProps } = useDateField(props, state, fieldRef);
    const component = (_jsx(DateInputBase, { ref: fieldRef, qa: qa || 'DateInput', inputType: "dateinput", size: size, fieldProps: fieldProps, isDisabled: isDisabled, autoFocus: autoFocus, validationState: state.validationState, styles: wrapperStyles, inputStyles: inputStyles, children: state.segments.map((segment, i) => (_jsx(DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }));
    return wrapWithField(component, domRef, {
        ...props,
        labelProps: mergeProps(props.labelProps, labelProps),
    });
}
/**
 * DateInputs allow users to enter and edit date and time values using a keyboard.
 * Each part of a date value is displayed in an individually editable segment.
 */
const _DateInput = forwardRef(DateInput);
_DateInput.displayName = 'DateInput';
export { _DateInput as DateInput };

        