"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _format = _interopRequireDefault(require("date-fns/format"));
var _dateFns = require("date-fns");
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 YearMonthContainer = (0, _styledComponents.default)(_.Flexbox).withConfig({
  displayName: "DoubleHeader__YearMonthContainer",
  componentId: "sc-6liufo-0"
})(["width:", "px;"], function (_ref) {
  var theme = _ref.theme;
  return theme.spacing.unit(76);
});
var ChevronContainer = (0, _styledComponents.default)(_.Box).withConfig({
  displayName: "DoubleHeader__ChevronContainer",
  componentId: "sc-6liufo-1"
})(["position:absolute;", ""], function (_ref2) {
  var $align = _ref2.$align,
    theme = _ref2.theme;
  return "".concat($align, ": ").concat(theme.spacing.unit(2), "px;");
});
var DoubleHeader = function DoubleHeader(_ref3) {
  var _ref3$ariaLabelPrevio = _ref3.ariaLabelPrevious,
    ariaLabelPrevious = _ref3$ariaLabelPrevio === void 0 ? '{date}' : _ref3$ariaLabelPrevio,
    _ref3$ariaLabelNext = _ref3.ariaLabelNext,
    ariaLabelNext = _ref3$ariaLabelNext === void 0 ? '{date}' : _ref3$ariaLabelNext,
    id = _ref3.id,
    locale = _ref3.locale,
    viewedDate = _ref3.viewedDate,
    onMonthChange = _ref3.onMonthChange,
    onYearChange = _ref3.onYearChange,
    yearSelectLength = _ref3.yearSelectLength,
    selectMonthLabel = _ref3.selectMonthLabel,
    selectYearLabel = _ref3.selectYearLabel;
  var opts = {
    locale: (0, _dateUtils.getLocale)(locale)
  };
  var leftViewedDate = viewedDate;
  var rightViewedDate = (0, _dateFns.addMonths)(leftViewedDate, 1);
  var ariaLabelPreviousText = ariaLabelPrevious.replace('{date}', (0, _format.default)((0, _dateFns.subMonths)(viewedDate, 1), 'MMMM yyyy', opts));
  var ariaLabelNextText = ariaLabelNext.replace('{date}', (0, _format.default)((0, _dateFns.addMonths)(viewedDate, 1), 'MMMM yyyy', opts));
  return _react.default.createElement(_.Flexbox, {
    container: true,
    justifyContent: "space-between"
  }, _react.default.createElement(YearMonthContainer, {
    container: true,
    justifyContent: "center",
    flex: "1"
  }, _react.default.createElement(ChevronContainer, {
    mt: 1,
    $align: "left"
  }, _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,
    item: true
  }, _react.default.createElement(_SelectMonth.default, {
    id: "".concat(id, "-left"),
    locale: locale,
    viewedDate: leftViewedDate,
    onChange: onMonthChange,
    selectMonthLabel: selectMonthLabel
  }), _react.default.createElement(_SelectYear.default, {
    id: "".concat(id, "-left"),
    locale: locale,
    viewedDate: leftViewedDate,
    years: yearSelectLength,
    onChange: onYearChange,
    selectYearLabel: selectYearLabel
  }))), _react.default.createElement(YearMonthContainer, {
    container: true,
    justifyContent: "center",
    flex: "1"
  }, _react.default.createElement(_.Flexbox, {
    container: true,
    item: true
  }, _react.default.createElement(_SelectMonth.default, {
    id: "".concat(id, "-right"),
    locale: locale,
    viewedDate: rightViewedDate,
    onChange: onMonthChange,
    selectMonthLabel: selectMonthLabel
  }), _react.default.createElement(_SelectYear.default, {
    id: "".concat(id, "-right"),
    locale: locale,
    viewedDate: rightViewedDate,
    years: yearSelectLength,
    onChange: onYearChange,
    selectYearLabel: selectYearLabel
  })), _react.default.createElement(ChevronContainer, {
    $align: "right",
    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 = DoubleHeader;