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 from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import * as actions from '../App/actions';
import * as selectors from '../App/selectors';
import ErrorMessage from './ErrorMessage';

var ErrorSection =
/*#__PURE__*/
function (_React$Component) {
  _inherits(ErrorSection, _React$Component);

  function ErrorSection(props) {
    var _this;

    _classCallCheck(this, ErrorSection);

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

    _this.renderError = function () {
      var _this$props = _this.props,
          error = _this$props.error,
          btnProps = _this$props.btnProps,
          updateStatus = _this$props.updateStatus; // attach clearing the error onClick

      if (btnProps) {
        var passedOnClick = btnProps.onClick;

        btnProps.onClick = function (event) {
          updateStatus({
            error: null
          });
          passedOnClick(event);
        };
      }

      return React.createElement(ErrorMessage, {
        error: error,
        btnProps: btnProps
      });
    };

    _this.state = {
      hasError: false
    };
    return _this;
  }

  _createClass(ErrorSection, [{
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var updateStatus = this.props.updateStatus;
      updateStatus({
        error: null
      });
    }
  }, {
    key: "componentDidCatch",
    value: function componentDidCatch() {// TODO: setup error logging service.... (Henry)
      // You can also log the error to an error reporting service
      // logErrorToMyService(error, info);
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          children = _this$props2.children,
          error = _this$props2.error;
      var hasError = this.state.hasError; // catches both local errors and api errors

      if (hasError || error) {
        return this.renderError();
      }

      return children;
    }
  }], [{
    key: "getDerivedStateFromError",
    value: function getDerivedStateFromError() {
      // Update state so the next render will show the fallback UI.
      return {
        hasError: true
      };
    }
  }]);

  return ErrorSection;
}(React.Component);

ErrorSection.defaultProps = {
  btnProps: undefined,
  children: null
};
export var mapStateToProps = createStructuredSelector({
  error: selectors.getError()
});
export var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    updateStatus: function updateStatus(props) {
      return dispatch(actions.updateStatus(props));
    }
  };
};
var withRedux = connect(mapStateToProps, mapDispatchToProps);
export default withRedux(ErrorSection);