// JS module imports
import { useEffect, useRef, useState } from "react";
import uuid from 'react-uuid';
import Graph from 'vis-react';

// CSS imports
import '../css/Canvas.css';

/**
 * This function renders and mantains thhe canvas.
 * @param {Object} props The props for the canvas.
 * @returns {import("react").HtmlHTMLAttributes} The canvas to be retured.
 */
function Visualization(props) {
  const options = {
    edges: {
      color: "#ffffff"
    }
  };
  const events = {
    select: () => event => props.setSelected(event.nodes[0])
  };

  const [graphState, setGraphState] = useState({
    nodes: [],
    edges: []
  });
  const getNodes = () => {
    let nodes = [];
    props.data.forEach(hub => {
      if (hub.followers) {
        nodes.push({
          id: hub.id,
          label: hub.name,
          size: hub.suspicionScore * 10
        });
      }
    });
    return nodes;
  }
  const getEdges = () => {
    let edges = []
    props.data.forEach(hub => {
      hub.followers.forEach(follower => {
        edges.push({
          from: hub.id,
          to: follower.id
        });
      });
    });
    return edges;
  }

  // Hooks to update graph state
  useEffect(() => setGraphState({nodes: getNodes(), edges: getEdges()}), [JSON.stringify(props.data)]);

  return (
    <div className="Map-canvas">
      <Graph
        key={uuid()} 
        graph={graphState}
        options={options}
        events={events}>
      </Graph>
    </div>
  );
}

export default Visualization;