import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { addYears } from '@astral/utils/date/addYears';
import { useContext } from 'react';
import { ConfigContext } from '../../ConfigProvider';
import { useLocaleDateTimeFormat } from '../../useLocaleDateTimeFormat';
import { datePickerClassnames, ELEMENTS_COUNT_IN_ROW_IN_LARGE_GRID, } from '../constants';
import { DateCalendarGridButtonLarge, DateCalendarGridLarge, DateCalendarHead, DateCalendarWrapper, } from '../DateCalendar';
import { useCalendarNavigate } from '../hooks/useCalendarNavigate';
import { useMonthsGrid } from './hooks';
export const MonthPicker = ({ date: initialDate, selectedDate, onChange, rangeDate, ...headProps }) => {
    const monthFormat = useLocaleDateTimeFormat({
        month: 'long',
    });
    const titleFormat = useLocaleDateTimeFormat({
        month: 'long',
        year: 'numeric',
    });
    const { baseDate, handlePrevClick, handleNextClick } = useCalendarNavigate({
        date: initialDate,
        addCb: addYears,
    });
    const grid = useMonthsGrid({
        baseDate,
        selectedDate,
        selectedRanges: selectedDate && rangeDate
            ? [{ dateA: selectedDate, dateB: rangeDate }]
            : null,
    });
    const { year: yearCaption } = useContext(ConfigContext).datePickerLanguageMap;
    return (_jsxs(DateCalendarWrapper, { children: [_jsx(DateCalendarHead, { ...headProps, arrowPostfixTitle: yearCaption.single, onPrevClick: handlePrevClick, onNextClick: handleNextClick, headBtnText: baseDate.getUTCFullYear() }), _jsx(DateCalendarGridLarge, { className: datePickerClassnames.monthsContainer, children: grid.map(({ month, date, isDisabled, isSelected, ...props }, index) => (_jsx(DateCalendarGridButtonLarge, { onClick: () => onChange?.(date), tooltipTitle: titleFormat(date), lengthInRow: ELEMENTS_COUNT_IN_ROW_IN_LARGE_GRID, isPreviousItemInSelectedRange: grid[index - 1]?.isInSelectedRange, disabled: isDisabled, selected: isSelected, isTooltipActive: false, ...props, children: monthFormat(date) }, month))) })] }));
};
