import * as React from "react";
import { connect } from "react-redux";
import { Sigma, Filter, ForceAtlas2 } from "react-sigma";

import { selectAndLoadInstance } from "../redux/actions";
import { ErrorState } from "./ErrorState";

const STYLE = {
  bottom: "0",
  left: "0",
  position: "absolute",
  right: "0",
  top: "50px"
};
const DEFAULT_NODE_COLOR = "#CED9E0";
const SELECTED_NODE_COLOR = "#48AFF0";
const SETTINGS = {
  defaultEdgeColor: "#5C7080",
  defaultLabelColor: "#F5F8FA",
  defaultNodeColor: DEFAULT_NODE_COLOR,
  drawEdges: true,
  drawLabels: true,
  edgeColor: "default",
  labelColor: "default",
  labelThreshold: 10,
  maxEdgeSize: 1,
  minEdgeSize: 0.3
};

class GraphImpl extends React.Component {
  constructor(props) {
    super(props);
    this.sigmaComponent = React.createRef();
  }

  render() {
    let graph = this.props.graph;
    if (!graph) {
      return <ErrorState />;
    }
    // Check that all nodes have size & coordinates; otherwise the graph will look messed up
    const lengthBeforeFilter = graph.nodes.length;
    graph = { ...graph, nodes: graph.nodes.filter(n => n.size && n.x && n.y) };
    if (graph.nodes.length !== lengthBeforeFilter) {
      // tslint:disable-next-line:no-console
      console.error(
        "Some nodes were missing details: " +
          this.props.graph.nodes.filter(n => !n.size || !n.x || !n.y).map(n => n.label)
      );
      return <ErrorState />;
    }
    return (
      <Sigma
        graph={graph}
        renderer="webgl"
        settings={SETTINGS}
        style={STYLE}
        onClickNode={this.onClickNode}
        onClickStage={this.onClickStage}
        ref={this.sigmaComponent}
      >
        <Filter neighborsOf={this.props.currentInstanceName} />
        <ForceAtlas2 iterationsPerRender={1} timeout={10000} />
      </Sigma>
    );
  }

  componentDidUpdate() {
    const sigma = this.sigmaComponent && this.sigmaComponent.current.sigma;
    // Check if sigma exists s.t. nothing breaks if the graph didn't load (for whatever reason)
    if (sigma) {
      sigma.graph.nodes().map(this.colorNodes);
      sigma.refresh();
    }
  }

  onClickNode = e => {
    this.props.selectAndLoadInstance(e.data.node.label);
  };

  onClickStage = e => {
    // Deselect the instance (unless this was a drag event)
    if (!e.data.captor.isDragging) {
      this.props.selectAndLoadInstance(null);
    }
  };

  colorNodes = n => {
    if (this.props.currentInstanceName && n.id === this.props.currentInstanceName) {
      n.color = SELECTED_NODE_COLOR;
    } else {
      n.color = DEFAULT_NODE_COLOR;
    }
  };
}

const mapStateToProps = state => ({
  currentInstanceName: state.currentInstance.currentInstanceName,
  graph: state.data.graph
});
const mapDispatchToProps = dispatch => ({
  selectAndLoadInstance: instanceName => dispatch(selectAndLoadInstance(instanceName))
});
export const Graph = connect(
  mapStateToProps,
  mapDispatchToProps
)(GraphImpl);