import React from 'react';
import format from 'date-fns/format';
import sub from 'date-fns/sub';
import add from 'date-fns/add';
import { Box, Button, Flexbox, Icon } from '../../../..';
import { getLocale } from '../../shared/dateUtils';
import SelectMonth from '../../shared/components/SelectMonth';
import SelectYear from '../../shared/components/SelectYear';
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: getLocale(locale)
  };
  var ariaLabelPreviousText = ariaLabelPrevious.replace('{date}', format(sub(viewedDate || new Date(), {
    months: 1
  }), 'MMMM yyyy', opts));
  var ariaLabelNextText = ariaLabelNext.replace('{date}', format(add(viewedDate || new Date(), {
    months: 1
  }), 'MMMM yyyy', opts));
  return React.createElement(Box, {
    pb: 1
  }, React.createElement(Flexbox, {
    container: true,
    justifyContent: "space-between"
  }, React.createElement(Flexbox, {
    item: true
  }, React.createElement(Box, {
    mt: 1
  }, React.createElement(Button, {
    variant: "neutral",
    "aria-label": ariaLabelPreviousText,
    onClick: function onClick() {
      onMonthChange(viewedDate.getMonth() - 1);
    }
  }, React.createElement(Icon.ChevronLeft16, null)))), React.createElement(Flexbox, {
    container: true
  }, React.createElement(Flexbox, {
    item: true
  }, React.createElement(SelectMonth, {
    id: id,
    locale: locale,
    viewedDate: viewedDate,
    onChange: onMonthChange,
    fullscreenMode: fullscreenMode,
    selectMonthLabel: selectMonthLabel
  })), React.createElement(Flexbox, {
    item: true
  }, React.createElement(SelectYear, {
    id: id,
    locale: locale,
    viewedDate: viewedDate,
    years: yearSelectLength,
    onChange: onYearChange,
    fullscreenMode: fullscreenMode,
    selectYearLabel: selectYearLabel
  }))), React.createElement(Flexbox, {
    item: true
  }, React.createElement(Box, {
    mt: 1
  }, React.createElement(Button, {
    variant: "neutral",
    "aria-label": ariaLabelNextText,
    onClick: function onClick() {
      onMonthChange(viewedDate.getMonth() + 1);
    }
  }, React.createElement(Icon.ChevronRight16, null))))));
};
export default Header;