import React from 'react';
import styled from 'styled-components';
import format from 'date-fns/format';
import { addMonths, subMonths } from 'date-fns';
import { Box, Flexbox, Icon, Button } from '../../../..';
import { getLocale } from '../../shared/dateUtils';
import SelectMonth from '../../shared/components/SelectMonth';
import SelectYear from '../../shared/components/SelectYear';
var YearMonthContainer = styled(Flexbox).withConfig({
  displayName: "DoubleHeader__YearMonthContainer",
  componentId: "sc-6liufo-0"
})(["width:", "px;"], function (_ref) {
  var theme = _ref.theme;
  return theme.spacing.unit(76);
});
var ChevronContainer = styled(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: getLocale(locale)
  };
  var leftViewedDate = viewedDate;
  var rightViewedDate = addMonths(leftViewedDate, 1);
  var ariaLabelPreviousText = ariaLabelPrevious.replace('{date}', format(subMonths(viewedDate, 1), 'MMMM yyyy', opts));
  var ariaLabelNextText = ariaLabelNext.replace('{date}', format(addMonths(viewedDate, 1), 'MMMM yyyy', opts));
  return React.createElement(Flexbox, {
    container: true,
    justifyContent: "space-between"
  }, React.createElement(YearMonthContainer, {
    container: true,
    justifyContent: "center",
    flex: "1"
  }, React.createElement(ChevronContainer, {
    mt: 1,
    $align: "left"
  }, 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,
    item: true
  }, React.createElement(SelectMonth, {
    id: "".concat(id, "-left"),
    locale: locale,
    viewedDate: leftViewedDate,
    onChange: onMonthChange,
    selectMonthLabel: selectMonthLabel
  }), React.createElement(SelectYear, {
    id: "".concat(id, "-left"),
    locale: locale,
    viewedDate: leftViewedDate,
    years: yearSelectLength,
    onChange: onYearChange,
    selectYearLabel: selectYearLabel
  }))), React.createElement(YearMonthContainer, {
    container: true,
    justifyContent: "center",
    flex: "1"
  }, React.createElement(Flexbox, {
    container: true,
    item: true
  }, React.createElement(SelectMonth, {
    id: "".concat(id, "-right"),
    locale: locale,
    viewedDate: rightViewedDate,
    onChange: onMonthChange,
    selectMonthLabel: selectMonthLabel
  }), React.createElement(SelectYear, {
    id: "".concat(id, "-right"),
    locale: locale,
    viewedDate: rightViewedDate,
    years: yearSelectLength,
    onChange: onYearChange,
    selectYearLabel: selectYearLabel
  })), React.createElement(ChevronContainer, {
    $align: "right",
    mt: 1
  }, React.createElement(Button, {
    variant: "neutral",
    "aria-label": ariaLabelNextText,
    onClick: function onClick() {
      onMonthChange(viewedDate.getMonth() + 1);
    }
  }, React.createElement(Icon.ChevronRight16, null)))));
};
export default DoubleHeader;