import { useEffect } from "react"
import Graph from "graphology"
import { useLoadGraph, useSigma } from "@react-sigma/core"
import forceAtlas2 from "graphology-layout-forceatlas2"

const LoadGraph = ({ data }) => {
   const loadGraph = useLoadGraph()
   const sigma = useSigma()

   useEffect(() => {
      const graph = new Graph()
      data.nodes.forEach((node) => {
         graph.addNode(node.id, {
            label: node.name,
            x: Math.random(),
            y: Math.random(),
            size: 8,
            color: node.focal ? "#0a0a0a" : "#a4a4a4",
         })
      })

      data.links.forEach((link) => {
         graph.addEdge(link.source, link.target, {
            size: 1,
            color: "#a4a4a4",
         })
      })

      forceAtlas2.assign(graph, {
         iterations: 100,
         settings: {
            gravity: 0,
            scalingRatio: 8,
            strongGravityMode: false,
            slowDown: 2,
         },
      })

      loadGraph(graph)
   }, [loadGraph, data, sigma])

   return null
}

export default LoadGraph