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 { datePickerClassnames, ELEMENTS_COUNT_IN_ROW_IN_LARGE_GRID, } from '../constants';
import { DateCalendarGridButtonLarge, DateCalendarGridLarge, DateCalendarHead, DateCalendarWrapper, } from '../DateCalendar';
import { useCalendarNavigate } from '../hooks/useCalendarNavigate';
import { YEARS_IN_GRID } from './constants';
import { useYearsGrid } from './hooks';
export const YearPicker = ({ date: initialDate, selectedDate, onChange, rangeDate, ...headProps }) => {
    const { baseDate, handlePrevClick, handleNextClick } = useCalendarNavigate({
        date: initialDate,
        addCb: (date, direction) => addYears(date, YEARS_IN_GRID * direction),
    });
    const grid = useYearsGrid({
        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.plural, isPlural: true, onPrevClick: handlePrevClick, onNextClick: handleNextClick, headBtnText: `${grid[0]?.year}-${grid[grid.length - 1]?.year}` }), _jsx(DateCalendarGridLarge, { className: datePickerClassnames.yearsContainer, children: grid.map(({ year, date, isDisabled, isSelected, ...props }, index) => (_jsx(DateCalendarGridButtonLarge, { onClick: () => onChange?.(date), lengthInRow: ELEMENTS_COUNT_IN_ROW_IN_LARGE_GRID, isPreviousItemInSelectedRange: grid[index - 1]?.isInSelectedRange, disabled: isDisabled, selected: isSelected, isTooltipActive: false, ...props, children: year }, year))) })] }));
};
