import { tsx, create } from '@dojo/framework/core/vdom';
import { formatAriaProperties, Keys } from '../common/util';
import { monthInMin, monthInMax, isOutOfDateRange, toDate } from './date-utils';
import Icon from '../icon/index';
import bundle from './nls/Calendar';
import * as css from '../theme/default/calendar.m.css';
import * as baseCss from '../common/styles/base.m.css';
import * as iconCss from '../theme/default/icon.m.css';
import theme from '../middleware/theme';
import icache, { createICacheMiddleware } from '@dojo/framework/core/middleware/icache';
import focus from '@dojo/framework/core/middleware/focus';
import i18n from '@dojo/framework/core/middleware/i18n';
export var FirstDayOfWeek;
(function (FirstDayOfWeek) {
    FirstDayOfWeek[FirstDayOfWeek["sunday"] = 0] = "sunday";
    FirstDayOfWeek[FirstDayOfWeek["monday"] = 1] = "monday";
    FirstDayOfWeek[FirstDayOfWeek["tuesday"] = 2] = "tuesday";
    FirstDayOfWeek[FirstDayOfWeek["wednesday"] = 3] = "wednesday";
    FirstDayOfWeek[FirstDayOfWeek["thursday"] = 4] = "thursday";
    FirstDayOfWeek[FirstDayOfWeek["friday"] = 5] = "friday";
    FirstDayOfWeek[FirstDayOfWeek["saturday"] = 6] = "saturday";
})(FirstDayOfWeek || (FirstDayOfWeek = {}));
const DEFAULT_MONTHS = [
    { short: 'janShort', long: 'january' },
    { short: 'febShort', long: 'february' },
    { short: 'marShort', long: 'march' },
    { short: 'aprShort', long: 'april' },
    { short: 'mayShort', long: 'may' },
    { short: 'junShort', long: 'june' },
    { short: 'julShort', long: 'july' },
    { short: 'augShort', long: 'august' },
    { short: 'sepShort', long: 'september' },
    { short: 'octShort', long: 'october' },
    { short: 'novShort', long: 'november' },
    { short: 'decShort', long: 'december' }
];
const DEFAULT_WEEKDAYS = [
    { short: 'sunShort', long: 'sunday' },
    { short: 'monShort', long: 'monday' },
    { short: 'tueShort', long: 'tuesday' },
    { short: 'wedShort', long: 'wednesday' },
    { short: 'thuShort', long: 'thursday' },
    { short: 'friShort', long: 'friday' },
    { short: 'satShort', long: 'saturday' }
];
/**
 * Enum for next/previous buttons
 */
var Paging;
(function (Paging) {
    Paging["next"] = "next";
    Paging["previous"] = "previous";
})(Paging || (Paging = {}));
/**
 * Enum for month or year controls
 */
var Controls;
(function (Controls) {
    Controls["month"] = "month";
    Controls["year"] = "year";
})(Controls || (Controls = {}));
const BASE_YEAR = 2000;
export const CalendarCell = create({ theme }).properties()(function CalendarCell({ middleware: { theme }, properties }) {
    const themeCss = theme.classes(css);
    const { callFocus, date, focusable = false, selected = false, onFocusCalled, disabled = false, outOfRange = false, today = false } = properties();
    function onClick(event) {
        event.stopPropagation();
        const { date, disabled = false, onClick } = properties();
        onClick && onClick(date, disabled);
    }
    function onKeyDown(event) {
        event.stopPropagation();
        const { onKeyDown } = properties();
        onKeyDown &&
            onKeyDown(event.which, () => {
                event.preventDefault();
            });
    }
    if (callFocus) {
        onFocusCalled && onFocusCalled();
    }
    return (tsx("td", { key: "root", focus: callFocus, role: "gridcell", "aria-selected": selected ? 'true' : 'false', tabIndex: focusable ? 0 : -1, classes: [
            themeCss.date,
            disabled || outOfRange ? themeCss.inactiveDate : null,
            outOfRange ? themeCss.outOfRange : null,
            selected ? themeCss.selectedDate : null,
            today ? themeCss.todayDate : null
        ], onclick: onClick, onkeydown: onKeyDown },
        tsx("span", null, `${date}`)));
});
export const DatePicker = create({ theme, focus, icache }).properties()(function DatePicker({ middleware: { theme, focus, icache }, properties, id }) {
    const themeCss = theme.classes(css);
    const { labelId = `${id}_label`, labels, month, year } = properties();
    const keyWithFocus = icache.get('keyWithFocus');
    const monthPopupOpen = icache.getOrSet('monthPopupOpen', false);
    const yearPopupOpen = icache.getOrSet('yearPopupOpen', false);
    const yearPage = icache.getOrSet('yearPage', 0);
    function closeMonthPopup(event) {
        if (event) {
            event.stopPropagation();
        }
        const { onPopupChange } = properties();
        icache.set('keyWithFocus', 'month-button');
        icache.set('monthPopupOpen', false);
        focus.focus();
        onPopupChange && onPopupChange(getPopupState());
    }
    function closeYearPopup(event) {
        if (event) {
            event.stopPropagation();
        }
        const { onPopupChange } = properties();
        icache.set('yearPopupOpen', false);
        icache.set('keyWithFocus', 'year-button');
        focus.focus();
        onPopupChange && onPopupChange(getPopupState());
    }
    function getMonthInputKey(month) {
        return `${id}_month_input_${month}`;
    }
    function getPopupState() {
        const monthPopupOpen = icache.get('monthPopupOpen');
        const yearPopupOpen = icache.get('yearPopupOpen');
        return !!monthPopupOpen || !!yearPopupOpen;
    }
    function getYearInputKey(year) {
        return `${id}_year_input_${year}`;
    }
    function getYearRange() {
        const { year, yearRange = 20 } = properties();
        const offset = ((year - BASE_YEAR) % yearRange) - yearRange * yearPage;
        if (year >= BASE_YEAR) {
            return { first: year - offset, last: year + yearRange - offset };
        }
        else {
            return { first: year - (yearRange + offset), last: year - offset };
        }
    }
    function onMonthButtonClick(event) {
        event.stopPropagation();
        monthPopupOpen ? closeMonthPopup() : openMonthPopup();
    }
    function onMonthRadioChange(event) {
        event.stopPropagation();
        const { onRequestMonthChange } = properties();
        onRequestMonthChange &&
            onRequestMonthChange(parseInt(event.target.value, 10));
    }
    function onPopupKeyDown(event) {
        event.stopPropagation();
        // close popup on escape, or if a value is selected with enter/space
        if (event.which === Keys.Escape ||
            event.which === Keys.Enter ||
            event.which === Keys.Space) {
            event.preventDefault();
            monthPopupOpen && closeMonthPopup();
            yearPopupOpen && closeYearPopup();
        }
    }
    function onYearButtonClick(event) {
        event.stopPropagation();
        yearPopupOpen ? closeYearPopup() : openYearPopup();
    }
    function onYearPageDown(event) {
        event.stopPropagation();
        icache.set('yearPage', yearPage - 1);
    }
    function onYearPageUp(event) {
        event.stopPropagation();
        icache.set('yearPage', yearPage + 1);
    }
    function onYearRadioChange(event) {
        event.stopPropagation();
        const { onRequestYearChange, month, minDate, maxDate, onRequestMonthChange } = properties();
        const newYear = parseInt(event.target.value, 10);
        if (!monthInMinMax(newYear, month)) {
            // we know the year is valid but the month is out of range
            if (minDate && newYear === minDate.getFullYear()) {
                onRequestMonthChange && onRequestMonthChange(minDate.getMonth());
            }
            else if (maxDate && newYear === maxDate.getFullYear()) {
                onRequestMonthChange && onRequestMonthChange(maxDate.getMonth());
            }
        }
        icache.set('yearPage', 0);
        onRequestYearChange && onRequestYearChange(newYear);
    }
    function openMonthPopup() {
        const { month, onPopupChange } = properties();
        icache.set('monthPopupOpen', true);
        icache.set('yearPopupOpen', false);
        icache.set('keyWithFocus', getMonthInputKey(month));
        focus.focus();
        onPopupChange && onPopupChange(getPopupState());
    }
    function openYearPopup() {
        const { year, onPopupChange } = properties();
        icache.set('yearPopupOpen', true);
        icache.set('monthPopupOpen', false);
        icache.set('keyWithFocus', getYearInputKey(year));
        focus.focus();
        onPopupChange && onPopupChange(getPopupState());
    }
    function monthInMinMax(year, month) {
        let { minDate, maxDate } = properties();
        return monthInMin(year, month, minDate) && monthInMax(year, month, maxDate);
    }
    function yearInMinMax(year) {
        const { minDate, maxDate } = properties();
        const minYear = minDate ? minDate.getFullYear() : year;
        const maxYear = maxDate ? maxDate.getFullYear() : year;
        return year >= minYear && year <= maxYear;
    }
    function renderControlsTrigger(type) {
        const { month, monthNames, year } = properties();
        const content = type === Controls.month ? monthNames[month].long : `${year}`;
        const open = type === Controls.month ? monthPopupOpen : yearPopupOpen;
        const onclick = type === Controls.month ? onMonthButtonClick : onYearButtonClick;
        const key = `${type}-button`;
        return (tsx("button", { key: key, "aria-controls": `${id}_${type}_dialog`, "aria-expanded": open ? 'true' : 'false', "aria-haspopup": "true", id: `${id}_${type}_button`, classes: [
                themeCss[`${type}Trigger`],
                open ? themeCss[`${type}TriggerActive`] : null
            ], focus: keyWithFocus === key ? focus.shouldFocus : undefined, role: "menuitem", type: "button", onclick: onclick }, content));
    }
    function renderMonthLabel(month, year) {
        const { monthNames, renderMonthLabel } = properties();
        return renderMonthLabel
            ? renderMonthLabel(month, year)
            : `${monthNames[month].long} ${year}`;
    }
    function renderMonthRadios() {
        const { year, month, monthNames } = properties();
        return monthNames.map(({ short, long }, i) => {
            const key = getMonthInputKey(i);
            return (tsx("label", { key: `${id}_month_radios_${i}`, classes: [
                    themeCss.monthRadio,
                    i === month ? themeCss.monthRadioChecked : null
                ], for: getMonthInputKey(i), onmouseup: closeMonthPopup },
                tsx("input", { checked: i === month, classes: themeCss.monthRadioInput, id: key, key: key, name: `${id}_month_radios`, focus: keyWithFocus === key ? focus.shouldFocus : undefined, tabIndex: monthPopupOpen ? 0 : -1, type: "radio", value: `${i}`, disabled: !monthInMinMax(year, i), onchange: onMonthRadioChange }),
                tsx("abbr", { classes: themeCss.monthRadioLabel, title: long }, short)));
        });
    }
    function renderPagingButtonContent(type) {
        const { labels, classes, variant } = properties();
        const iconType = type === Paging.next ? 'rightIcon' : 'leftIcon';
        const labelText = type === Paging.next ? labels.nextYears : labels.previousYears;
        return [
            tsx(Icon, { type: iconType, theme: theme.compose(iconCss, css, 'datePickerPaging'), classes: classes, variant: variant }),
            tsx("span", { classes: baseCss.visuallyHidden }, labelText)
        ];
    }
    function renderYearRadios() {
        const { year } = properties();
        const radios = [];
        const yearLimits = getYearRange();
        for (let i = yearLimits.first; i < yearLimits.last; i++) {
            const key = getYearInputKey(i);
            radios.push(tsx("label", { key: `${id}_year_radios_${i}`, classes: [
                    themeCss.yearRadio,
                    i === year ? themeCss.yearRadioChecked : null
                ], for: getYearInputKey(i), onmouseup: closeYearPopup },
                tsx("input", { checked: i === year, classes: themeCss.yearRadioInput, id: key, key: key, name: `${id}_year_radios`, focus: keyWithFocus === key ? focus.shouldFocus : undefined, tabIndex: yearPopupOpen ? 0 : -1, type: "radio", value: `${i}`, disabled: !yearInMinMax(i), onchange: onYearRadioChange }),
                tsx("abbr", { classes: themeCss.yearRadioLabel }, `${i}`)));
        }
        return radios;
    }
    return (tsx("div", { classes: themeCss.datePicker },
        tsx("div", { classes: themeCss.topMatter, role: "menubar" },
            tsx("label", { id: labelId, classes: [baseCss.visuallyHidden], "aria-live": "polite", "aria-atomic": "false" }, renderMonthLabel(month, year)),
            renderControlsTrigger(Controls.month),
            renderControlsTrigger(Controls.year)),
        tsx("div", { key: "month-grid", "aria-hidden": monthPopupOpen ? 'false' : 'true', "aria-labelledby": `${id}_month_button`, classes: [themeCss.monthGrid, !monthPopupOpen ? baseCss.visuallyHidden : null], id: `${id}_month_dialog`, role: "dialog" },
            tsx("fieldset", { classes: themeCss.monthFields, onkeydown: onPopupKeyDown },
                tsx("legend", { classes: baseCss.visuallyHidden }, labels.chooseMonth),
                renderMonthRadios())),
        tsx("div", { key: "year-grid", "aria-hidden": yearPopupOpen ? 'false' : 'true', "aria-labelledby": `${id}_year_button`, classes: [themeCss.yearGrid, !yearPopupOpen ? baseCss.visuallyHidden : null], id: `${id}_year_dialog`, role: "dialog" },
            tsx("fieldset", { classes: themeCss.yearFields, onkeydown: onPopupKeyDown },
                tsx("legend", { classes: [baseCss.visuallyHidden] }, labels.chooseYear),
                renderYearRadios())),
        tsx("div", { classes: themeCss.controls },
            tsx("button", { classes: themeCss.previous, tabindex: yearPopupOpen ? 0 : -1, type: "button", onclick: onYearPageDown, disabled: !yearInMinMax(year - 1) }, renderPagingButtonContent(Paging.previous)),
            tsx("button", { classes: themeCss.next, tabindex: yearPopupOpen ? 0 : -1, type: "button", onclick: onYearPageUp, disabled: !yearInMinMax(year + 1) }, renderPagingButtonContent(Paging.next)))));
});
const factory = create({
    icache: createICacheMiddleware(),
    i18n,
    theme,
    focus
})
    .properties()
    .children();
export const Calendar = factory(function Calendar({ middleware: { icache, i18n, theme, focus }, properties, id, children }) {
    const themeCss = theme.classes(css);
    const { messages: commonMessages } = i18n.localize(bundle);
    const { labels = i18n.localize(bundle).messages, aria = {}, minDate, maxDate, initialValue, weekdayNames = getWeekdays(commonMessages), firstDayOfWeek = 0 } = properties();
    let { value, month, year } = properties();
    const { monthLabel, weekdayCell } = children()[0] || {};
    const defaultDate = initialValue || new Date();
    const { initialYear = defaultDate.getFullYear(), initialMonth = defaultDate.getMonth() } = properties();
    const existingInitialValue = icache.get('initialValue');
    const existingInitialMonth = icache.get('initialMonth');
    const existingInitialYear = icache.get('initialYear');
    const callDateFocus = icache.getOrSet('callDateFocus', false);
    const focusedDay = icache.getOrSet('focusedDay', 1);
    const monthLabelId = icache.getOrSet('monthLabelId', id);
    const popupOpen = icache.getOrSet('popupOpen', false);
    const shouldFocus = focus.shouldFocus();
    if (!value) {
        value = icache.get('value') || new Date();
        if (!initialValue && !existingInitialValue) {
            value = toDate(defaultDate);
            if (isOutOfDateRange(value, minDate, maxDate)) {
                value = toDate(maxDate);
            }
            icache.set('initialValue', value);
            icache.set('value', value);
        }
        if (initialValue && initialValue !== existingInitialValue) {
            value = toDate(initialValue);
            icache.set('initialValue', toDate(initialValue));
            icache.set('value', value);
        }
    }
    if (typeof month === 'undefined') {
        if (initialMonth !== existingInitialMonth) {
            icache.set('initialMonth', initialMonth);
            icache.set('month', initialMonth);
        }
    }
    if (typeof year === 'undefined') {
        if (initialYear !== existingInitialYear) {
            icache.set('initialYear', initialYear);
            icache.set('year', initialYear);
        }
    }
    ({ month, year } = getMonthYear());
    let weekdayOrder = [];
    for (let i = firstDayOfWeek; i < firstDayOfWeek + 7; i++) {
        weekdayOrder.push(i > 6 ? i - 7 : i);
    }
    const weekdays = weekdayOrder.map((order) => (tsx("th", { role: "columnheader", classes: themeCss.weekday }, renderWeekdayCell(weekdayNames[order]))));
    function onValueChange(newValue) {
        const { onValue } = properties();
        icache.set('value', newValue);
        onValue && onValue(newValue);
    }
    function onMonthChange(newMonth) {
        const { onMonth } = properties();
        icache.set('month', newMonth);
        onMonth && onMonth(newMonth);
    }
    function onYearChange(newYear) {
        const { onYear } = properties();
        icache.set('year', newYear);
        onYear && onYear(newYear);
    }
    function getMonthLength(month, year) {
        const lastDate = new Date(year, month + 1, 0);
        return lastDate.getDate();
    }
    function getMonths(commonMessages) {
        return DEFAULT_MONTHS.map((month) => ({
            short: commonMessages[month.short],
            long: commonMessages[month.long]
        }));
    }
    function getMonthYear() {
        let { month, year, value } = properties();
        const selectedDate = value || icache.getOrSet('value', new Date());
        month = typeof month === 'number' ? month : icache.get('month');
        year = typeof year === 'number' ? year : icache.get('year');
        return {
            month: typeof month === 'number' ? month : selectedDate.getMonth(),
            year: typeof year === 'number' ? year : selectedDate.getFullYear()
        };
    }
    function getWeekdays(commonMessages) {
        return DEFAULT_WEEKDAYS.map((weekday) => ({
            short: commonMessages[weekday.short],
            long: commonMessages[weekday.long]
        }));
    }
    function goToDate(day) {
        const { month, year } = getMonthYear();
        const currentMonthLength = getMonthLength(month, year);
        const previousMonthLength = getMonthLength(month - 1, year);
        ensureDayIsInMinMax(new Date(year, month, day), (updatedDay) => (day = updatedDay));
        if (day < 1) {
            onMonthDecrement();
            day += previousMonthLength;
        }
        else if (day > currentMonthLength) {
            onMonthIncrement();
            day -= currentMonthLength;
        }
        icache.set('focusedDay', day);
        icache.set('callDateFocus', true);
    }
    function onDateClick(date, disabled) {
        let { month, year } = getMonthYear();
        if (disabled) {
            ({ month, year } = date < 15 ? onMonthIncrement() : onMonthDecrement());
            icache.set('callDateFocus', true);
        }
        icache.set('focusedDay', date);
        const dateValue = new Date(year, month, date);
        onValueChange(dateValue);
    }
    function onDateFocusCalled() {
        icache.set('callDateFocus', false);
    }
    function onDateKeyDown(key, preventDefault) {
        const { month, year } = getMonthYear();
        switch (key) {
            case Keys.Up:
                preventDefault();
                goToDate(focusedDay - 7);
                break;
            case Keys.Down:
                preventDefault();
                goToDate(focusedDay + 7);
                break;
            case Keys.Left:
                preventDefault();
                goToDate(focusedDay - 1);
                break;
            case Keys.Right:
                preventDefault();
                goToDate(focusedDay + 1);
                break;
            case Keys.PageUp:
                preventDefault();
                goToDate(1);
                break;
            case Keys.PageDown:
                preventDefault();
                const monthLength = getMonthLength(month, year);
                goToDate(monthLength);
                break;
            case Keys.Enter:
            case Keys.Space:
                onValueChange(new Date(year, month, focusedDay));
        }
    }
    function onMonthDecrement() {
        const { month, year } = getMonthYear();
        const newYear = month === 0 ? year - 1 : year;
        const newMonth = month === 0 ? 11 : month - 1;
        onMonthChange(newMonth);
        if (newYear !== year) {
            onYearChange(newYear);
        }
        return { month: newMonth, year: newYear };
    }
    function onMonthIncrement() {
        const { month, year } = getMonthYear();
        const newYear = month === 11 ? year + 1 : year;
        const newMonth = month === 11 ? 0 : month + 1;
        onMonthChange(newMonth);
        if (newYear !== year) {
            onYearChange(newYear);
        }
        return { month: newMonth, year: newYear };
    }
    function onMonthPageDown(event) {
        event.stopPropagation();
        onMonthDecrement();
    }
    function onMonthPageUp(event) {
        event.stopPropagation();
        onMonthIncrement();
    }
    function ensureDayIsInMinMax(newDate, update) {
        const { minDate, maxDate } = properties();
        if (minDate && newDate < minDate) {
            update(minDate.getDate());
        }
        else if (maxDate && newDate > maxDate) {
            update(maxDate.getDate());
        }
    }
    function renderDateGrid(selectedDate) {
        const { month, year } = getMonthYear();
        const { firstDayOfWeek = 0 } = properties();
        ensureDayIsInMinMax(new Date(year, month, focusedDay), (newDay) => icache.set('focusedDay', newDay));
        const currentMonthLength = getMonthLength(month, year);
        const previousMonthLength = getMonthLength(month - 1, year);
        const currentMonthStartDay = new Date(year, month, 1).getDay();
        const initialWeekday = currentMonthStartDay - firstDayOfWeek < 0
            ? currentMonthStartDay - firstDayOfWeek + 7
            : currentMonthStartDay - firstDayOfWeek;
        const todayString = new Date().toDateString();
        let dayIndex = 0;
        let isCurrentMonth = currentMonthStartDay === firstDayOfWeek;
        let cellMonth = isCurrentMonth ? month : month - 1;
        let date = isCurrentMonth ? 0 : previousMonthLength - initialWeekday;
        let isSelectedDay;
        let isToday;
        let weeks = [];
        let days;
        let dateObj;
        let dateString;
        let weekday;
        for (let week = 0; week < 6; week++) {
            days = [];
            for (weekday = 0; weekday < 7; weekday++) {
                // find the next date
                // if we've reached the end of the previous month, reset to 1
                if (date > dayIndex && date >= previousMonthLength) {
                    date = 1;
                    cellMonth++;
                }
                // if we've reached the end of the current month, reset to 1
                else if (date <= dayIndex && date >= currentMonthLength) {
                    date = 1;
                    cellMonth++;
                }
                else {
                    date++;
                }
                // set isSelectedDay if the dates match
                dateObj = new Date(year, cellMonth, date);
                dateString = dateObj.toDateString();
                isSelectedDay = Boolean(selectedDate && dateString === selectedDate.toDateString());
                isCurrentMonth = month === cellMonth;
                isToday = dateString === todayString;
                days.push(renderDateCell(dateObj, dayIndex++, isSelectedDay, isCurrentMonth, isToday));
            }
            weeks.push(tsx("tr", null, days));
        }
        return weeks;
    }
    function renderDateCell(dateObj, index, selected, currentMonth, today) {
        const { minDate, maxDate, theme, classes, variant } = properties();
        const date = dateObj.getDate();
        const outOfRange = isOutOfDateRange(dateObj, minDate, maxDate);
        const focusable = currentMonth && date === icache.get('focusedDay');
        return (tsx(CalendarCell, { classes: classes, variant: variant, key: `date-${index}`, callFocus: (callDateFocus || shouldFocus) && focusable, date: date, outOfRange: outOfRange, focusable: focusable, disabled: !currentMonth, selected: selected, theme: theme, today: today, onClick: outOfRange ? undefined : onDateClick, onFocusCalled: onDateFocusCalled, onKeyDown: onDateKeyDown }));
    }
    function renderDatePicker(commonMessages, labels) {
        const { monthNames = getMonths(commonMessages), theme, classes, variant, minDate, maxDate } = properties();
        const { month, year } = getMonthYear();
        return (tsx(DatePicker, { key: "date-picker", classes: classes, variant: variant, labelId: monthLabelId, labels: labels, month: month, monthNames: monthNames, renderMonthLabel: monthLabel, theme: theme, year: year, minDate: minDate, maxDate: maxDate, onPopupChange: (open) => {
                icache.set('popupOpen', open);
            }, onRequestMonthChange: (requestMonth) => {
                onMonthChange(requestMonth);
            }, onRequestYearChange: (requestYear) => {
                onYearChange(requestYear);
            } }));
    }
    function renderPagingButtonContent(type, labels) {
        const { classes, variant } = properties();
        const iconType = type === Paging.next ? 'rightIcon' : 'leftIcon';
        const labelText = type === Paging.next ? labels.nextMonth : labels.previousMonth;
        return [
            tsx(Icon, { type: iconType, theme: theme.compose(iconCss, css, 'calendarPaging'), classes: classes, variant: variant }),
            tsx("span", { classes: [baseCss.visuallyHidden] }, labelText)
        ];
    }
    function renderWeekdayCell(day) {
        return weekdayCell ? (weekdayCell(day)) : (tsx("abbr", { classes: themeCss.abbr, title: day.long }, day.short));
    }
    return (tsx("div", Object.assign({ classes: [theme.variant(), themeCss.root] }, formatAriaProperties(aria)),
        renderDatePicker(commonMessages, labels),
        tsx("table", { cellspacing: "0", cellpadding: "0", role: "grid", "aria-labelledby": monthLabelId, classes: [themeCss.dateGrid, popupOpen ? baseCss.visuallyHidden : null] },
            tsx("thead", null,
                tsx("tr", null, weekdays)),
            tsx("tbody", null, renderDateGrid(value))),
        tsx("div", { classes: [themeCss.controls, popupOpen ? baseCss.visuallyHidden : null] },
            tsx("button", { classes: themeCss.previous, tabIndex: popupOpen ? -1 : 0, type: "button", disabled: !monthInMin(year, month - 1, minDate), onclick: onMonthPageDown }, renderPagingButtonContent(Paging.previous, labels)),
            tsx("button", { classes: themeCss.next, tabIndex: popupOpen ? -1 : 0, type: "button", disabled: !monthInMax(year, month + 1, maxDate), onclick: onMonthPageUp }, renderPagingButtonContent(Paging.next, labels)))));
});
export default Calendar;

/*# sourceMappingURL=index.mjs.map*/