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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useRef } from 'react';
import { useDatePicker, useFocusRing, } from 'react-aria';
import { useDatePickerState } 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 { 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 { 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';
function DatePicker(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 = useDatePickerState({
        ...props,
        shouldCloseOnSelect: () => !state.hasTime,
    });
    let { isOpen, setOpen } = state;
    let domRef = useFocusManagerRef(ref);
    let { isFocused, focusProps } = useFocusRing({
        within: true,
        isTextInput: true,
        autoFocus,
    });
    let { isFocused: isFocusedButton, focusProps: focusPropsButton } = useFocusRing({
        within: false,
        isTextInput: false,
        autoFocus,
    });
    let { groupProps, labelProps, fieldProps, buttonProps, dialogProps, calendarProps, } = useDatePicker(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 = (_jsx(DateInputBase, { ref: targetRef, qa: qa || 'DatePicker', inputType: "datepicker", 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: props.shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(buttonProps, focusPropsButton), isDisabled: isDisabled }), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(Calendar, { ...calendarProps }), showTimeField && (_jsx(TimeInput, { padding: "1x", label: dateMessages['time'], value: state.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: state.setTimeValue }))] })] }), children: _jsx(DatePickerInput, { useLocale: useLocaleProp, ...fieldProps }) }));
    return wrapWithField(component, domRef, {
        ...props,
        labelProps: mergeProps(props.labelProps, labelProps),
    });
}
const _DatePicker = forwardRef(DatePicker);
_DatePicker.displayName = 'DatePicker';
export { _DatePicker as DatePicker };

        