import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import React from 'react';
import Alert from 'antd/es/alert';
import 'antd/es/alert/style';
import Spin from 'antd/es/spin';
import 'antd/es/spin/style';
import './index.less';
var Styles = {
  strokeColor: '#00bcd4',
  defaultFillColor: '#e6f7ff',
  textColor: '#595959',
  arrowFillColor: '#00bcd4',
  rectangleFillColor: '#fff',
  rectangleDotFillColor: '#fff',
  functionFillColor: '#fff',
  rootCircleFillColor: '#fff',
  loopFillColor: '#fff',
  conditionFillColor: '#fff',
  destructedNodeFillColor: '#fff',
  classFillColor: '#fff',
  debuggerFillColor: '#fff',
  exportFillColor: '#e6f7ff',
  throwFillColor: '#fff',
  tryFillColor: '#fff',
  objectFillColor: '#fff',
  callFillColor: '#fff',
  debugModeFillColor: '#fff'
};

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

  function FlowChartTab(props) {
    var _this;

    _classCallCheck(this, FlowChartTab);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(FlowChartTab).call(this, props));
    _this.state = {
      isSupported: props.language === 'javascript'
    };
    return _this;
  }

  _createClass(FlowChartTab, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      if (!this.state.isSupported) {
        return;
      }

      import(
      /* webpackChunkName: "js2flowchart" */
      'js2flowchart').then(function (_ref) {
        var createSVGRender = _ref.createSVGRender,
            convertCodeToFlowTree = _ref.convertCodeToFlowTree;
        _this2.svgRender = createSVGRender();

        _this2.svgRender.applyColorBasedTheme(Styles);

        _this2.convertCodeToFlowTree = convertCodeToFlowTree;

        _this2.setState({
          ready: true
        });
      });
    }
  }, {
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate() {
      return this.props.active;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$state = this.state,
          ready = _this$state.ready,
          isSupported = _this$state.isSupported;

      if (!isSupported) {
        return React.createElement(Alert, {
          message: 'FlowChart supported for JavaScript code only',
          type: "warning",
          description: "You can file an issue here https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart. Thank you ;)",
          showIcon: true
        });
      }

      if (!ready) {
        return React.createElement("div", {
          className: 'FlowChartLoading'
        }, React.createElement(Spin, null));
      }

      var svgXml = '';

      try {
        var flowTree = this.convertCodeToFlowTree(this.props.fileCode || '');
        svgXml = this.svgRender.buildShapesTree(flowTree).print();
      } catch (e) {
        return React.createElement(Alert, {
          message: 'Oppss.. AST parser failed to parse your code. That dude..',
          type: "warning",
          description: "Well.. maybe a bug, you can file an issue here https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart. Thank you ;)",
          showIcon: true
        });
      }

      return React.createElement("div", {
        className: 'FlowChartTabContainer'
      }, React.createElement("div", {
        dangerouslySetInnerHTML: {
          __html: svgXml
        }
      }));
    }
  }]);

  return FlowChartTab;
}(React.Component);

export default FlowChartTab;