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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useRef } from 'react';
import { useDateRangePicker, useFocusRing, } from 'react-aria';
import { 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 { Space } from '../../layout/Space.js';
import { RangeCalendar } from '../../other/Calendar/RangeCalendar.js';
import { Dialog, DialogTrigger } from '../../overlays/Dialog/index.js';
import { DateInputBase } from './DateInputBase.js';
import { DatePickerButton } from './DatePickerButton.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',
    },
});
function DateRangePicker(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, shouldFlip, placeholderValue, isDisabled, validationState, useLocale: useLocaleProp, autoFocus, } = props;
    let targetRef = useRef(null);
    let state = useDateRangePickerState({
        ...props,
        shouldCloseOnSelect: () => !state.hasTime,
    });
    let { isOpen, setOpen } = state;
    let { isFocused, focusProps } = useFocusRing({
        within: true,
        isTextInput: true,
        autoFocus,
    });
    let { isFocused: isFocusedButton, focusProps: focusPropsButton } = useFocusRing({
        within: false,
        isTextInput: false,
        autoFocus,
    });
    let domRef = useFocusManagerRef(ref);
    let { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps, dialogProps, calendarProps, } = useDateRangePicker(props, state, 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);
    const component = (_jsxs(DateInputBase, { ref: targetRef, qa: qa || 'DateRangePicker', inputType: "daterangepicker", styles: props.wrapperStyles, disableFocusRing: isFocusedButton, isDisabled: isDisabled, validationState: validationState, size: size, fieldProps: groupProps, ...focusProps, suffix: _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(buttonProps, focusPropsButton), isDisabled: isDisabled }), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(RangeCalendar, { ...calendarProps }), showTimeField && (_jsxs(Space, { children: [_jsx(TimeInput, { padding: "1x", label: dateMessages['startTime'], value: state.timeRange?.start || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('start', v) }), _jsx(TimeInput, { padding: "1x", label: dateMessages['endTime'], value: state.timeRange?.end || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('end', v) })] }))] })] }), children: [_jsx(DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }), _jsx(DateRangeDash, {}), _jsx(DatePickerInput, { useLocale: useLocaleProp, ...endFieldProps })] }));
    return wrapWithField(component, domRef, {
        ...props,
        labelProps: mergeProps(props.labelProps, labelProps),
    });
}
const _DateRangePicker = forwardRef(DateRangePicker);
_DateRangePicker.displayName = 'DateRangePicker';
export { _DateRangePicker as DateRangePicker };

        