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

  const options = {
    autoResize: true,
    edges: {
      color: "#ffffff"
    }
  };

  const events = {
    selectNode: event => {
      console.log(event);
      //props.setSelectedId(event.nodes[0]);
    }
  }

  const getNodes = () => {
    let nodes = [];
    const maxScore = props.data[0].suspicionScore;
    const interval = maxScore / 4;

    props.data.forEach(hub => {
      if (hub.followers) {
        let colorVal = '#f6f7d4';
        const score = hub.suspicionScore;

        if(score > (maxScore - interval)){
          colorVal = '#d92027'
        }
        if(score <= (maxScore - interval) && score > (maxScore - interval*2)){
          colorVal = '#f37121'
        }
        if(score <= (maxScore - interval*2) && score > (maxScore - interval*3)){
          colorVal = '#fdca40'
        }
        nodes.push({
          id: hub.id,
          autoResize: true,
          label: hub.name,
          labelHighlightBold: true,
          shape: "dot",
          value: hub.suspicionScore*1000,
          color: {
            background: colorVal,
            border: '#2b2e4a',
            highlight:{
              background: '#29bb89',
              border: '#fdca40'
            }
          },
          font: {
            color: '#9fd8df',
            size: 20,
          }
        });
      }
    });
    return nodes;
  }

  const getEdges = () => {
    let edges = []
    props.data.forEach(hub => {
      hub.followers.forEach(follower => {
        edges.push({
          from: follower.id,
          to: hub.id,
          dashes: false,
          color:{
            opacity: 0.7,
            highlight:'#fdca40',
          }
        });
      });
    });
    return edges;
  }

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

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

export default Visualization;