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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useRef } from 'react';
import { useDatePicker, useDateRangePicker, useFocusRing, } from 'react-aria';
import { useDatePickerState, useDateRangePickerState } from 'react-stately';
import { useProviderProps } from '../../../provider.js';
import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty/index.js';
import { mergeProps } from '../../../utils/react/index.js';
import { useFieldProps, useFormProps, wrapWithField } from '../../form/index.js';
import { Calendar } from '../../other/Calendar/Calendar.js';
import { Dialog, DialogTrigger } from '../../overlays/Dialog/index.js';
import { DateInputBase } from './DateInputBase.js';
import { DatePickerButton } from './DatePickerButton.js';
import { DatePickerElement } from './DatePickerElement.js';
import { DatePickerInput } from './DatePickerInput.js';
import { dateMessages } from './intl.js';
import { DEFAULT_DATE_PROPS } from './props.js';
import { TimeInput } from './TimeInput.js';
import { useFocusManagerRef } from './utils.js';
const DateRangeDash = tasty({
    'aria-hidden': 'true',
    'data-qa': 'DateRangeDash',
    children: '–',
    styles: {
        padding: '0 .5x',
        color: '#dark-03',
    },
});
function DateRangeSeparatedPicker(props, ref) {
    props = useProviderProps(props);
    props = useFormProps(props);
    props = useFieldProps(props, {
        defaultValidationTrigger: 'onBlur',
    });
    props = Object.assign({}, DEFAULT_DATE_PROPS, props);
    let styles = extractStyles(props, CONTAINER_STYLES);
    let { qa, size, placeholderValue, isDisabled, validationState, useLocale: useLocaleProp, autoFocus, } = props;
    let targetRef = useRef(null);
    let state = useDateRangePickerState({
        ...props,
    });
    let startState = useDatePickerState({
        ...props,
        onChange: null,
        value: state.value?.start,
    });
    let endState = useDatePickerState({
        ...props,
        onChange: null,
        value: state.value?.end,
    });
    let startFocusRingProps = useFocusRing({
        within: true,
        isTextInput: true,
        autoFocus,
    });
    let startFocusProps = useFocusRing({
        within: false,
        isTextInput: false,
        autoFocus,
    });
    let endFocusRingProps = useFocusRing({
        within: true,
        isTextInput: true,
        autoFocus,
    });
    let endFocusProps = useFocusRing({
        within: false,
        isTextInput: false,
        autoFocus,
    });
    let domRef = useFocusManagerRef(ref);
    let { groupProps, labelProps, startFieldProps, endFieldProps } = useDateRangePicker(props, state, targetRef);
    let startProps = useDatePicker(props, startState, targetRef);
    let endProps = useDatePicker(props, endState, targetRef);
    let placeholder = placeholderValue;
    let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : undefined;
    let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : undefined;
    let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;
    let timeGranularity = state.granularity === 'hour' ||
        state.granularity === 'minute' ||
        state.granularity === 'second'
        ? state.granularity
        : null;
    let showTimeField = !!timeGranularity;
    // let visibleMonths = useVisibleMonths(maxVisibleMonths);
    function onChange(value, type) {
        if (type === 'start') {
            const newRange = { ...state.value, start: value };
            if (newRange.start &&
                newRange.end &&
                newRange.end.compare(newRange.start) < 0) {
                newRange.end = newRange.start;
            }
            state.setValue(newRange);
            startProps.calendarProps.onChange(value);
            startState.setOpen(false);
        }
        else {
            const newRange = { ...state.value, end: value };
            if (newRange.start &&
                newRange.end &&
                newRange.end.compare(newRange.start) < 0) {
                newRange.start = newRange.end;
            }
            state.setValue(newRange);
            endProps.calendarProps.onChange(value);
            endState.setOpen(false);
        }
    }
    const component = (_jsxs(DatePickerElement, { ref: targetRef, ...groupProps, styles: props.wrapperStyles, qa: qa || 'DateRangeSeparatedPicker', "data-input-type": "daterangeseparatedpicker", children: [_jsx(DateInputBase, { disableFocusRing: startFocusProps.isFocused, isDisabled: isDisabled, validationState: validationState, size: size, ...startFocusRingProps.focusProps, suffix: _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: startState.isOpen, shouldFlip: props.shouldFlip, onOpenChange: startState.setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(startProps.buttonProps, startFocusProps.focusProps), isDisabled: isDisabled }), _jsxs(Dialog, { ...startProps.dialogProps, width: "max-content", children: [_jsx(Calendar, { ...startProps.calendarProps, defaultFocusedValue: state.value?.start || state.value?.end || undefined, selectedRange: state.value?.start && state.value?.end
                                        ? state.value
                                        : undefined, onChange: (value) => onChange(value, 'start') }), showTimeField && (_jsx(TimeInput, { padding: "1x", label: dateMessages['time'], value: startState.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: startState.setTimeValue }))] })] }), children: _jsx(DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }) }), _jsx(DateRangeDash, {}), _jsx(DateInputBase, { disableFocusRing: endFocusProps.isFocused, isDisabled: isDisabled, validationState: validationState, size: size, ...endFocusRingProps.focusProps, suffix: _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: endState.isOpen, shouldFlip: props.shouldFlip, onOpenChange: endState.setOpen, children: [_jsx(DatePickerButton, { "aria-label": "Show calendar for the end date", size: size, ...mergeProps(endFocusProps.focusProps, endProps.buttonProps), isDisabled: isDisabled }), _jsxs(Dialog, { ...endProps.dialogProps, width: "max-content", children: [_jsx(Calendar, { ...endProps.calendarProps, defaultFocusedValue: state.value?.end || state.value?.start || undefined, selectedRange: state.value?.start && state.value?.end
                                        ? state.value
                                        : undefined, onChange: (value) => {
                                        onChange(value, 'end');
                                    } }), showTimeField && (_jsx(TimeInput, { padding: "1x", label: dateMessages['time'], value: endState.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: endState.setTimeValue }))] })] }), children: _jsx(DatePickerInput, { useLocale: useLocaleProp, ...endFieldProps }) })] }));
    return wrapWithField(component, domRef, {
        ...props,
        labelProps: mergeProps(props.labelProps, labelProps),
    });
}
const _DateRangeSeparatedPicker = forwardRef(DateRangeSeparatedPicker);
_DateRangeSeparatedPicker.displayName = 'DateRangeSeparatedPicker';
export { _DateRangeSeparatedPicker as DateRangeSeparatedPicker };

        