import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["size"];
import React, { useMemo, useState, useEffect } from 'react';
import Box from '../box';
import { Select } from '../select';
import { NumericInput } from '../input';
import theme from './theme.css';

// We want all the months from current month to current month in next year
var getMonthOptions = function getMonthOptions(localeUtils, locale) {
  var currentYear = new Date().getFullYear();
  var currentMonth = new Date().getMonth();
  var monthOptions = [];

  for (var i = currentMonth; i <= 13; i++) {
    var currentMonthInYear = i % 12;

    if (currentMonthInYear === 0) {
      currentYear++;
    }

    var monthOption = new Date(currentYear, currentMonthInYear);
    monthOptions.push({
      value: monthOption,
      label: localeUtils.formatMonthTitle(monthOption, locale)
    });
  }

  return monthOptions;
}; // e.g. "February 2020" => "February"


var formatSelectedMonth = function formatSelectedMonth(_ref) {
  var label = _ref.label,
      value = _ref.value;
  return {
    value: value,
    label: label.split(' ')[0]
  };
}; // e.g. "February 2020" => "Feb 2020"
// Exception for French language: we use 4 characters


var formatSelectMonthAndYear = function formatSelectMonthAndYear(_ref2, locale) {
  var label = _ref2.label,
      value = _ref2.value;
  var isFrench = locale === 'fr' || locale.startsWith('fr-');
  return {
    value: value,
    label: isFrench ? label.replace(/(\w{4})\w+\s(\d{4})/, '$1 $2') : label.replace(/(\w{3})\w+\s(\d{4})/, '$1 $2')
  };
};

var MonthPickerUnary = function MonthPickerUnary(_ref3) {
  var date = _ref3.date,
      locale = _ref3.locale,
      localeUtils = _ref3.localeUtils,
      onChange = _ref3.onChange;
  var selectedMonth = useMemo(function () {
    return date && localeUtils && {
      value: date.getMonth().toString(),
      label: localeUtils.formatMonthTitle(date, locale)
    };
  }, [date]);

  var handleChangeMonth = function handleChangeMonth(selectedMonth) {
    onChange && onChange(selectedMonth.value);
  };

  return /*#__PURE__*/React.createElement(Box, {
    className: theme['caption']
  }, /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/React.createElement(Select, {
    value: selectedMonth && locale && formatSelectMonthAndYear(selectedMonth, locale),
    className: theme['month-picker-field'],
    options: localeUtils && locale && getMonthOptions(localeUtils, locale),
    onChange: handleChangeMonth,
    width: "112px",
    size: "small"
  })));
};

var MonthPickerSplit = function MonthPickerSplit(_ref4) {
  var date = _ref4.date,
      locale = _ref4.locale,
      localeUtils = _ref4.localeUtils,
      onChange = _ref4.onChange,
      size = _ref4.size;

  var _useState = useState(date && "".concat(date.getFullYear())),
      _useState2 = _slicedToArray(_useState, 2),
      yearInput = _useState2[0],
      setYearInput = _useState2[1];

  var selectedMonth = useMemo(function () {
    return date && localeUtils && {
      value: date.getMonth(),
      label: localeUtils.formatMonthTitle(date, locale)
    };
  }, [date]);
  var selectedYear = useMemo(function () {
    return date && date.getFullYear();
  }, [date]);
  var months = localeUtils && localeUtils.getMonths(locale).map(function (monthName, index) {
    return {
      value: index,
      label: monthName
    };
  });

  var handleChangeMonth = function handleChangeMonth(selectedMonth) {
    onChange && selectedYear && onChange(new Date(selectedYear, selectedMonth.value));
  };

  useEffect(function () {
    setYearInput(date && "".concat(date.getFullYear()));
  }, [date]);

  var handleChangeYear = function handleChangeYear(_, selectedYear) {
    setYearInput(selectedYear);

    if ("".concat(selectedYear).match(/\d{4}/)) {
      onChange && selectedMonth && onChange(new Date(selectedYear, selectedMonth.value));
    }
  };

  var handleYearBlur = function handleYearBlur() {
    setYearInput(date && "".concat(date.getFullYear()));
  };

  return /*#__PURE__*/React.createElement(Box, {
    className: theme['caption']
  }, /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/React.createElement(Select, {
    value: selectedMonth && formatSelectedMonth(selectedMonth),
    className: theme['month-picker-field'],
    options: months,
    onChange: handleChangeMonth,
    width: size === 'small' ? '88px' : '112px',
    truncateOptionText: true,
    size: "small"
  }), /*#__PURE__*/React.createElement(NumericInput, {
    value: "".concat(yearInput),
    className: theme['month-picker-field'],
    onChange: handleChangeYear,
    onBlur: handleYearBlur,
    width: size === 'small' ? '72px' : '80px',
    size: "small"
  })));
};

var MonthPicker = function MonthPicker(_ref5) {
  var size = _ref5.size,
      props = _objectWithoutProperties(_ref5, _excluded);

  if (size === 'smallest') {
    return /*#__PURE__*/React.createElement(MonthPickerUnary, props);
  }

  return /*#__PURE__*/React.createElement(MonthPickerSplit, _extends({
    size: size
  }, props));
};

export default MonthPicker;