import { __assign } from 'tslib';
import { withThemeableProps } from '../../../useThemeable.js';
import { classNamesFunction, format, KeyCodes } from '@uifabric-vue/utilities';
import Vue from 'vue';
import { withCalendarProps } from '../useCalendar.js';
import { withCalendarYearProps, withCalendarYearRangeProps } from './useCalendarYear.js';

var getClassNames = classNamesFunction();
var CalendarYearTitle = Vue.extend({
  name: "CalendarYearTitle",
  functional: true,
  props: __assign(__assign(__assign(__assign(__assign({}, withThemeableProps()), withCalendarProps()), withCalendarYearProps()), withCalendarYearRangeProps()), { animateBackwards: { type: Boolean, default: false }, animationDirection: { type: Number, default: void 0 } }),
  render: function(h, ctx) {
    var _a = ctx.props, styles = _a.styles, theme = _a.theme, className = _a.className, fromYear = _a.fromYear, toYear = _a.toYear, strings = _a.strings, animateBackwards = _a.animateBackwards, animationDirection = _a.animationDirection;
    var onHeaderSelect = function() {
      var _a2;
      (_a2 = ctx.listeners.onHeaderSelect) === null || _a2 === void 0 ? void 0 : _a2(true);
    };
    var onHeaderKeyDown = function(ev) {
      if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {
        onHeaderSelect();
      }
    };
    var onRenderYear = function(value) {
      var _a2, _b, _c;
      return (_c = (_b = (_a2 = ctx.scopedSlots).default) === null || _b === void 0 ? void 0 : _b.call(_a2, { year: value })) !== null && _c !== void 0 ? _c : "".concat(value);
    };
    var classNames = getClassNames(styles, {
      theme: theme,
      className: className,
      hasHeaderClickCallback: !!ctx.listeners.onHeaderSelect,
      animateBackwards: animateBackwards,
      animationDirection: animationDirection
    });
    if (ctx.listeners.onHeaderSelect) {
      var rangeAriaLabel = strings.rangeAriaLabel;
      var headerAriaLabelFormatString = strings.headerAriaLabelFormatString;
      var currentDateRange = rangeAriaLabel ? typeof rangeAriaLabel === "string" ? rangeAriaLabel : rangeAriaLabel(ctx.props) : void 0;
      var ariaLabel = headerAriaLabelFormatString ? format(headerAriaLabelFormatString, currentDateRange) : currentDateRange;
      return h("button", {
        class: classNames.currentItemButton,
        attrs: {
          "aria-label": ariaLabel,
          role: "button",
          type: "button",
          "aria-atomic": true,
          "aria-live": "polite"
        },
        on: {
          click: onHeaderSelect,
          keydown: onHeaderKeyDown
        }
      }, [onRenderYear(fromYear), " - ", onRenderYear(toYear)]);
    }
    return h("div", {
      class: classNames.current
    }, [onRenderYear(fromYear), " - ", onRenderYear(toYear)]);
  }
});

export { CalendarYearTitle };
