import { Box } from "@mui/material";
import Cytoscape from "react-cytoscapejs";
import { createGraphElements } from "./helper";

import { VERTICES } from "./elements";

import type { Stylesheet } from "cytoscape";

const stylesheet: Stylesheet[] = [
  {
    selector: "node",
    style: {
      shape: "round-rectangle",
      width: 130,
      height: 130,
      backgroundColor: "#FFFFFF",
      label: "data(label)",
      "font-size": "16",
      color: "#4D4D4D",
      "text-halign": "center",
      "text-valign": "center",
    },
  },
  {
    selector: "edge",
    style: {
      width: 30,
      "line-color": "#DEDFE7",
      "curve-style": "taxi",
      "taxi-direction": "horizontal",
      "taxi-turn": 60,
    },
  },
  {
    selector: ":selected",
    style: {
      "border-style": "solid",
      "border-width": 1.5,
      "border-color": "#9A9AAF",
    },
  },
];

export const Graph = () => (
  <Box
    sx={{
      padding: "20px",
      background: "#FFFFFF",
      borderRadius: "12px",
      boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
      marginTop: "30px",
    }}
  >
    <Cytoscape
      wheelSensitivity={0.1}
      elements={createGraphElements(VERTICES)}
      style={{ height: "480px", background: "#F2F3F7" }}
      layout={{ name: "preset" }}
      stylesheet={stylesheet}
    />
  </Box>
);
