import { __assign } from 'tslib';
import { withCalendarDayGridProps } from '../../CalendarDayGrid/useCalendarDayGrid.js';
import { withThemeableProps } from '../../../useThemeable.js';
import { compareDatePart, getMonthStart, getMonthEnd, addMonths } from '@fluentui/date-time-utilities';
import { css } from '@uifabric-vue/utilities';
import Vue from 'vue';
import { defaultCalendarNavigationIcons } from '../defaults.js';
import { onButtonKeyDown } from '../helpers.js';
import { withCalendarProps } from '../useCalendar.js';
import { Icon } from '../../Icon/Icon.js';

var CalendarDayNavigationButtons = Vue.extend({
  name: "CalendarDayNavigationButtons",
  functional: true,
  props: __assign(__assign(__assign(__assign({}, withThemeableProps()), withCalendarProps()), withCalendarDayGridProps()), { navigationIcons: { type: Object, default: function() {
    return defaultCalendarNavigationIcons;
  } }, classNames: { type: Object, required: true } }),
  render: function(h, ctx) {
    var _a, _b;
    var _c = ctx.props, minDate = _c.minDate, maxDate = _c.maxDate, navigatedDate = _c.navigatedDate, navigationIcons = _c.navigationIcons, classNames = _c.classNames, allFocusable = _c.allFocusable, strings = _c.strings, showCloseButton = _c.showCloseButton;
    var onSelectNextMonth = function() {
      var _a2;
      (_a2 = ctx.listeners.onNavigateDate) === null || _a2 === void 0 ? void 0 : _a2(addMonths(navigatedDate, 1), false);
    };
    var onSelectPrevMonth = function() {
      var _a2;
      (_a2 = ctx.listeners.onNavigateDate) === null || _a2 === void 0 ? void 0 : _a2(addMonths(navigatedDate, -1), false);
    };
    var onDismiss = function() {
      var _a2;
      (_a2 = ctx.listeners.onDismiss) === null || _a2 === void 0 ? void 0 : _a2();
    };
    var leftNavigationIcon = navigationIcons.leftNavigation;
    var rightNavigationIcon = navigationIcons.rightNavigation;
    var closeNavigationIcon = navigationIcons.closeIcon;
    var prevMonthInBounds = minDate ? compareDatePart(minDate, getMonthStart(navigatedDate)) < 0 : true;
    var nextMonthInBounds = maxDate ? compareDatePart(getMonthEnd(navigatedDate), maxDate) < 0 : true;
    return h("div", {
      class: classNames.monthComponents
    }, [
      h("button", {
        class: css(classNames.headerIconButton, (_a = {}, _a[classNames.disabledStyle] = !prevMonthInBounds, _a)),
        attrs: {
          "aria-disabled": !prevMonthInBounds,
          tabIndex: prevMonthInBounds ? void 0 : allFocusable ? 0 : -1,
          title: strings.prevMonthAriaLabel ? strings.prevMonthAriaLabel + " " + strings.months[addMonths(navigatedDate, -1).getMonth()] : void 0
        },
        on: __assign({}, prevMonthInBounds && {
          click: onSelectPrevMonth,
          keydown: onButtonKeyDown(onSelectPrevMonth)
        })
      }, [
        h(Icon, { props: { iconName: leftNavigationIcon } })
      ]),
      h("button", {
        class: css(classNames.headerIconButton, (_b = {}, _b[classNames.disabledStyle] = !nextMonthInBounds, _b)),
        attrs: {
          "aria-disabled": !nextMonthInBounds,
          tabIndex: nextMonthInBounds ? void 0 : allFocusable ? 0 : -1,
          title: strings.nextMonthAriaLabel ? strings.nextMonthAriaLabel + " " + strings.months[addMonths(navigatedDate, 1).getMonth()] : void 0
        },
        on: __assign({}, nextMonthInBounds && {
          click: onSelectNextMonth,
          keydown: onButtonKeyDown(onSelectNextMonth)
        })
      }, [
        h(Icon, { props: { iconName: rightNavigationIcon } })
      ]),
      showCloseButton && h("button", {
        class: css(classNames.headerIconButton),
        attrs: {
          title: strings.closeButtonAriaLabel,
          type: "button"
        },
        on: {
          click: onDismiss,
          keydown: onButtonKeyDown(onDismiss)
        }
      }, [
        h(Icon, { props: { iconName: closeNavigationIcon } })
      ])
    ]);
  }
});

export { CalendarDayNavigationButtons };
