import React__default from 'react';
import ChevronDown from '../../../../icons/ChevronDown.js';
import ChevronLeft from '../../../../icons/ChevronLeft.js';
import ChevronRight from '../../../../icons/ChevronRight.js';
import ChevronUp from '../../../../icons/ChevronUp.js';
import { getId } from '../../../../utils/index.js';
import { SingleDateWrapper, RangeButtonsWrapper, MonthSelector, YearSelector, ButtonsWrapper } from './styles.js';
import { IconButton } from '../../../IconButton/index.js';
import { getMonthName, YEARS_TO_DISPLAY } from '../../dateUtils.js';

const previousMonthButton = 'previousMonthIconButton';
function MonthAndYearSelectionHeader({ viewType, locale, currentMonth, currentYear, minDate, maxDate, updateViewType, handlePrevYear, handleNextYear, handlePrevMonth, handleNextMonth, 'data-testid': dataTestId, }) {
    const appendTestId = getId(dataTestId);
    const onYearSelect = () => {
        updateViewType(viewType === 'year' ? 'calendar' : 'year');
    };
    const onMonthSelect = () => {
        updateViewType(viewType === 'month' ? 'calendar' : 'month');
    };
    return (React__default.createElement(SingleDateWrapper, { "data-testid": appendTestId('single-date') },
        React__default.createElement(RangeButtonsWrapper, null,
            React__default.createElement(MonthSelector, { "data-testid": appendTestId('month-selector'), "aria-live": "polite", variant: "ghost", size: "xSmall", icon: viewType === 'month' ? React__default.createElement(ChevronUp, null) : React__default.createElement(ChevronDown, null), iconPosition: "trailing", onClick: onMonthSelect }, getMonthName(currentMonth, locale)),
            React__default.createElement(YearSelector, { "data-testid": appendTestId('year-selector'), "aria-live": "polite", variant: "ghost", size: "xSmall", icon: viewType === 'year' ? React__default.createElement(ChevronUp, null) : React__default.createElement(ChevronDown, null), iconPosition: "trailing", onClick: onYearSelect }, currentYear)),
        viewType === 'calendar' && (React__default.createElement(ButtonsWrapper, { "data-testid": appendTestId('calendar-navigation') },
            React__default.createElement(IconButton, { className: previousMonthButton, icon: React__default.createElement(ChevronLeft, null), variant: "ghost-tertiary", size: "x-small", onClick: handlePrevMonth, "aria-label": "previous month", "data-testid": appendTestId('previous-month') }),
            React__default.createElement(IconButton, { icon: React__default.createElement(ChevronRight, null), variant: "ghost-tertiary", size: "x-small", onClick: handleNextMonth, "aria-label": "next month", "data-testid": appendTestId('next-month') }))),
        viewType === 'year' && (React__default.createElement(ButtonsWrapper, { "data-testid": appendTestId('year-navigation') },
            React__default.createElement(IconButton, { icon: React__default.createElement(ChevronLeft, null), variant: "ghost-tertiary", size: "x-small", onClick: handlePrevYear, "aria-label": "previous year", "data-testid": appendTestId('previous-year'), disabled: minDate && currentYear - 1 < minDate.getFullYear() }),
            React__default.createElement(IconButton, { icon: React__default.createElement(ChevronRight, null), variant: "ghost-tertiary", size: "x-small", onClick: handleNextYear, "aria-label": "next year", "data-testid": appendTestId('next-year'), disabled: maxDate && currentYear + YEARS_TO_DISPLAY > maxDate.getFullYear() })))));
}

export { MonthAndYearSelectionHeader, previousMonthButton };
