import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import React from "react";
import { styled } from "@material-ui/core/styles";
import * as colors from "@material-ui/core/colors";
import { detect } from "detect-browser";
import Button from "@material-ui/core/Button";
import LaunchIcon from "@material-ui/icons/Launch";
import Sentry from "../../utils/sentry.js";
var Container = styled("div")({
  width: "100vw",
  minHeight: "100vh",
  backgroundColor: colors.grey[900],
  padding: 32,
  "& .title": {
    color: colors.grey[200],
    fontSize: 24,
    fontWeight: "bold"
  },
  "& .subtitle": {
    color: colors.grey[300],
    fontSize: 18,
    marginTop: 8
  },
  "& .info": {
    width: "100%",
    boxSizing: "border-box",
    padding: 32,
    "& textarea": {
      width: "calc(100% - 64px)",
      boxSizing: "border-box",
      minHeight: 300,
      fontSize: 12
    }
  }
});
var Buttons = styled("div")({
  padding: 8
});
var StyledButton = styled(Button)({
  color: "#fff",
  borderColor: "rgba(255,255,255,0.5)",
  margin: 8
});

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

  var _super = _createSuper(ErrorBoundary);

  function ErrorBoundary(props) {
    var _this;

    _classCallCheck(this, ErrorBoundary);

    _this = _super.call(this, props);
    _this.state = {
      hasError: false
    };
    return _this;
  }

  _createClass(ErrorBoundary, [{
    key: "componentDidCatch",
    value: function componentDidCatch(error, errorInfo) {
      var _this2 = this;

      // You can also log the error to an error reporting service
      Sentry.withScope(function (scope) {
        scope.setExtras(errorInfo);
        var eventId = Sentry.captureException(error);

        _this2.setState({
          eventId: eventId
        });
      });
    }
  }, {
    key: "render",
    value: function render() {
      if (this.state.hasError) {
        // You can render any custom fallback UI
        return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement("div", {
          className: "title"
        }, "An error has occurred"), /*#__PURE__*/React.createElement("div", {
          className: "subtitle"
        }, "All the details are below:"), /*#__PURE__*/React.createElement("div", {
          className: "info"
        }, /*#__PURE__*/React.createElement("textarea", null, this.state.errorDetails)), /*#__PURE__*/React.createElement(Buttons, null, /*#__PURE__*/React.createElement(StyledButton, {
          variant: "outlined",
          target: "_blank",
          href: "https://github.com/Universal/universal-data-tool/issues"
        }, /*#__PURE__*/React.createElement(LaunchIcon, {
          style: {
            color: "#fff",
            marginRight: 8
          }
        }), " View Issues on Github"), /*#__PURE__*/React.createElement(StyledButton, {
          variant: "outlined",
          onClick: function onClick() {
            return window.location.reload();
          }
        }, "Reload (unsaved progress will be lost)")));
      }

      return this.props.children;
    }
  }], [{
    key: "getDerivedStateFromError",
    value: function getDerivedStateFromError(error) {
      // Update state so the next render will show the fallback UI.
      return {
        hasError: true,
        errorDetails: JSON.stringify(detect()) + "\n\n" + error.stack
      };
    }
  }]);

  return ErrorBoundary;
}(React.Component);

export default ErrorBoundary;