import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useCallback, useRef } from 'react';
import Flex from '../../Flex';
import { useConsolidatedRef, useFocusWithin, useI18n, useTestIds, useUID } from '../../../hooks';
import { StyledRangeInputContainer } from '../../Input/Input.styles';
import FormField from '../../FormField';
import { getTimeRangeInputTestIds } from '../DateTime.test-ids';
import { createClassName, withTestIds } from '../../../utils';
import HiddenText from '../../HiddenText';
import { parseToDate } from './utils';
import TimeInput from './TimeInput';
import DateTimeInput from './DateTimeInput';
const convertToCallbackParameter = (v) => {
    return {
        valueAsISOString: v === undefined || Number.isNaN(v) ? undefined : new Date(v).toISOString(),
        valueAsTimestamp: v
    };
};
const TimeRangeInput = forwardRef(function TimeRangeInput({ testId, value = {}, onChange, onFocus, onBlur, label, fromLabel, toLabel, labelHidden, required, readOnly, disabled, min, max, withSeconds, pickerInterval, clockFormat, mode, status, timeZone, fromAdditionalInfo, toAdditionalInfo, autoFocus, className, ...restProps }, ref) {
    const testIds = useTestIds(testId, getTimeRangeInputTestIds);
    const t = useI18n();
    const start = value.start === undefined || value.start === ''
        ? undefined
        : parseToDate(value.start).getTime();
    const end = value.end === undefined || value.end === '' ? undefined : parseToDate(value.end).getTime();
    const startTimeRef = useRef(convertToCallbackParameter(start));
    const endTimeRef = useRef(convertToCallbackParameter(end));
    const onFocusChange = useCallback((focused) => {
        (focused ? onFocus : onBlur)?.({
            start: startTimeRef.current,
            end: endTimeRef.current
        });
    }, [onFocus, onBlur]);
    const containerRef = useConsolidatedRef(ref);
    useFocusWithin([containerRef], onFocusChange);
    const commonProps = {
        required,
        readOnly,
        disabled,
        min,
        max,
        status,
        withSeconds,
        pickerInterval,
        clockFormat,
        timeZone
    };
    const descriptionId = useUID();
    return (_jsxs(_Fragment, { children: [_jsx(FormField, { testId: testIds, as: 'fieldset', ...restProps, container: { wrap: 'nowrap' }, ref: containerRef, label: label, labelHidden: labelHidden, disabled: disabled, required: required, readOnly: readOnly, status: status, "aria-describedby": descriptionId, children: _jsx(Flex, { container: true, as: StyledRangeInputContainer, className: createClassName('time-range-input', className), children: mode === 'time' ? (_jsxs(_Fragment, { children: [_jsx(TimeInput, { testId: testIds.fromTime, ...commonProps, value: value.start, onBlur: changedValue => {
                                    startTimeRef.current = changedValue;
                                    if (!Number.isNaN(end))
                                        endTimeRef.current = convertToCallbackParameter(end);
                                    onChange({
                                        start: changedValue,
                                        end: convertToCallbackParameter(end)
                                    });
                                }, label: fromLabel, "aria-label": `${t('range_from_datetime') + (label ? ` - ${label}` : '')}`, additionalInfo: fromAdditionalInfo, autoFocus: autoFocus }), _jsx(TimeInput, { testId: testIds.toTime, ...commonProps, value: value.end, onBlur: changedValue => {
                                    if (!Number.isNaN(start))
                                        startTimeRef.current = convertToCallbackParameter(start);
                                    endTimeRef.current = changedValue;
                                    onChange({
                                        start: convertToCallbackParameter(start),
                                        end: changedValue
                                    });
                                }, label: toLabel, "aria-label": `${t('range_to_datetime') + (label ? ` - ${label}` : '')}`, additionalInfo: toAdditionalInfo })] })) : (_jsxs(_Fragment, { children: [_jsx(DateTimeInput, { testId: testIds.fromDateTime, ...commonProps, value: value.start, onBlur: changedValue => {
                                    startTimeRef.current = changedValue;
                                    if (!Number.isNaN(end))
                                        endTimeRef.current = convertToCallbackParameter(end);
                                    onChange({
                                        start: changedValue,
                                        end: convertToCallbackParameter(end)
                                    });
                                }, label: fromLabel, "aria-label": `${t('range_from_datetime') + (label ? ` - ${label}` : '')}`, additionalInfo: fromAdditionalInfo }), _jsx(DateTimeInput, { testId: testIds.toDateTime, ...commonProps, value: value.end, onBlur: changedValue => {
                                    if (!Number.isNaN(start))
                                        startTimeRef.current = convertToCallbackParameter(start);
                                    endTimeRef.current = changedValue;
                                    onChange({
                                        start: convertToCallbackParameter(start),
                                        end: changedValue
                                    });
                                }, label: toLabel, "aria-label": `${t('range_to_datetime') + (label ? ` - ${label}` : '')}`, additionalInfo: toAdditionalInfo })] })) }) }), _jsx(HiddenText, { id: descriptionId, children: t('range_input') })] }));
});
export default withTestIds(TimeRangeInput, getTimeRangeInputTestIds);
//# sourceMappingURL=TimeRangeInput.js.map