"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _box = _interopRequireDefault(require("../box"));

var _select = require("../select");

var _input = require("../input");

var _theme = _interopRequireDefault(require("./theme.css"));

var _excluded = ["size"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

// 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 = (0, _react.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.default.createElement(_box.default, {
    className: _theme.default['caption']
  }, /*#__PURE__*/_react.default.createElement(_box.default, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/_react.default.createElement(_select.Select, {
    value: selectedMonth && locale && formatSelectMonthAndYear(selectedMonth, locale),
    className: _theme.default['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 = (0, _react.useState)(date && "".concat(date.getFullYear())),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      yearInput = _useState2[0],
      setYearInput = _useState2[1];

  var selectedMonth = (0, _react.useMemo)(function () {
    return date && localeUtils && {
      value: date.getMonth(),
      label: localeUtils.formatMonthTitle(date, locale)
    };
  }, [date]);
  var selectedYear = (0, _react.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));
  };

  (0, _react.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.default.createElement(_box.default, {
    className: _theme.default['caption']
  }, /*#__PURE__*/_react.default.createElement(_box.default, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/_react.default.createElement(_select.Select, {
    value: selectedMonth && formatSelectedMonth(selectedMonth),
    className: _theme.default['month-picker-field'],
    options: months,
    onChange: handleChangeMonth,
    width: size === 'small' ? '88px' : '112px',
    truncateOptionText: true,
    size: "small"
  }), /*#__PURE__*/_react.default.createElement(_input.NumericInput, {
    value: "".concat(yearInput),
    className: _theme.default['month-picker-field'],
    onChange: handleChangeYear,
    onBlur: handleYearBlur,
    width: size === 'small' ? '72px' : '80px',
    size: "small"
  })));
};

var MonthPicker = function MonthPicker(_ref5) {
  var size = _ref5.size,
      props = (0, _objectWithoutProperties2.default)(_ref5, _excluded);

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

  return /*#__PURE__*/_react.default.createElement(MonthPickerSplit, (0, _extends2.default)({
    size: size
  }, props));
};

var _default = MonthPicker;
exports.default = _default;