// 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';
import EdgeInfo from "./EdgeInfo";


/**
 * This function renders and mantains the canvas.
 * @param {Object} props The props for the canvas.
 * @returns {import("react").HtmlHTMLAttributes} The canvas to be retured.
 */
function Visualization(props) {

  /*let stocks = {};
  let hideEdgeInfo = true;

  const setStocks = (newStocks) => {
    stocks = newStocks;
  }

  const setHideEdgeInfo = (val) => {
    hideEdgeInfo = val;
  }*/

  const options = {
    edges: {
      color: "#ffffff"
    }
  };
  const events = {
    select: () => event => props.setSelected(event.nodes[0])
  };

  const [graphState, setGraphState] = useState({
    nodes: [],
    edges: []
  });

  /*const getEdgeInfo = (fromID, toID) => {
      fetch("http://localhost:4567/edge-data", {
        method: "POST",
        body: JSON.stringify({
          followerID: fromID,
          leaderID:  toID,
        }),
        headers: {
          "Content-Type": "application/json",
        },
        credentials: "same-origin"
      })
          .then(res  => res.json())
          .then(data => {
            console.log(data);
            setStocks(data);
            setHideEdgeInfo(false);
          })
          .catch(err => console.log(err));
    }*/
  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',
          },
          /*chosen: {
            edge: () => getEdgeInfo(follower.id, hub.id)
          }*/
        });
      });
    });
    return edges;
  }
  /*
  * <EdgeInfo
          stockList={stocks}
          setHideInfo={setHideEdgeInfo}
          hidden={hideEdgeInfo}>
      </EdgeInfo>*/

  // 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;