import { __assign } from "tslib";
import { withCalendarDayGridProps } from '../../../components/CalendarDayGrid/useCalendarDayGrid';
import { Icon } from '../../../components/Icon';
import { withThemeableProps } from '../../../useThemeable';
import { addMonths, compareDatePart, getMonthEnd, getMonthStart } from '@fluentui/date-time-utilities';
import { css } from '@uifabric-vue/utilities';
import Vue from 'vue';
import { defaultCalendarNavigationIcons } from '../defaults';
import { onButtonKeyDown } from '../helpers';
import { withCalendarProps } from '../useCalendar';
export var CalendarDayNavigationButtons = Vue.extend({
    name: 'CalendarDayNavigationButtons',
    functional: true,
    props: __assign(__assign(__assign(__assign({}, withThemeableProps()), withCalendarProps()), withCalendarDayGridProps()), { navigationIcons: { type: Object, default: function () { return defaultCalendarNavigationIcons; } }, classNames: { type: Object, required: true } }),
    render: function (h, ctx) {
        var _a, _b;
        var _c = ctx.props, minDate = _c.minDate, maxDate = _c.maxDate, navigatedDate = _c.navigatedDate, navigationIcons = _c.navigationIcons, classNames = _c.classNames, allFocusable = _c.allFocusable, strings = _c.strings, showCloseButton = _c.showCloseButton;
        var onSelectNextMonth = function () {
            var _a, _b;
            (_b = (_a = ctx.listeners).onNavigateDate) === null || _b === void 0 ? void 0 : _b.call(_a, addMonths(navigatedDate, 1), false);
        };
        var onSelectPrevMonth = function () {
            var _a, _b;
            (_b = (_a = ctx.listeners).onNavigateDate) === null || _b === void 0 ? void 0 : _b.call(_a, addMonths(navigatedDate, -1), false);
        };
        var onDismiss = function () {
            var _a, _b;
            (_b = (_a = ctx.listeners).onDismiss) === null || _b === void 0 ? void 0 : _b.call(_a);
        };
        var leftNavigationIcon = navigationIcons.leftNavigation;
        var rightNavigationIcon = navigationIcons.rightNavigation;
        var closeNavigationIcon = navigationIcons.closeIcon;
        // determine if previous/next months are in bounds
        var prevMonthInBounds = minDate ? compareDatePart(minDate, getMonthStart(navigatedDate)) < 0 : true;
        var nextMonthInBounds = maxDate ? compareDatePart(getMonthEnd(navigatedDate), maxDate) < 0 : true;
        return h('div', {
            class: classNames.monthComponents,
        }, [
            h('button', {
                class: css(classNames.headerIconButton, (_a = {},
                    _a[classNames.disabledStyle] = !prevMonthInBounds,
                    _a)),
                attrs: {
                    'aria-disabled': !prevMonthInBounds,
                    tabIndex: prevMonthInBounds ? undefined : allFocusable ? 0 : -1,
                    title: strings.prevMonthAriaLabel
                        ? strings.prevMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, -1).getMonth()]
                        : undefined,
                },
                on: __assign({}, prevMonthInBounds && {
                    click: onSelectPrevMonth,
                    keydown: onButtonKeyDown(onSelectPrevMonth),
                }),
            }, [
                h(Icon, { props: { iconName: leftNavigationIcon } }),
            ]),
            h('button', {
                class: css(classNames.headerIconButton, (_b = {},
                    _b[classNames.disabledStyle] = !nextMonthInBounds,
                    _b)),
                attrs: {
                    'aria-disabled': !nextMonthInBounds,
                    tabIndex: nextMonthInBounds ? undefined : allFocusable ? 0 : -1,
                    title: strings.nextMonthAriaLabel
                        ? strings.nextMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, 1).getMonth()]
                        : undefined,
                },
                on: __assign({}, nextMonthInBounds && {
                    click: onSelectNextMonth,
                    keydown: onButtonKeyDown(onSelectNextMonth),
                }),
            }, [
                h(Icon, { props: { iconName: rightNavigationIcon } }),
            ]),
            showCloseButton && h('button', {
                class: css(classNames.headerIconButton),
                attrs: {
                    title: strings.closeButtonAriaLabel,
                    type: 'button',
                },
                on: {
                    click: onDismiss,
                    keydown: onButtonKeyDown(onDismiss),
                },
            }, [
                h(Icon, { props: { iconName: closeNavigationIcon } }),
            ]),
        ]);
    },
});
//# sourceMappingURL=CalendarDayNavigationButtons.js.map