import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useRef, useCallback } from 'react';
import Flex from '../../Flex';
import MonthInput from '../Input/MonthInput';
import Icon, { registerIcon } from '../../Icon';
import * as caretLeftIcon from '../../Icon/icons/caret-left.icon';
import * as caretRightIcon from '../../Icon/icons/caret-right.icon';
import { useConfiguration, useI18n, useTestIds } from '../../../hooks';
import { getCalendarTypeFromLocale } from '../Input/utils';
import { getAdjustedUTCDateTime, getAdjustedUTCDateTimeForTimezone } from '../utils';
import { getDatePickerTestIds } from '../DateTime.test-ids';
import Calendar from './Calendar';
import Weeks from './Weeks';
import { StyledDatePicker, StyledDatePickerMonthInput, StyledMonthNavigationButton, StyledMonthPicker } from './DatePicker.styles';
import { isValidDate, toDateTimeString } from './utils';
registerIcon(caretLeftIcon, caretRightIcon);
const DateRangePicker = (props) => {
    const { locale } = useConfiguration();
    const { testId, selected: initial, selectedRange, onChange, min, max, mode, showWeekNumber, timeZone, ...restProps } = props;
    const testIds = useTestIds(testId, getDatePickerTestIds);
    const getNow = useCallback(() => (timeZone ? getAdjustedUTCDateTimeForTimezone(timeZone) : getAdjustedUTCDateTime()), [timeZone]);
    const [selected, setSelected] = useState(initial);
    const [current, setCurrent] = useState(() => selected && isValidDate(selected) ? selected : getNow());
    useEffect(() => {
        if (toDateTimeString(initial) !== toDateTimeString(selected)) {
            setSelected(initial);
            setCurrent(initial || getNow());
        }
    }, [toDateTimeString(initial), getNow]);
    const calendarRef = useRef(null);
    useEffect(() => {
        // need to postpone focusing to make sure onFocusWithin has been attached
        setTimeout(() => {
            calendarRef.current?.querySelector('button[tabindex="0"]:enabled')?.focus();
        });
    }, []);
    const calendarType = getCalendarTypeFromLocale(locale);
    const t = useI18n();
    return (_jsxs(StyledDatePicker, { "aria-label": t('calendar'), role: 'region', ...restProps, children: [_jsxs(Flex, { as: StyledMonthPicker, container: { justify: 'between', alignItems: 'end' }, children: [_jsx(MonthInput, { "data-testid": testIds.month, "aria-label": t('picker_jump_to_month_and_year'), value: current, as: StyledDatePickerMonthInput, innerLabelsHidden: false, required: true, role: 'group', onChange: ({ valueAsTimestamp }) => {
                            const newCurrent = new Date(valueAsTimestamp);
                            newCurrent.setUTCDate(current.getUTCDate());
                            setCurrent(newCurrent);
                        }, min: min, max: max }), _jsx(StyledMonthNavigationButton, { "data-testid": testIds.previousMonth, label: t('picker_prev_month'), variant: 'simple', icon: true, onClick: () => {
                            const newCurrent = new Date(current);
                            newCurrent.setUTCMonth(newCurrent.getUTCMonth() - 1);
                            setCurrent(newCurrent);
                        }, children: _jsx(Icon, { name: 'caret-left' }) }), _jsx(StyledMonthNavigationButton, { "data-testid": testIds.setCurrentDate, label: t('set_current_date_a11y'), icon: true, variant: 'simple', onClick: () => {
                            const currDate = getNow();
                            setCurrent(currDate);
                            setSelected(currDate);
                            onChange?.(currDate);
                        }, children: _jsx(Icon, { name: 'calendar-now' }) }), _jsx(StyledMonthNavigationButton, { "data-testid": testIds.nextMonth, label: t('picker_next_month'), variant: 'simple', icon: true, onClick: () => {
                            const newCurrent = new Date(current);
                            newCurrent.setUTCMonth(newCurrent.getUTCMonth() + 1);
                            setCurrent(newCurrent);
                        }, children: _jsx(Icon, { name: 'caret-right' }) })] }), _jsxs(Flex, { container: { wrap: 'nowrap' }, children: [showWeekNumber && _jsx(Weeks, { current: current, calendarType: calendarType, disabled: true }), _jsx(Calendar, { ref: calendarRef, selected: selected && isValidDate(selected) ? selected : undefined, current: current, selectedRange: selectedRange, showHighlight: true, calendarType: calendarType, onFocus: date => {
                            setCurrent(date);
                        }, onSelect: date => {
                            setCurrent(date);
                            setSelected(date);
                            onChange?.(date);
                        }, min: min, max: max, timeZone: timeZone })] })] }));
};
export default DateRangePicker;
//# sourceMappingURL=DateRangePicker.js.map