"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _format = _interopRequireDefault(require("date-fns/format"));
var _sub = _interopRequireDefault(require("date-fns/sub"));
var _add = _interopRequireDefault(require("date-fns/add"));
var _ = require("../../../..");
var _dateUtils = require("../../shared/dateUtils");
var _SelectMonth = _interopRequireDefault(require("../../shared/components/SelectMonth"));
var _SelectYear = _interopRequireDefault(require("../../shared/components/SelectYear"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Header = function Header(_ref) {
  var _ref$ariaLabelPreviou = _ref.ariaLabelPrevious,
    ariaLabelPrevious = _ref$ariaLabelPreviou === void 0 ? '{date}' : _ref$ariaLabelPreviou,
    _ref$ariaLabelNext = _ref.ariaLabelNext,
    ariaLabelNext = _ref$ariaLabelNext === void 0 ? '{date}' : _ref$ariaLabelNext,
    id = _ref.id,
    locale = _ref.locale,
    viewedDate = _ref.viewedDate,
    onMonthChange = _ref.onMonthChange,
    onYearChange = _ref.onYearChange,
    yearSelectLength = _ref.yearSelectLength,
    fullscreenMode = _ref.fullscreenMode,
    selectMonthLabel = _ref.selectMonthLabel,
    selectYearLabel = _ref.selectYearLabel;
  var opts = {
    locale: (0, _dateUtils.getLocale)(locale)
  };
  var ariaLabelPreviousText = ariaLabelPrevious.replace('{date}', (0, _format.default)((0, _sub.default)(viewedDate || new Date(), {
    months: 1
  }), 'MMMM yyyy', opts));
  var ariaLabelNextText = ariaLabelNext.replace('{date}', (0, _format.default)((0, _add.default)(viewedDate || new Date(), {
    months: 1
  }), 'MMMM yyyy', opts));
  return _react.default.createElement(_.Box, {
    pb: 1
  }, _react.default.createElement(_.Flexbox, {
    container: true,
    justifyContent: "space-between"
  }, _react.default.createElement(_.Flexbox, {
    item: true
  }, _react.default.createElement(_.Box, {
    mt: 1
  }, _react.default.createElement(_.Button, {
    variant: "neutral",
    "aria-label": ariaLabelPreviousText,
    onClick: function onClick() {
      onMonthChange(viewedDate.getMonth() - 1);
    }
  }, _react.default.createElement(_.Icon.ChevronLeft16, null)))), _react.default.createElement(_.Flexbox, {
    container: true
  }, _react.default.createElement(_.Flexbox, {
    item: true
  }, _react.default.createElement(_SelectMonth.default, {
    id: id,
    locale: locale,
    viewedDate: viewedDate,
    onChange: onMonthChange,
    fullscreenMode: fullscreenMode,
    selectMonthLabel: selectMonthLabel
  })), _react.default.createElement(_.Flexbox, {
    item: true
  }, _react.default.createElement(_SelectYear.default, {
    id: id,
    locale: locale,
    viewedDate: viewedDate,
    years: yearSelectLength,
    onChange: onYearChange,
    fullscreenMode: fullscreenMode,
    selectYearLabel: selectYearLabel
  }))), _react.default.createElement(_.Flexbox, {
    item: true
  }, _react.default.createElement(_.Box, {
    mt: 1
  }, _react.default.createElement(_.Button, {
    variant: "neutral",
    "aria-label": ariaLabelNextText,
    onClick: function onClick() {
      onMonthChange(viewedDate.getMonth() + 1);
    }
  }, _react.default.createElement(_.Icon.ChevronRight16, null))))));
};
var _default = exports.default = Header;