import { useEffect } from "react"
import { useNavigate } from "react-router"
import { useRegisterEvents, useSigma } from "@react-sigma/core"

const GraphEvents = () => {
   const registerEvents = useRegisterEvents()
   const sigma = useSigma()
   const navigate = useNavigate()
   useEffect(() => {
      registerEvents({
         enterNode: (event) => {
            const graph = sigma.getGraph()
            const edges = graph.edges(event.node)
            edges.forEach((edgeId) => {
               graph.setEdgeAttribute(edgeId, "size", 3)
               graph.setEdgeAttribute(edgeId, "color", "#0a0a0a")
            })
         },

         leaveNode: () => {
            const graph = sigma.getGraph()
            graph.forEachEdge((edgeId) => {
               graph.removeEdgeAttribute(edgeId, "size")
            })
         },

         clickNode: (event) => navigate(`/entries/${event.node}`),
      })
   }, [registerEvents, sigma])

   return null
}

export default GraphEvents