import { __assign } from "tslib";
import { Icon } from '../../../components';
import { classNamesFunction, css, getRTL, KeyCodes } from '@uifabric-vue/utilities';
import Vue from 'vue';
import { defaultCalendarNavigationIcons } from '../defaults';
import { withCalendarYearProps, withCalendarYearRangeProps } from './useCalendarYear';
var getClassNames = classNamesFunction();
var CELL_COUNT = 12;
export var CalendarYearNavArrow = Vue.extend({
    name: 'CalendarYearNavArrow',
    functional: true,
    props: __assign(__assign(__assign({}, withCalendarYearProps()), withCalendarYearRangeProps()), { direction: { type: Number, default: undefined }, navigationIcons: { type: Object, default: function () { return defaultCalendarNavigationIcons; } } }),
    render: function (h, ctx) {
        var _a;
        var _b = ctx.props, styles = _b.styles, theme = _b.theme, className = _b.className, navigationIcons = _b.navigationIcons, direction = _b.direction, minYear = _b.minYear, maxYear = _b.maxYear, fromYear = _b.fromYear, toYear = _b.toYear, strings = _b.strings;
        var classNames = getClassNames(styles, {
            theme: theme,
            className: className,
        });
        var ariaLabel = direction === 0 /* Previous */
            ? strings.prevRangeAriaLabel
            : strings.nextRangeAriaLabel;
        var newRangeOffset = direction === 0 /* Previous */
            ? -CELL_COUNT
            : CELL_COUNT;
        var newRange = {
            fromYear: fromYear + newRangeOffset,
            toYear: toYear + newRangeOffset,
        };
        var ariaLabelString = ariaLabel
            ? (typeof ariaLabel === 'string' ? ariaLabel : ariaLabel(newRange))
            : undefined;
        var disabled = direction === 0 /* Previous */
            ? minYear !== undefined && fromYear < minYear
            : maxYear !== undefined && fromYear + CELL_COUNT > maxYear;
        var onNavigate = function () {
            var _a, _b, _c, _d;
            direction === 0 /* Previous */
                ? (_b = (_a = ctx.listeners).onSelectPrev) === null || _b === void 0 ? void 0 : _b.call(_a)
                : (_d = (_c = ctx.listeners).onSelectNext) === null || _d === void 0 ? void 0 : _d.call(_c);
        };
        var onKeyDown = function (ev) {
            if (ev.which === KeyCodes.enter) {
                onNavigate();
            }
        };
        var isLeftNavigation = getRTL()
            ? direction === 1 /* Next */
            : direction === 0 /* Previous */;
        return h('button', {
            class: css(classNames.navigationButton, (_a = {},
                _a[classNames.disabled] = disabled,
                _a)),
            attrs: {
                type: 'button',
                title: ariaLabelString,
                disabled: disabled,
            },
            on: __assign({}, !disabled && {
                click: onNavigate,
                keydown: onKeyDown,
            }),
        }, [
            h(Icon, {
                props: {
                    iconName: isLeftNavigation
                        ? navigationIcons.leftNavigation
                        : navigationIcons.rightNavigation,
                },
            }),
        ]);
    },
});
//# sourceMappingURL=CalendarYearNavArrow.js.map