import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import React, { Component } from 'react';
import RadioButton from '../FieldRadioButtons/RadioButton';

var TimePicker =
/*#__PURE__*/
function (_Component) {
  _inherits(TimePicker, _Component);

  function TimePicker(props, context) {
    var _this;

    _classCallCheck(this, TimePicker);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(TimePicker).call(this, props, context));

    _this.reset = function () {
      _this.setState({
        hour: '',
        minute: '',
        timeOfDay: ''
      }, _this.updateReduxForm);
    };

    _this.updateFromReduxForm = function () {
      var input = _this.props.input;
      var fullTime = input.value;
      var matches = fullTime.split(/:| /);

      if (matches.length === 2) {
        _this.setState({
          hour: matches[0],
          minute: matches[1],
          timeOfDay: matches[2]
        });
      }
    };

    _this.updateReduxForm = function () {
      var input = _this.props.input;
      var _this$state = _this.state,
          hour = _this$state.hour,
          minute = _this$state.minute,
          timeOfDay = _this$state.timeOfDay; // only update if a valid value

      if (hour && minute && timeOfDay) {
        input.onChange("".concat(hour, ":").concat(minute, " ").concat(timeOfDay));
      }
    };

    _this.normalizeNumber = function (_ref) {
      var max = _ref.max,
          field = _ref.field;
      return function (event) {
        var value = event.target.value;
        var num = Number(value);
        var text = String(num);

        if (num < 10) {
          text = "0".concat(num);
        } else if (num > max) {
          text = text.substring(text.length - 2);
        }

        if (Number(text) <= max) {
          _this.setState(_defineProperty({}, field, text), _this.updateReduxForm);
        }
      };
    };

    _this.onChangeHour = function (event) {
      return _this.normalizeNumber({
        max: 12,
        field: 'hour'
      })(event);
    };

    _this.onChangeMinute = function (event) {
      return _this.normalizeNumber({
        max: 59,
        field: 'minute'
      })(event);
    };

    _this.onChangeTimeOfDay = function (value) {
      _this.setState({
        timeOfDay: value
      }, _this.updateReduxForm);
    };

    _this.renderTimeOfDay = function () {
      var timeOfDay = _this.state.timeOfDay;
      var checkProps = {
        input: {
          value: timeOfDay,
          onChange: _this.onChangeTimeOfDay
        }
      };
      return React.createElement("div", {
        className: 'radios third'
      }, React.createElement(RadioButton, Object.assign({
        value: 'am',
        label: 'am'
      }, checkProps)), React.createElement(RadioButton, Object.assign({
        value: 'pm',
        label: 'pm'
      }, checkProps)));
    };

    _this.state = {
      hour: '',
      minute: '',
      timeOfDay: ''
    };
    return _this;
  }

  _createClass(TimePicker, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.updateFromReduxForm();
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      // handle form resets
      if (!nextProps.input.value) {
        this.reset();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$state2 = this.state,
          hour = _this$state2.hour,
          minute = _this$state2.minute;
      return React.createElement("div", {
        className: 'time-picker'
      }, React.createElement("input", {
        onChange: this.onChangeHour,
        value: hour,
        className: 'form-control third',
        placeholder: 'hours'
      }), React.createElement("input", {
        onChange: this.onChangeMinute,
        value: minute,
        className: 'form-control third',
        placeholder: 'minutes'
      }), this.renderTimeOfDay(), React.createElement("div", {
        className: 'clearfix'
      }));
    }
  }]);

  return TimePicker;
}(Component);

export default TimePicker;