"use strict";

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

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

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 _lodash = _interopRequireDefault(require("lodash"));

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

var _Block = require("../../Block");

var _TimeNumberEditor = require("./TimeNumberEditor");

var _Row = require("../../Row");

var _Col = require("../../Col");

var _TimeAmPmEditor = require("./TimeAmPmEditor");

var instanceCounter = 0;

var TimePicker =
/*#__PURE__*/
function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(TimePicker, _React$PureComponent);

  function TimePicker(props, ctx) {
    var _this;

    _this = _React$PureComponent.call(this, props, ctx) || this;
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getMaxHour", function () {
      return _this.props.is24hour ? 23 : 11;
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTimeEditorChange", function (updates) {
      var _this$props = _this.props,
          onChange = _this$props.onChange,
          value = _this$props.value;
      onChange(Object.assign({}, value, updates));
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onHoursChanges", function (hours) {
      _this.onTimeEditorChange({
        hours: hours
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChangeMinutes", function (minutes) {
      if (minutes === -1) {
        minutes = 59;
      }

      if (minutes === 60) {
        minutes = 0;
      }

      _this.onTimeEditorChange({
        minutes: minutes
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChangeAmPm", function (isSwitchToAM) {
      var isCurrentAmMode = _this.isAmMode();

      var isModeChanged = isSwitchToAM === !isCurrentAmMode;
      var value = _this.props.value;
      var oldHours = value.hours;
      var newHours = null;

      if (isModeChanged) {
        if (oldHours !== 12) {
          if (isSwitchToAM) {
            newHours = oldHours - 12;
          } else {
            newHours = oldHours + 12;
          }
        } else {
          newHours = 0;
        }
      }

      if (newHours !== null) {
        _this.onHoursChanges(newHours);
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChangeHours", function (newHours) {
      var hours = newHours;

      if (!_this.props.is24hour) {
        if (_this.isAmMode()) {
          if (hours > 11) {
            hours = 0;
          }

          if (hours < 0) {
            hours = 11;
          }
        } else {
          hours = newHours + 12;

          if (hours === 24) {
            hours = 12;
          }

          if (hours > 24) {
            hours = 13;
          }
        }
      }

      _this.onHoursChanges(hours);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleStopPropagation", function (e) {
      return e.stopPropagation();
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleBackToCalendar", function (e) {
      return _this.props.onBackToCalendar();
    });
    _this.instanceId = ++instanceCounter;
    return _this;
  }

  var _proto = TimePicker.prototype;

  _proto.isAmMode = function isAmMode() {
    var value = this.props.value;
    var hours = value.hours;
    return hours < 12;
  };

  _proto.renderAmPMSwitcher = function renderAmPMSwitcher() {
    var _this$props2 = this.props,
        amAriaLabel = _this$props2.amAriaLabel,
        pmAriaLabel = _this$props2.pmAriaLabel,
        enableAMTitle = _this$props2.enableAMTitle,
        enablePMTitle = _this$props2.enablePMTitle,
        amPmSwitcherLabel = _this$props2.amPmSwitcherLabel;
    var isAm = this.isAmMode();
    return _react.default.createElement(_TimeAmPmEditor.TimeAmPmEditor, {
      isAm: isAm,
      onAmPmChange: this.handleChangeAmPm,
      amLabel: amAriaLabel,
      pmLabel: pmAriaLabel,
      amPmSwitcherLabel: amPmSwitcherLabel,
      enableAMTitle: enableAMTitle,
      enablePMTitle: enablePMTitle
    });
  };

  _proto.getHoursDisplayValue = function getHoursDisplayValue() {
    var _this$props3 = this.props,
        value = _this$props3.value,
        is24hour = _this$props3.is24hour;

    if (is24hour || this.isAmMode() || value.hours === 12) {
      return value.hours;
    }

    return value.hours - 12;
  };

  _proto.renderTimeColon = function renderTimeColon() {
    return _react.default.createElement("div", {
      className: "rc-datepicker-colon"
    }, _react.default.createElement("div", {
      className: "time-text text-center"
    }, ":"));
  };

  _proto.render = function render() {
    var _this$props4 = this.props,
        value = _this$props4.value,
        onPanelFocus = _this$props4.onPanelFocus,
        is24hour = _this$props4.is24hour,
        ariaDescription = _this$props4.ariaDescription,
        hourIncreaseBtnAriaLabel = _this$props4.hourIncreaseBtnAriaLabel,
        hourDecreaseBtnAriaLabel = _this$props4.hourDecreaseBtnAriaLabel,
        minuteDecreaseBtnAriaLabel = _this$props4.minuteDecreaseBtnAriaLabel,
        minuteIncreaseBtnAriaLabel = _this$props4.minuteIncreaseBtnAriaLabel;
    var descriptionId = "time-picker-description-" + this.instanceId;
    return _react.default.createElement(_Block.Block, {
      className: "rc-datepicker-time-editor",
      addHorizontalOffset: true,
      addTopOffset: true,
      onKeyUp: this.handleStopPropagation,
      onFocus: onPanelFocus,
      role: "group",
      "aria-describedby": descriptionId
    }, _react.default.createElement("p", {
      className: "sr-only",
      id: descriptionId
    }, ariaDescription), _react.default.createElement(_Row.Row, null, _react.default.createElement(_Col.Col, {
      sm: 3,
      md: 3,
      xs: 3
    }, _react.default.createElement(_TimeNumberEditor.TimeNumberEditor, {
      testAutomationId: "hoursEditor",
      decreaseButtonLabel: hourDecreaseBtnAriaLabel,
      increaseButtonLabel: hourIncreaseBtnAriaLabel,
      onShiftTabAwait: this.handleBackToCalendar,
      value: this.getHoursDisplayValue(),
      onChange: this.handleChangeHours,
      max: this.getMaxHour(),
      min: 0
    })), _react.default.createElement(_Col.Col, {
      sm: 1,
      md: 1,
      xs: 1
    }, this.renderTimeColon()), _react.default.createElement(_Col.Col, {
      sm: 3,
      md: 3,
      xs: 3
    }, _react.default.createElement(_TimeNumberEditor.TimeNumberEditor, {
      testAutomationId: "minutesEditor",
      increaseButtonLabel: minuteIncreaseBtnAriaLabel,
      decreaseButtonLabel: minuteDecreaseBtnAriaLabel,
      value: value.minutes,
      onChange: this.handleChangeMinutes,
      valueDisplayFormat: function valueDisplayFormat(value) {
        return _lodash.default.padStart(value, 2, '0');
      },
      max: 11,
      min: 0
    })), _react.default.createElement(_Col.Col, {
      sm: 3,
      md: 3,
      xs: 3
    }, is24hour ? null : this.renderAmPMSwitcher())));
  };

  return TimePicker;
}(_react.default.PureComponent);

exports.TimePicker = TimePicker;
(0, _defineProperty2.default)(TimePicker, "propTypes", {
  value: _propTypes.default.shape({
    hours: _propTypes.default.number,
    minutes: _propTypes.default.number
  }),
  onChange: _propTypes.default.func.isRequired,
  // function({minutes, hours}) {}
  is24hour: _propTypes.default.bool,
  onPanelFocus: _propTypes.default.func.isRequired,
  onBackToCalendar: _propTypes.default.func.isRequired,
  ariaDescription: _propTypes.default.string.isRequired,
  hourIncreaseBtnAriaLabel: _propTypes.default.string.isRequired,
  hourDecreaseBtnAriaLabel: _propTypes.default.string.isRequired,
  minuteIncreaseBtnAriaLabel: _propTypes.default.string.isRequired,
  minuteDecreaseBtnAriaLabel: _propTypes.default.string.isRequired,
  amAriaLabel: _propTypes.default.string.isRequired,
  pmAriaLabel: _propTypes.default.string.isRequired,
  amPmSwitcherLabel: _propTypes.default.string.isRequired,
  enablePMTitle: _propTypes.default.string.isRequired,
  enableAMTitle: _propTypes.default.string.isRequired
});
(0, _defineProperty2.default)(TimePicker, "defaultProps", {
  value: {
    hours: 0,
    minutes: 0
  },
  is24hour: true
});