import { __assign } from "tslib";
import { CalendarDayGrid } from '../../../components/CalendarDayGrid/CalendarDayGrid';
import { withCalendarDayGridProps } from '../../../components/CalendarDayGrid/useCalendarDayGrid';
import { withThemeableProps } from '../../../useThemeable';
import { classNamesFunction, format, getId } from '@uifabric-vue/utilities';
import Vue from 'vue';
import { defaultCalendarNavigationIcons } from '../defaults';
import { onButtonKeyDown } from '../helpers';
import { withCalendarProps } from '../useCalendar';
import { CalendarDayNavigationButtons } from './CalendarDayNavigationButtons';
var getClassNames = classNamesFunction();
export var CalendarDayBase = Vue.extend({
    name: 'CalendarDayBase',
    props: __assign(__assign(__assign(__assign({}, withThemeableProps()), withCalendarProps()), withCalendarDayGridProps()), { navigationIcons: { type: Object, default: function () { return defaultCalendarNavigationIcons; } }, showSixWeeksByDefault: { type: Boolean, default: false } }),
    computed: {
        classNames: function () {
            return getClassNames(this.styles, {
                theme: this.theme,
                className: this.className,
                headerIsClickable: !!this.$listeners.onHeaderSelect,
                showWeekNumbers: this.showWeekNumbers,
                animationDirection: this.animationDirection,
            });
        },
        monthAndYearId: function () {
            return getId();
        },
        monthAndYear: function () {
            var _a = this, dateTimeFormatter = _a.dateTimeFormatter, navigatedDate = _a.navigatedDate, strings = _a.strings;
            return dateTimeFormatter.formatMonthYear(navigatedDate, strings);
        },
        headerAriaLabel: function () {
            var _a = this, strings = _a.strings, monthAndYear = _a.monthAndYear;
            return strings.yearPickerHeaderAriaLabel
                ? format(strings.yearPickerHeaderAriaLabel, monthAndYear)
                : monthAndYear;
        },
    },
    methods: {
        onHeaderSelect: function () {
            this.$emit('onHeaderSelect');
        },
    },
    render: function (h) {
        var _a = this, strings = _a.strings, navigatedDate = _a.navigatedDate, dateTimeFormatter = _a.dateTimeFormatter, styles = _a.styles, showSixWeeksByDefault = _a.showSixWeeksByDefault, minDate = _a.minDate, maxDate = _a.maxDate, restrictedDates = _a.restrictedDates, dateRangeType = _a.dateRangeType, selectedDate = _a.selectedDate, monthAndYear = _a.monthAndYear, headerAriaLabel = _a.headerAriaLabel, classNames = _a.classNames, monthAndYearId = _a.monthAndYearId;
        var HeaderButtonComponentType = this.$listeners.onHeaderSelect ? 'button' : 'div';
        return h('div', { class: classNames.root }, [
            h('div', { class: classNames.header }, [
                h(HeaderButtonComponentType, {
                    class: classNames.monthAndYear,
                    key: monthAndYear,
                    attrs: {
                        'aria-live': 'polite',
                        'aria-atomic': 'true',
                        'aria-label': this.$listeners.onHeaderSelect ? headerAriaLabel : undefined,
                        'data-is-focusable': !!this.$listeners.onHeaderSelect,
                        tabIndex: this.$listeners.onHeaderSelect ? 0 : -1,
                        type: 'button',
                    },
                    on: {
                        click: this.onHeaderSelect,
                        keydown: onButtonKeyDown(this.onHeaderSelect),
                    },
                }, [
                    h('span', { attrs: { id: monthAndYearId } }, monthAndYear),
                ]),
                h(CalendarDayNavigationButtons, {
                    props: __assign(__assign({}, this.$props), { classNames: classNames }),
                    on: this.$listeners,
                }),
            ]),
            h(CalendarDayGrid, {
                props: __assign(__assign({}, this.$props), { styles: styles, selectedDate: selectedDate, strings: strings, navigatedDate: navigatedDate, weeksToShow: showSixWeeksByDefault ? 6 : undefined, dateTimeFormatter: dateTimeFormatter, minDate: minDate, maxDate: maxDate, restrictedDates: restrictedDates, labelledBy: monthAndYearId, dateRangeType: dateRangeType }),
                on: this.$listeners,
            }),
        ]);
    },
});
//# sourceMappingURL=CalendarDay.base.js.map