import { SigmaContainer } from "@react-sigma/core"
import LoadGraph from "./LoadGraph"
import GraphEvents from "./GraphEvents"

export default function NetworkGraph({ data }) {
   const nodeCount = data?.nodes.length

   const sigmaStyle = {
      height: "400px",
      width: "100%",
   }

   const settings = {
      allowInvalidContainer: true,
      defaultEdgeColor: "#a4a4a4",
      labelColor: { color: "#0a0a0a" },
      labelFont: "Inter",
      labelSize: 14,
      labelWeight: "400",
      labelRenderedSizeThreshold: nodeCount > 15 ? 10 : 8,
      renderLabels: true,
   }

   return (
      <div
         style={{
            width: "100%",
            height: "400px",
            backgroundColor: "#fff",
            overflow: "hidden",
            contain: "strict",
         }}
      >
         <SigmaContainer style={sigmaStyle} settings={settings}>
            <LoadGraph data={data} />
            <GraphEvents />
         </SigmaContainer>
      </div>
   )
}