// JS module imports
import { useEffect, useRef, useState } from "react";
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 [graphState, setGraphState] = useState({
    nodes: [],
    edges: []
  });

  const getNodes = () => {
    console.log(props.data)
    let nodes = []
    props.data.forEach(hub => {
      nodes.push({
        id: hub.id,
        label: hub.name,
        size: hub.suspicionScore * 25
      });
    });
    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()}), []);
  useEffect(() => setGraphState({nodes: getNodes(), edges: getEdges()}), [props.data]);

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

export default Visualization;