"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactRedux = require("react-redux");
var _styledComponents = require("styled-components");
var _d3StateVisualizer = require("d3-state-visualizer");
var _ChartMonitorWrapper = require("../ChartMonitorWrapper");
var _actions = require("../../../actions");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const style = {
  width: '100%',
  height: '100%'
};
class ChartTab extends _react.Component {
  // eslint-disable-next-line @typescript-eslint/ban-types

  shouldComponentUpdate() {
    return false;
  }
  componentDidMount() {
    this.createChart(this.props);
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.theme.scheme !== nextProps.theme.scheme || nextProps.theme.light !== this.props.theme.light) {
      this.node.innerHTML = '';
      this.createChart(nextProps);
    } else if (nextProps.data !== this.props.data) {
      // eslint-disable-next-line @typescript-eslint/ban-types
      this.renderChart(nextProps.data);
    }
  }
  getRef = node => {
    this.node = node;
  };
  createChart(props) {
    this.renderChart = (0, _d3StateVisualizer.tree)(this.node, this.getChartTheme(props.theme));
    // eslint-disable-next-line @typescript-eslint/ban-types
    this.renderChart(props.data);
  }
  getChartTheme(theme) {
    return {
      heightBetweenNodesCoeff: 1,
      widthBetweenNodesCoeff: 1.3,
      tooltipOptions: {
        styles: {
          color: theme.base06,
          'background-color': theme.base01,
          opacity: '0.9',
          'border-radius': '5px',
          padding: '5px'
        },
        offset: {
          left: 30,
          top: 10
        },
        indentationSize: 2
      },
      chartStyles: {
        width: '100%',
        height: '100%'
      },
      nodeStyleOptions: {
        colors: {
          default: theme.base0B,
          collapsed: theme.base0B,
          parent: theme.base0E
        },
        radius: 7
      },
      textStyleOptions: {
        colors: {
          default: theme.base0D,
          hover: theme.base06
        }
      },
      onClickText: this.onClickText
    };
  }
  onClickText = data => {
    const inspectedStatePath = [];
    (0, _ChartMonitorWrapper.getPath)(data, inspectedStatePath);
    this.props.updateMonitorState({
      inspectedStatePath,
      subTabName: data.children ? 'Chart' : 'Tree'
    });
  };
  render() {
    return /*#__PURE__*/_react.default.createElement("div", {
      style: style,
      ref: this.getRef
    });
  }
}
const actionCreators = {
  updateMonitorState: _actions.updateMonitorState
};
const ConnectedChartTab = (0, _reactRedux.connect)(null, actionCreators)(ChartTab);
var _default = exports.default = (0, _styledComponents.withTheme)(ConnectedChartTab);