import { __assign } from 'tslib';
import { withThemeableProps } from '../../useThemeable.js';
import { format, css, classNamesFunction, getWindow } from '@uifabric-vue/utilities';
import Vue from 'vue';
import { CalendarDay } from './CalendarDay/CalendarDay.js';
import { CalendarMonth } from './CalendarMonth/CalendarMonth.js';
import { withCalendarProps } from './useCalendar.js';

var MIN_SIZE_FORCE_OVERLAY = 440;
var getClassNames = classNamesFunction();
var CalendarBase = Vue.extend({
  name: "CalendarBase",
  props: __assign(__assign(__assign({}, withThemeableProps()), withCalendarProps()), { firstDayOfWeek: { type: Number, default: void 0 }, dateRangeType: { type: Number, default: void 0 }, highlightCurrentMonth: { type: Boolean, default: false }, highlightSelectedMonth: { type: Boolean, default: false }, navigationIcons: { type: Object, default: void 0 }, minDate: { type: Date, default: void 0 }, maxDate: { type: Date, default: void 0 }, restrictedDates: { type: Array, default: void 0 }, showCloseButton: { type: Boolean, default: false }, allFocusable: { type: Boolean, default: false }, calendarDayProps: { type: Object, default: void 0 }, calendarMonthProps: { type: Object, default: void 0 }, value: { type: Date, default: function() {
    return new Date();
  } }, today: { type: Date, default: function() {
    return new Date();
  } }, showGoToToday: { type: Boolean, default: false }, showWeekNumbers: { type: Boolean, default: false }, showMonthPickerAsOverlay: { type: Boolean, default: false }, isDayPickerVisible: { type: Boolean, default: true }, isMonthPickerVisible: { type: Boolean, default: true } }),
  data: function() {
    return {
      selectedDate: this.today,
      navigatedMonth: new Date(),
      navigatedDay: new Date(),
      isMonthPickerVisibleInternal: getShowMonthPickerAsOverlay(this.$props) ? void 0 : this.isMonthPickerVisible,
      isDayPickerVisibleInternal: this.isDayPickerVisible
    };
  },
  computed: {
    classNames: function() {
      return getClassNames(this.styles, {
        theme: this.theme,
        className: this.className,
        isMonthPickerVisible: this.isMonthPickerVisibleInternal,
        isDayPickerVisible: this.isDayPickerVisibleInternal,
        monthPickerOnly: this.monthPickerOnly,
        showMonthPickerAsOverlay: this.internalShowMonthPickerAsOverlay,
        overlaidWithButton: this.overlaidWithButton,
        overlayedWithButton: this.overlaidWithButton,
        showGoToToday: this.showGoToToday,
        showWeekNumbers: this.showWeekNumbers
      });
    },
    internalShowMonthPickerAsOverlay: function() {
      return getShowMonthPickerAsOverlay(this.$props);
    },
    monthPickerOnly: function() {
      return !this.internalShowMonthPickerAsOverlay && this.isDayPickerVisible;
    },
    overlaidWithButton: function() {
      return this.internalShowMonthPickerAsOverlay && this.showGoToToday;
    },
    todayDateString: function() {
      if (this.dateTimeFormatter && this.strings.todayDateFormatString) {
        return format(this.strings.todayDateFormatString, this.dateTimeFormatter.formatMonthDayYear(this.today, this.strings));
      }
      return "";
    },
    selectedDateString: function() {
      if (this.dateTimeFormatter && this.strings.selectedDateFormatString) {
        return format(this.strings.selectedDateFormatString, this.dateTimeFormatter.formatMonthDayYear(this.selectedDate, this.strings));
      }
      return "";
    },
    selectionAndTodayString: function() {
      return this.selectedDateString + ", " + this.todayDateString;
    },
    goTodayEnabled: function() {
      var goTodayEnabled = this.showGoToToday;
      if (goTodayEnabled && this.today) {
        goTodayEnabled = this.navigatedDay.getFullYear() !== this.today.getFullYear() || this.navigatedDay.getMonth() !== this.today.getMonth() || this.navigatedMonth.getFullYear() !== this.today.getFullYear() || this.navigatedMonth.getMonth() !== this.today.getMonth();
      }
      return !!goTodayEnabled;
    }
  },
  methods: {
    onNavigateDayDate: function(date, focusOnNavigatedDay) {
      this.navigatedMonth = date;
      this.navigatedDay = date;
    },
    onDateSelected: function(date, selectedDateRangeArray) {
      this.navigatedMonth = date;
      this.navigatedDay = date;
      this.selectedDate = date;
      this.$emit("input", date, selectedDateRangeArray);
    },
    onGoToToday: function() {
      this.navigatedDay = this.today;
    },
    onHeaderSelect: function() {
      this.toggleDayMonthPickerVisibility();
    },
    toggleDayMonthPickerVisibility: function() {
      this.isMonthPickerVisibleInternal = !this.isMonthPickerVisibleInternal;
      this.isDayPickerVisibleInternal = !this.isDayPickerVisibleInternal;
    }
  },
  render: function(h) {
    var _this = this;
    var rootClass = "ms-DatePicker";
    var _a = this, classNames = _a.classNames, className = _a.className, selectedDateString = _a.selectedDateString, isMonthPickerVisibleInternal = _a.isMonthPickerVisibleInternal, isDayPickerVisibleInternal = _a.isDayPickerVisibleInternal, navigatedDay = _a.navigatedDay, today = _a.today, selectedDate = _a.selectedDate;
    var renderGoToTodayButton = function() {
      return _this.showGoToToday && h("button", {
        class: classNames.goTodayButton,
        attrs: {
          disabled: !_this.goTodayEnabled
        },
        on: {
          click: _this.onGoToToday
        }
      }, _this.strings.goToToday);
    };
    return h("div", {
      attrs: { role: "group" },
      class: css(rootClass, classNames.root, className, "ms-slideDownIn10")
    }, [
      h("div", {
        class: classNames.liveRegion
      }, selectedDateString),
      isDayPickerVisibleInternal && h(CalendarDay, {
        props: {
          selectedDate: selectedDate,
          navigatedDate: navigatedDay,
          today: today
        },
        on: __assign({ onNavigateDate: this.onNavigateDayDate, onSelectDate: this.onDateSelected }, getShowMonthPickerAsOverlay(this.$props) && {
          onHeaderSelect: this.onHeaderSelect
        })
      }),
      isDayPickerVisibleInternal && isMonthPickerVisibleInternal && h("div", { class: classNames.divider }),
      isMonthPickerVisibleInternal ? h("div", { class: classNames.monthPickerWrapper }, [
        h(CalendarMonth, {
          props: {
            navigatedDate: this.navigatedMonth,
            selectedDate: this.navigatedDay,
            strings: this.strings,
            highlightCurrentMonth: this.highlightCurrentMonth,
            highlightSelectedMonth: this.highlightSelectedMonth,
            dateTimeFormatter: this.dateTimeFormatter,
            minDate: this.minDate,
            maxDate: this.maxDate
          },
          on: {
            onHeaderSelect: this.onHeaderSelect,
            onNavigateDate: function(date, focusOnNavigatedDay) {
              _this.navigatedMonth = date;
              _this.navigatedDay = date;
            }
          }
        }),
        renderGoToTodayButton()
      ]) : renderGoToTodayButton()
    ]);
  }
});
function getShowMonthPickerAsOverlay(props) {
  var win = getWindow();
  return props.showMonthPickerAsOverlay || win && win.innerWidth <= MIN_SIZE_FORCE_OVERLAY;
}

export { CalendarBase as default };
