import { __assign, __spreadArray } from "tslib";
import { DAYS_IN_WEEK } from '@fluentui/date-time-utilities';
import { css, findIndex } from '@uifabric-vue/utilities';
import Vue from 'vue';
import { withCalendarProps } from '../Calendar/useCalendar';
import { withCalendarDayGridProps } from './useCalendarDayGrid';
export var CalendarMonthHeaderRow = Vue.extend({
    name: 'CalendarMonthHeaderRow',
    functional: true,
    props: __assign(__assign(__assign({}, withCalendarProps()), withCalendarDayGridProps()), { weeks: { type: Array, required: true }, classNames: { type: Object, required: true } }),
    render: function (h, ctx) {
        var _a = ctx.props, showWeekNumbers = _a.showWeekNumbers, strings = _a.strings, firstDayOfWeek = _a.firstDayOfWeek, allFocusable = _a.allFocusable, weeksToShow = _a.weeksToShow, weeks = _a.weeks, classNames = _a.classNames;
        var dayLabels = strings.shortDays.slice();
        var firstOfMonthIndex = findIndex(weeks[1], function (day) { return day.originalDate.getDate() === 1; });
        if (weeksToShow === 1 && firstOfMonthIndex >= 0) {
            // if we only show one week, replace the header with short month name
            var firstOfMonthIndexOffset = (firstOfMonthIndex + firstDayOfWeek) % DAYS_IN_WEEK;
            dayLabels[firstOfMonthIndexOffset] = strings.shortMonths[weeks[1][firstOfMonthIndex].originalDate.getMonth()];
        }
        return h('tr', __spreadArray([
            showWeekNumbers && h('th', { class: classNames.dayCell })
        ], dayLabels.map(function (val, index) {
            var i = (index + firstDayOfWeek) % DAYS_IN_WEEK;
            var label = index === firstOfMonthIndex
                ? strings.days[i] + ' ' + dayLabels[i]
                : strings.days[i];
            return h('th', {
                key: dayLabels[i] + ' ' + index,
                class: css(classNames.dayCell, classNames.weekDayLabelCell),
                attrs: {
                    scope: 'col',
                    title: label,
                    'aria-label': label,
                    'data-is-focusable': allFocusable ? true : undefined,
                },
            }, dayLabels[i]);
        }), true));
    },
});
//# sourceMappingURL=CalendarMonthHeaderRow.js.map