"use strict";

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

exports.__esModule = true;
exports.DatePickerBase = void 0;

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

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

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

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _FormControl2 = _interopRequireDefault(require("react-bootstrap/lib/FormControl"));

var _classnames = _interopRequireDefault(require("classnames"));

var _Icon = require("../../Icon");

var _lodash = _interopRequireDefault(require("lodash"));

var _datePickerHelpers = require("./datePickerHelpers");

var _FormControl3 = require("../FormControl");

var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));

var _constants = require("../../../../utils/constants");

var _utils = require("../../../../utils");

var _functions = require("../../../utils/functions");

var toFnWithDate = function toFnWithDate(str) {
  return function (_ref) {
    var date = _ref.date;
    return (0, _utils.translate)(str, {
      date: date
    });
  };
};

var instanceCounter = 0;
var WAIT_TIME_OUT_WHEN_BLUR = 150;

var DatePickerBase =
/*#__PURE__*/
function (_FormControl) {
  (0, _inheritsLoose2.default)(DatePickerBase, _FormControl);

  function DatePickerBase(props, ctx) {
    var _this;

    _this = _FormControl.call(this, props, ctx) || this;
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calendarContainer", null);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", _lodash.default.throttle(function (event) {
      switch (event.key) {
        case _constants.KeyNames.ArrowDown:
          _this.onInputKeyDownArrowDown();

          break;

        case _constants.KeyNames.Escape:
        case _constants.KeyNames.Tab:
          _this.closeDayPicker();

          break;

        default:
          break;
      }
    }));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCalendarKeyUp", _lodash.default.throttle(function (event) {
      if (event.key === _constants.KeyNames.Escape) {
        _this.closeDayPicker();

        _this.focusToInput();
      }
    }));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isPreventCloseDayPickerOnBlur", false);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputKeyDownArrowDown", function () {
      _this.showDayPicker();

      _this.focusOnDateCell();
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusOnDateCell", function () {
      return _this.setStatePromise({
        isDayPickerFocused: false
      }).then(function () {
        return _this.setStatePromise({
          isDayPickerFocused: true
        });
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "blurDateCell", function () {
      return _this.setStatePromise({
        isDayPickerFocused: false
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setStatePromise", function (state) {
      return new Promise(function (resolve) {
        _this.setState(state, resolve);
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "showDayPicker", function () {
      if (!_this.state.isDayPickerVisible) {
        _this.setState({
          isDayPickerVisible: true,
          isDayPickerFocused: false
        });
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFocusInput", function () {
      var isInputFocusedFromOutside = _this.state.isInputFocusedFromOutside;

      if (isInputFocusedFromOutside) {
        _this.showDayPicker();
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleToggleDayPickerDisplay", function (e) {
      if (!_lodash.default.isEmpty(e)) {
        e.stopPropagation();
      }

      var isDayPickerVisible = _this.state.isDayPickerVisible;

      if (isDayPickerVisible) {
        _this.closeDayPicker();
      } else {
        _this.showDayPicker();
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isFocusedInsideDayPickerContainer", function () {
      return (0, _datePickerHelpers.isElementFocused)(_this.calendarContainer);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusToInput", function () {
      return _this.focus();
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleBlurDatePickerControl", function () {
      (0, _functions.wait)(WAIT_TIME_OUT_WHEN_BLUR).then(function () {
        if (!_this.isPreventCloseDayPickerOnBlur && !_this.isFocusedInsideDayPickerContainer()) {
          _this.toggleIsInputFocusedFromOutside(true);

          _this.closeDayPicker();
        }
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleIsInputFocusedFromOutside", function (isInputFocusedFromOutside) {
      return _this.setStatePromise({
        isInputFocusedFromOutside: isInputFocusedFromOutside
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseDownPreventCloseDayPicker", function () {
      _this.isPreventCloseDayPickerOnBlur = true;
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCloseDayPickerOnBlur", function () {
      _this.isPreventCloseDayPickerOnBlur = false;
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setContainerRef", function (el) {
      return _this.calendarContainer = el;
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOutsideClick", function () {
      _this.toggleIsInputFocusedFromOutside(true);

      _this.closeDayPicker();
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getDisplayValue", function () {
      return null;
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseUpDayPickerContainer", function () {});
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handlePreventDefault", function (e) {
      return e.preventDefault();
    });
    _this.state = {
      isDayPickerFocused: false,
      isDayPickerVisible: false,
      isPreventDayPickerClosed: false,
      isInputFocusedFromOutside: true
    };
    _this.instanceId = instanceCounter++;
    return _this;
  }

  var _proto = DatePickerBase.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var _this2 = this;

    this.setState({
      isInputFocusedFromOutside: true
    });
    this.calendarContainer.addEventListener('keydown', function (event) {
      if (_this2.state.isDayPickerVisible && event.key === _constants.KeyNames.Escape) {
        event.stopPropagation();
      }
    });
  };

  _proto.closeDayPicker = function closeDayPicker() {
    return this.setStatePromise({
      isDayPickerVisible: false,
      isDayPickerFocused: false
    });
  };

  /** @abstract */
  _proto.getDatePickerContainerClassName = function getDatePickerContainerClassName() {
    return '';
  }
  /** @abstract */
  ;

  _proto.renderDatePicker = function renderDatePicker() {
    return null;
  }
  /** @abstract */
  ;

  /** @abstract */
  _proto.getPhrases = function getPhrases() {
    var _this$props$dayPicker = this.props.dayPickerPhrase,
        calendarLabel = _this$props$dayPicker.calendarLabel,
        closeDatePicker = _this$props$dayPicker.closeDatePicker,
        focusStartDate = _this$props$dayPicker.focusStartDate,
        clearDate = _this$props$dayPicker.clearDate,
        clearDates = _this$props$dayPicker.clearDates,
        jumpToPrevMonth = _this$props$dayPicker.jumpToPrevMonth,
        jumpToNextMonth = _this$props$dayPicker.jumpToNextMonth,
        keyboardShortcuts = _this$props$dayPicker.keyboardShortcuts,
        showKeyboardShortcutsPanel = _this$props$dayPicker.showKeyboardShortcutsPanel,
        hideKeyboardShortcutsPanel = _this$props$dayPicker.hideKeyboardShortcutsPanel,
        openThisPanel = _this$props$dayPicker.openThisPanel,
        enterKey = _this$props$dayPicker.enterKey,
        leftArrowRightArrow = _this$props$dayPicker.leftArrowRightArrow,
        upArrowDownArrow = _this$props$dayPicker.upArrowDownArrow,
        pageUpPageDown = _this$props$dayPicker.pageUpPageDown,
        homeEnd = _this$props$dayPicker.homeEnd,
        escape = _this$props$dayPicker.escape,
        questionMark = _this$props$dayPicker.questionMark,
        selectFocusedDate = _this$props$dayPicker.selectFocusedDate,
        moveFocusByOneDay = _this$props$dayPicker.moveFocusByOneDay,
        moveFocusByOneWeek = _this$props$dayPicker.moveFocusByOneWeek,
        moveFocusByOneMonth = _this$props$dayPicker.moveFocusByOneMonth,
        moveFocustoStartAndEndOfWeek = _this$props$dayPicker.moveFocustoStartAndEndOfWeek,
        returnFocusToInput = _this$props$dayPicker.returnFocusToInput,
        keyboardNavigationInstructions = _this$props$dayPicker.keyboardNavigationInstructions,
        chooseAvailableDate = _this$props$dayPicker.chooseAvailableDate,
        chooseAvailableStartDate = _this$props$dayPicker.chooseAvailableStartDate,
        chooseAvailableEndDate = _this$props$dayPicker.chooseAvailableEndDate,
        dateIsUnavailable = _this$props$dayPicker.dateIsUnavailable,
        dateIsSelected = _this$props$dayPicker.dateIsSelected;
    var phrases = {
      calendarLabel: calendarLabel,
      closeDatePicker: closeDatePicker,
      focusStartDate: focusStartDate,
      clearDate: clearDate,
      clearDates: clearDates,
      jumpToPrevMonth: jumpToPrevMonth,
      jumpToNextMonth: jumpToNextMonth,
      keyboardShortcuts: keyboardShortcuts,
      showKeyboardShortcutsPanel: showKeyboardShortcutsPanel,
      hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel,
      openThisPanel: openThisPanel,
      enterKey: enterKey,
      leftArrowRightArrow: leftArrowRightArrow,
      upArrowDownArrow: upArrowDownArrow,
      pageUpPageDown: pageUpPageDown,
      homeEnd: homeEnd,
      escape: escape,
      questionMark: questionMark,
      selectFocusedDate: selectFocusedDate,
      moveFocusByOneDay: moveFocusByOneDay,
      moveFocusByOneWeek: moveFocusByOneWeek,
      moveFocusByOneMonth: moveFocusByOneMonth,
      moveFocustoStartAndEndOfWeek: moveFocustoStartAndEndOfWeek,
      returnFocusToInput: returnFocusToInput,
      keyboardNavigationInstructions: keyboardNavigationInstructions,
      chooseAvailableDate: toFnWithDate(chooseAvailableDate),
      chooseAvailableStartDate: toFnWithDate(chooseAvailableStartDate),
      chooseAvailableEndDate: toFnWithDate(chooseAvailableEndDate),
      dateIsUnavailable: toFnWithDate(dateIsUnavailable),
      dateIsSelected: toFnWithDate(dateIsSelected)
    };

    _lodash.default.forEach(phrases, function (value, key) {
      if (value === undefined) {
        phrases[key] = DatePickerBase.defaultProps[key];
      }
    });

    return phrases;
  }
  /** @abstract */
  ;

  _proto.render = function render() {
    var _this$props = this.props,
        testAutomationId = _this$props.testAutomationId,
        disabled = _this$props.disabled,
        inputProps = _this$props.inputProps,
        dayPickerPhrase = _this$props.dayPickerPhrase,
        ariaLabel = _this$props.ariaLabel;
    var keyboardNavigationInstructions = dayPickerPhrase.keyboardNavigationInstructions;
    var ariaDescribeId = "date-picker-input-describe-message-" + this.instanceId;
    return _react.default.createElement(_reactOutsideClickHandler.default, {
      onOutsideClick: this.handleOutsideClick
    }, _react.default.createElement("div", {
      ref: this.setContainerRef,
      "data-test-automation-id": testAutomationId,
      className: (0, _classnames.default)('rc-datepicker', {
        'rc-datepicker-disabled': disabled
      }),
      onMouseDown: this.handleMouseDownPreventCloseDayPicker,
      onKeyDown: this.handleCloseDayPickerOnBlur,
      onKeyUp: this.handleCloseDayPickerOnBlur,
      onBlur: this.handleBlurDatePickerControl
    }, _react.default.createElement(_Icon.Icon, {
      name: "calendar",
      onClick: this.handleToggleDayPickerDisplay
    }), _react.default.createElement(_FormControl2.default, (0, _extends2.default)({
      onKeyDown: this.onKeyDown,
      onFocus: this.handleFocusInput,
      type: "text",
      ref: "input",
      value: this.getDisplayValue(),
      onChange: this.handlePreventDefault,
      "aria-describedby": ariaDescribeId,
      "aria-label": ariaLabel
    }, inputProps)), _react.default.createElement("p", {
      className: "sr-only",
      id: ariaDescribeId
    }, keyboardNavigationInstructions), _react.default.createElement("div", {
      "data-test-automation-id": "datePickerContainer",
      className: "rc-datepicker-container " + this.getDatePickerContainerClassName(),
      onKeyUp: this.onCalendarKeyUp,
      onMouseUp: this.handleMouseUpDayPickerContainer
    }, this.renderDatePicker())));
  };

  return DatePickerBase;
}(_FormControl3.FormControl);

exports.DatePickerBase = DatePickerBase;
(0, _defineProperty2.default)(DatePickerBase, "propTypes", Object.assign({}, _FormControl3.FormControl.propTypes, {
  inputProps: _propTypes.default.object,
  ariaLabel: _propTypes.default.string,
  disabled: _propTypes.default.bool,
  testAutomationId: _propTypes.default.string.isRequired,
  dayPickerPhrase: _propTypes.default.object
}));
(0, _defineProperty2.default)(DatePickerBase, "defaultProps", Object.assign({}, _FormControl3.FormControl.defaultProps, {
  ariaLabel: null,
  dayPickerPhrase: {
    calendarLabel: 'TRANSLATE:DATEPICKER_PHRASE_CALENDAR_LABEL',
    closeDatePicker: 'TRANSLATE:DATEPICKER_PHRASE_CLOSE_DATE_PICKER',
    focusStartDate: 'TRANSLATE:DATEPICKER_PHRASE_FOCUS_START_DATE',
    clearDate: 'TRANSLATE:DATEPICKER_PHRASE_CLEAR_DATE',
    clearDates: 'TRANSLATE:DATEPICKER_PHRASE_CLEAR_DATES',
    jumpToPrevMonth: 'TRANSLATE:DATEPICKER_PHRASE_JUMP_TO_PREV_MONTH',
    jumpToNextMonth: 'TRANSLATE:DATEPICKER_PHRASE_JUMP_TO_NEXT_MONTH',
    keyboardShortcuts: 'TRANSLATE:DATEPICKER_PHRASE_KEYBOARD_SHORTCUTS',
    showKeyboardShortcutsPanel: 'TRANSLATE:DATEPICKER_PHRASE_SHOW_KEYBOARD_SHORTCUTS_PANEL',
    hideKeyboardShortcutsPanel: 'TRANSLATE:DATEPICKER_PHRASE_HIDE_KEYBOARD_SHORTCUTS_PANEL',
    openThisPanel: 'TRANSLATE:DATEPICKER_PHRASE_OPEN_THIS_PANEL',
    enterKey: 'TRANSLATE:DATEPICKER_PHRASE_ENTER_KEY',
    leftArrowRightArrow: 'TRANSLATE:DATEPICKER_PHRASE_LEFT_ARROW_RIGHT_ARROW',
    upArrowDownArrow: 'TRANSLATE:DATEPICKER_PHRASE_UP_ARROW_DOWN_ARROW',
    pageUpPageDown: 'TRANSLATE:DATEPICKER_PHRASE_PAGE_UP_PAGE_DOWN',
    homeEnd: 'TRANSLATE:DATEPICKER_PHRASE_HOME_END',
    escape: 'TRANSLATE:DATEPICKER_PHRASE_ESCAPE',
    questionMark: 'TRANSLATE:DATEPICKER_PHRASE_QUESTION_MARK',
    selectFocusedDate: 'TRANSLATE:DATEPICKER_PHRASE_SELECT_FOCUSED_DATE',
    moveFocusByOneDay: 'TRANSLATE:DATEPICKER_PHRASE_MOVE_FOCUS_BY_ONE_DAY',
    moveFocusByOneWeek: 'TRANSLATE:DATEPICKER_PHRASE_MOVE_FOCUS_BY_ONE_WEEK',
    moveFocusByOneMonth: 'TRANSLATE:DATEPICKER_PHRASE_MOVE_FOCUS_BY_ONE_MONTH',
    moveFocustoStartAndEndOfWeek: 'TRANSLATE:DATEPICKER_PHRASE_MOVE_FOCUSTO_START_AND_END_OF_WEEK',
    returnFocusToInput: 'TRANSLATE:DATEPICKER_PHRASE_RETURN_FOCUS_TO_INPUT',
    keyboardNavigationInstructions: 'TRANSLATE:DATEPICKER_PHRASE_KEYBOARD_NAVIGATION_INSTRUCTIONS',
    chooseAvailableDate: 'TRANSLATE:DATEPICKER_PHRASE_CHOOSE_AVAILABLE_DATE',
    chooseAvailableStartDate: 'TRANSLATE:DATEPICKER_PHRASE_CHOOSE_AVAILABLE_START_DATE',
    chooseAvailableEndDate: 'TRANSLATE:DATEPICKER_PHRASE_CHOOSE_AVAILABLE_ENDDATE',
    dateIsUnavailable: 'TRANSLATE:DATEPICKER_PHRASE_DATE_IS_UNAVAILABLE',
    dateIsSelected: 'TRANSLATE:DATEPICKER_PHRASE_DATE_IS_SELECTED'
  }
}));