import { __assign } from 'tslib';
import { withThemeableProps } from '../../../useThemeable.js';
import { compareDatePart, getYearStart, getYearEnd, setMonth, addYears, getMonthEnd, getMonthStart } from '@fluentui/date-time-utilities';
import { format, css, getRTL, classNamesFunction } from '@uifabric-vue/utilities';
import Vue from 'vue';
import { CalendarYear } from '../CalendarYear/CalendarYear.js';
import { defaultCalendarNavigationIcons } from '../defaults.js';
import { onButtonKeyDown } from '../helpers.js';
import { withCalendarProps } from '../useCalendar.js';
import { Icon } from '../../Icon/Icon.js';

var MONTHS_PER_ROW = 4;
var getClassNames = classNamesFunction();
var CalendarMonthBase = Vue.extend({
  name: "CalendarMonthBase",
  props: __assign(__assign(__assign({}, withThemeableProps()), withCalendarProps()), { selectedDate: { type: Date, default: function() {
    return new Date();
  } }, navigatedDate: { type: Date, required: true }, highlightCurrentMonth: { type: Boolean, default: false }, highlightSelectedMonth: { type: Boolean, default: false }, animationDirection: { type: Number, default: void 0 }, navigationIcons: { type: Object, default: function() {
    return defaultCalendarNavigationIcons;
  } }, onNavigateDate: { type: Object, default: void 0 }, yearPickerHidden: { type: Boolean, default: false } }),
  data: function() {
    return {
      isYearPickerVisible: false
    };
  },
  computed: {
    classNames: function() {
      var _a = this, theme = _a.theme, styles = _a.styles, className = _a.className, highlightCurrentMonth = _a.highlightCurrentMonth, highlightSelectedMonth = _a.highlightSelectedMonth, animationDirection = _a.animationDirection, yearPickerHidden = _a.yearPickerHidden;
      return getClassNames(styles, {
        theme: theme,
        className: className,
        hasHeaderClickCallback: !!this.$listeners.onHeaderSelect || !yearPickerHidden,
        highlightCurrent: highlightCurrentMonth,
        highlightSelected: highlightSelectedMonth,
        animateBackwards: false,
        animationDirection: animationDirection
      });
    },
    yearString: function() {
      var _a = this, dateTimeFormatter = _a.dateTimeFormatter, navigatedDate = _a.navigatedDate;
      return dateTimeFormatter.formatYear(navigatedDate);
    },
    headerAriaLabel: function() {
      var _a = this, strings = _a.strings, yearString = _a.yearString;
      return strings.monthPickerHeaderAriaLabel ? format(strings.monthPickerHeaderAriaLabel, yearString) : yearString;
    },
    isPrevYearInBounds: function() {
      var _a = this, minDate = _a.minDate, navigatedDate = _a.navigatedDate;
      return minDate ? compareDatePart(minDate, getYearStart(navigatedDate)) < 0 : true;
    },
    isNextYearInBounds: function() {
      var _a = this, maxDate = _a.maxDate, navigatedDate = _a.navigatedDate;
      return maxDate ? compareDatePart(getYearEnd(navigatedDate), maxDate) < 0 : true;
    },
    yearStrings: function() {
      var _a = this, strings = _a.strings, navigatedDate = _a.navigatedDate, dateTimeFormatter = _a.dateTimeFormatter;
      return getYearStrings({ strings: strings, navigatedDate: navigatedDate, dateTimeFormatter: dateTimeFormatter });
    }
  },
  methods: {
    focusOnNextUpdate: function() {
    },
    onSelectMonth: function(newMonth) {
      this.$emit("onHeaderSelect");
      this.$emit("onNavigateDate", setMonth(this.navigatedDate, newMonth), true);
    },
    onSelectPrevYear: function() {
      this.$emit("onNavigateDate", addYears(this.navigatedDate, -1), false);
    },
    onSelectNextYear: function() {
      this.$emit("onNavigateDate", addYears(this.navigatedDate, 1), false);
    },
    onHeaderSelect: function() {
      if (!this.yearPickerHidden) {
        this.isYearPickerVisible = true;
      } else {
        this.$emit("onHeaderSelect");
      }
    },
    onYearPickerHeaderSelect: function() {
      this.isYearPickerVisible = false;
    },
    onSelectYear: function(selectedYear) {
      var navYear = this.navigatedDate.getFullYear();
      if (navYear !== selectedYear) {
        var newNavigationDate = new Date(this.navigatedDate.getTime());
        newNavigationDate.setFullYear(selectedYear);
        if (this.maxDate && newNavigationDate > this.maxDate) {
          newNavigationDate = setMonth(newNavigationDate, this.maxDate.getMonth());
        } else if (this.minDate && newNavigationDate < this.minDate) {
          newNavigationDate = setMonth(newNavigationDate, this.minDate.getMonth());
        }
        this.$emit("onNavigateDate", newNavigationDate, true);
      }
      this.isYearPickerVisible = false;
    }
  },
  render: function(h) {
    var _a, _b;
    var _this = this;
    var _c = this, styles = _c.styles, classNames = _c.classNames, allFocusable = _c.allFocusable, strings = _c.strings, navigatedDate = _c.navigatedDate, selectedDate = _c.selectedDate, dateTimeFormatter = _c.dateTimeFormatter, navigationIcons = _c.navigationIcons, headerAriaLabel = _c.headerAriaLabel, isPrevYearInBounds = _c.isPrevYearInBounds, isNextYearInBounds = _c.isNextYearInBounds, isYearPickerVisible = _c.isYearPickerVisible, today = _c.today, highlightCurrentMonth = _c.highlightCurrentMonth, highlightSelectedMonth = _c.highlightSelectedMonth;
    var leftNavigationIcon = navigationIcons.leftNavigation;
    var rightNavigationIcon = navigationIcons.rightNavigation;
    if (isYearPickerVisible) {
      var _d = this.yearStrings, onRenderYear = _d[0], yearStrings = _d[1];
      return h(CalendarYear, {
        key: "calendarYear",
        props: {
          minYear: this.minDate ? this.minDate.getFullYear() : void 0,
          maxYear: this.maxDate ? this.maxDate.getFullYear() : void 0,
          navigationIcons: navigationIcons,
          selectedYear: selectedDate ? selectedDate.getFullYear() : navigatedDate ? navigatedDate.getFullYear() : void 0,
          strings: yearStrings,
          styles: styles,
          highlightCurrentYear: this.highlightCurrentMonth,
          highlightSelectedYear: this.highlightSelectedMonth,
          animationDirection: this.animationDirection
        },
        on: {
          onHeaderSelect: this.onYearPickerHeaderSelect,
          onSelectYear: this.onSelectYear
        },
        scopedSlots: {
          onRenderYear: onRenderYear
        }
      });
    }
    var rowIndexes = [];
    for (var i = 0; i < strings.shortMonths.length / MONTHS_PER_ROW; i++) {
      rowIndexes.push(i);
    }
    var yearString = dateTimeFormatter.formatYear(navigatedDate);
    return h("div", { class: classNames.root }, [
      h("div", { class: classNames.headerContainer }, [
        h("button", {
          class: classNames.currentItemButton,
          attrs: {
            "aria-atomic": true,
            "aria-label": headerAriaLabel,
            "aria-live": "polite",
            "data-is-focusable": !!this.$listeners.onHeaderSelect || !this.yearPickerHidden,
            tabIndex: !!this.$listeners.onHeaderSelect || !this.yearPickerHidden ? 0 : -1,
            type: "button"
          },
          on: {
            click: this.onHeaderSelect,
            keydown: onButtonKeyDown(this.onHeaderSelect)
          }
        }, yearString),
        h("div", { class: classNames.navigationButtonsContainer }, [
          h("button", {
            class: css(classNames.navigationButton, (_a = {}, _a[classNames.disabled] = !isPrevYearInBounds, _a)),
            attrs: {
              "aria-disabled": !isPrevYearInBounds,
              tabIndex: isPrevYearInBounds ? void 0 : allFocusable ? 0 : -1,
              title: strings.prevYearAriaLabel ? strings.prevYearAriaLabel + " " + dateTimeFormatter.formatYear(addYears(navigatedDate, -1)) : void 0,
              type: "button"
            },
            on: __assign({}, isPrevYearInBounds && {
              click: this.onSelectPrevYear,
              keyDown: onButtonKeyDown(this.onSelectPrevYear)
            })
          }, [
            h(Icon, { props: { iconName: getRTL() ? rightNavigationIcon : leftNavigationIcon } })
          ]),
          h("button", {
            class: css(classNames.navigationButton, (_b = {}, _b[classNames.disabled] = !isNextYearInBounds, _b)),
            attrs: {
              "aria-disabled": !isNextYearInBounds,
              tabIndex: isNextYearInBounds ? void 0 : allFocusable ? 0 : -1,
              title: strings.nextYearAriaLabel ? strings.nextYearAriaLabel + " " + dateTimeFormatter.formatYear(addYears(navigatedDate, 1)) : void 0,
              type: "button"
            },
            on: __assign({}, isPrevYearInBounds && {
              click: this.onSelectNextYear,
              keyDown: onButtonKeyDown(this.onSelectNextYear)
            })
          }, [
            h(Icon, { props: { iconName: getRTL() ? leftNavigationIcon : rightNavigationIcon } })
          ])
        ])
      ]),
      h("div", {
        class: classNames.gridContainer,
        attrs: {
          role: "grid",
          "aria-label": yearString
        }
      }, rowIndexes.map(function(rowNum) {
        var monthsForRow = strings.shortMonths.slice(rowNum * MONTHS_PER_ROW, (rowNum + 1) * MONTHS_PER_ROW);
        return h("div", {
          key: "monthRow_" + rowNum + navigatedDate.getFullYear(),
          class: classNames.buttonRow,
          attrs: {
            role: "row"
          }
        }, monthsForRow.map(function(month, index) {
          var _a2;
          var monthIndex = rowNum * MONTHS_PER_ROW + index;
          var indexedMonth = setMonth(navigatedDate, monthIndex);
          var isNavigatedMonth = navigatedDate.getMonth() === monthIndex;
          var isSelectedMonth = selectedDate.getMonth() === monthIndex;
          var isSelectedYear = selectedDate.getFullYear() === navigatedDate.getFullYear();
          var isInBounds = (_this.minDate ? compareDatePart(_this.minDate, getMonthEnd(indexedMonth)) < 1 : true) && (_this.maxDate ? compareDatePart(getMonthStart(indexedMonth), _this.maxDate) < 1 : true);
          return h("button", {
            key: monthIndex,
            class: css(classNames.itemButton, (_a2 = {}, _a2[classNames.current] = highlightCurrentMonth && isCurrentMonth(monthIndex, navigatedDate.getFullYear(), today), _a2[classNames.selected] = highlightSelectedMonth && isSelectedMonth && isSelectedYear, _a2[classNames.disabled] = !isInBounds, _a2)),
            attrs: {
              role: "gridcell",
              disabled: !allFocusable && !isInBounds,
              "aria-label": _this.dateTimeFormatter.formatMonth(indexedMonth, strings),
              "aria-selected": isNavigatedMonth,
              "data-is-focusable": isInBounds ? true : void 0,
              type: "button"
            },
            on: __assign({}, isInBounds && {
              click: function() {
                return _this.onSelectMonth(monthIndex);
              },
              keydown: onButtonKeyDown(function() {
                return _this.onSelectMonth(monthIndex);
              })
            })
          }, month);
        }));
      }))
    ]);
  }
});
function getYearStrings(_a) {
  var strings = _a.strings, navigatedDate = _a.navigatedDate, dateTimeFormatter = _a.dateTimeFormatter;
  var yearToString = function(year) {
    if (dateTimeFormatter) {
      var yearFormattingDate = new Date(navigatedDate.getTime());
      yearFormattingDate.setFullYear(year);
      return dateTimeFormatter.formatYear(yearFormattingDate);
    }
    return String(year);
  };
  var yearRangeToString = function(yearRange) {
    return "".concat(yearToString(yearRange.fromYear), " - ").concat(yearToString(yearRange.toYear));
  };
  var yearRangeToNextDecadeLabel = function(yearRange) {
    return strings.nextYearRangeAriaLabel ? "".concat(strings.nextYearRangeAriaLabel, " ").concat(yearRangeToString(yearRange)) : "";
  };
  var yearRangeToPrevDecadeLabel = function(yearRange) {
    return strings.prevYearRangeAriaLabel ? "".concat(strings.prevYearRangeAriaLabel, " ").concat(yearRangeToString(yearRange)) : "";
  };
  console.log("test");
  return [
    yearToString,
    {
      rangeAriaLabel: yearRangeToString,
      prevRangeAriaLabel: yearRangeToPrevDecadeLabel,
      nextRangeAriaLabel: yearRangeToNextDecadeLabel,
      headerAriaLabelFormatString: strings.yearPickerHeaderAriaLabel
    }
  ];
}
function isCurrentMonth(month, year, today) {
  return today.getFullYear() === year && today.getMonth() === month;
}

export { CalendarMonthBase as default };
