import { __assign } from 'tslib';
import { classNamesFunction, getRTL, css, KeyCodes } from '@uifabric-vue/utilities';
import Vue from 'vue';
import { defaultCalendarNavigationIcons } from '../defaults.js';
import { withCalendarYearProps, withCalendarYearRangeProps } from './useCalendarYear.js';
import { Icon } from '../../Icon/Icon.js';

var getClassNames = classNamesFunction();
var CELL_COUNT = 12;
var CalendarYearNavArrow = Vue.extend({
  name: "CalendarYearNavArrow",
  functional: true,
  props: __assign(__assign(__assign({}, withCalendarYearProps()), withCalendarYearRangeProps()), { direction: { type: Number, default: void 0 }, 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 ? strings.prevRangeAriaLabel : strings.nextRangeAriaLabel;
    var newRangeOffset = direction === 0 ? -CELL_COUNT : CELL_COUNT;
    var newRange = {
      fromYear: fromYear + newRangeOffset,
      toYear: toYear + newRangeOffset
    };
    var ariaLabelString = ariaLabel ? typeof ariaLabel === "string" ? ariaLabel : ariaLabel(newRange) : void 0;
    var disabled = direction === 0 ? minYear !== void 0 && fromYear < minYear : maxYear !== void 0 && fromYear + CELL_COUNT > maxYear;
    var onNavigate = function() {
      var _a2, _b2;
      direction === 0 ? (_a2 = ctx.listeners.onSelectPrev) === null || _a2 === void 0 ? void 0 : _a2() : (_b2 = ctx.listeners.onSelectNext) === null || _b2 === void 0 ? void 0 : _b2();
    };
    var onKeyDown = function(ev) {
      if (ev.which === KeyCodes.enter) {
        onNavigate();
      }
    };
    var isLeftNavigation = getRTL() ? direction === 1 : direction === 0;
    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
        }
      })
    ]);
  }
});

export { CalendarYearNavArrow };
