import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import _ from 'lodash';
import PropTypes from 'prop-types';
import { Block } from '../../Block';
import { TimeNumberEditor } from './TimeNumberEditor';
import { Row } from '../../Row';
import { Col } from '../../Col';
import { TimeAmPmEditor } from './TimeAmPmEditor';
var instanceCounter = 0;
export var TimePicker =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(TimePicker, _React$PureComponent);

  function TimePicker(props, ctx) {
    var _this;

    _this = _React$PureComponent.call(this, props, ctx) || this;

    _defineProperty(_assertThisInitialized(_this), "getMaxHour", function () {
      return _this.props.is24hour ? 23 : 11;
    });

    _defineProperty(_assertThisInitialized(_this), "onTimeEditorChange", function (updates) {
      var _this$props = _this.props,
          onChange = _this$props.onChange,
          value = _this$props.value;
      onChange(Object.assign({}, value, updates));
    });

    _defineProperty(_assertThisInitialized(_this), "onHoursChanges", function (hours) {
      _this.onTimeEditorChange({
        hours: hours
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleChangeMinutes", function (minutes) {
      if (minutes === -1) {
        minutes = 59;
      }

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

      _this.onTimeEditorChange({
        minutes: minutes
      });
    });

    _defineProperty(_assertThisInitialized(_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);
      }
    });

    _defineProperty(_assertThisInitialized(_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);
    });

    _defineProperty(_assertThisInitialized(_this), "handleStopPropagation", function (e) {
      return e.stopPropagation();
    });

    _defineProperty(_assertThisInitialized(_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.createElement(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.createElement("div", {
      className: "rc-datepicker-colon"
    }, React.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.createElement(Block, {
      className: "rc-datepicker-time-editor",
      addHorizontalOffset: true,
      addTopOffset: true,
      onKeyUp: this.handleStopPropagation,
      onFocus: onPanelFocus,
      role: "group",
      "aria-describedby": descriptionId
    }, React.createElement("p", {
      className: "sr-only",
      id: descriptionId
    }, ariaDescription), React.createElement(Row, null, React.createElement(Col, {
      sm: 3,
      md: 3,
      xs: 3
    }, React.createElement(TimeNumberEditor, {
      testAutomationId: "hoursEditor",
      decreaseButtonLabel: hourDecreaseBtnAriaLabel,
      increaseButtonLabel: hourIncreaseBtnAriaLabel,
      onShiftTabAwait: this.handleBackToCalendar,
      value: this.getHoursDisplayValue(),
      onChange: this.handleChangeHours,
      max: this.getMaxHour(),
      min: 0
    })), React.createElement(Col, {
      sm: 1,
      md: 1,
      xs: 1
    }, this.renderTimeColon()), React.createElement(Col, {
      sm: 3,
      md: 3,
      xs: 3
    }, React.createElement(TimeNumberEditor, {
      testAutomationId: "minutesEditor",
      increaseButtonLabel: minuteIncreaseBtnAriaLabel,
      decreaseButtonLabel: minuteDecreaseBtnAriaLabel,
      value: value.minutes,
      onChange: this.handleChangeMinutes,
      valueDisplayFormat: function valueDisplayFormat(value) {
        return _.padStart(value, 2, '0');
      },
      max: 11,
      min: 0
    })), React.createElement(Col, {
      sm: 3,
      md: 3,
      xs: 3
    }, is24hour ? null : this.renderAmPMSwitcher())));
  };

  return TimePicker;
}(React.PureComponent);

_defineProperty(TimePicker, "propTypes", {
  value: PropTypes.shape({
    hours: PropTypes.number,
    minutes: PropTypes.number
  }),
  onChange: PropTypes.func.isRequired,
  // function({minutes, hours}) {}
  is24hour: PropTypes.bool,
  onPanelFocus: PropTypes.func.isRequired,
  onBackToCalendar: PropTypes.func.isRequired,
  ariaDescription: PropTypes.string.isRequired,
  hourIncreaseBtnAriaLabel: PropTypes.string.isRequired,
  hourDecreaseBtnAriaLabel: PropTypes.string.isRequired,
  minuteIncreaseBtnAriaLabel: PropTypes.string.isRequired,
  minuteDecreaseBtnAriaLabel: PropTypes.string.isRequired,
  amAriaLabel: PropTypes.string.isRequired,
  pmAriaLabel: PropTypes.string.isRequired,
  amPmSwitcherLabel: PropTypes.string.isRequired,
  enablePMTitle: PropTypes.string.isRequired,
  enableAMTitle: PropTypes.string.isRequired
});

_defineProperty(TimePicker, "defaultProps", {
  value: {
    hours: 0,
    minutes: 0
  },
  is24hour: true
});