import { __assign } from 'tslib';
import { classNamesFunction } from '@uifabric-vue/utilities';
import Vue from 'vue';
import { CalendarYearGrid } from './CalendarYearGrid.js';
import { CalendarYearHeader } from './CalendarYearHeader.js';
import { withCalendarYearProps } from './useCalendarYear.js';

var getClassNames = classNamesFunction();
var CELL_COUNT = 12;
var CalendarYearBase = Vue.extend({
  name: "CalendarYearBase",
  props: __assign({}, withCalendarYearProps()),
  data: function() {
    return {
      fromYear: 0
    };
  },
  computed: {
    classNames: function() {
      var _a = this.$props, styles = _a.styles, theme = _a.theme, className = _a.className;
      return getClassNames(styles, {
        theme: theme,
        className: className
      });
    },
    rangeYear: function() {
      return this.selectedYear || this.navigatedYear || new Date().getFullYear();
    },
    toYear: function() {
      return this.fromYear + CELL_COUNT - 1;
    }
  },
  created: function() {
    this.fromYear = Math.floor(this.rangeYear / 10) * 10;
  },
  render: function(h) {
    var _this = this;
    var _a = this, classNames = _a.classNames, fromYear = _a.fromYear, toYear = _a.toYear;
    var animateBackwards = false;
    return h("div", {
      class: classNames.root
    }, [
      h(CalendarYearHeader, {
        props: __assign(__assign({}, this.$props), { fromYear: fromYear, toYear: toYear, animateBackwards: animateBackwards }),
        on: {
          onHeaderSelect: function() {
            _this.$emit("onHeaderSelect");
          },
          onSelectPrev: function() {
            _this.fromYear -= CELL_COUNT;
          },
          onSelectNext: function() {
            _this.fromYear += CELL_COUNT;
          }
        }
      }),
      h(CalendarYearGrid, {
        props: __assign(__assign({}, this.$props), { fromYear: fromYear, toYear: toYear, animateBackwards: animateBackwards }),
        on: this.$listeners,
        scopedSlots: this.$scopedSlots
      })
    ]);
  }
});

export { CalendarYearBase };
