const width = 380;
const height = 380;

const nodesIds = ["a", "b", "c", "d", "e"];

const colorRed = "#ed2637";
const colorLightGrey = "#dde6ed";
const colorDarkBlue = "#131e29";

document.getElementById("container").style.width = width + "px";

const createNode = (id) =>
  new joint.shapes.standard.Circle({
    id,
    size: { width: 40, height: 40 },
    z: 2,
    attrs: {
      body: {
        fill: colorLightGrey,
        stroke: colorRed,
        "stroke-width": 3
      },
      label: {
        text: id,
        style: { textTransform: "capitalize" }
      }
    }
  });

const createLink = (sourceId, targetId) =>
  new joint.shapes.standard.Link({
    source: {
      id: sourceId
    },
    target: {
      id: targetId
    },
    z: 3,
    attrs: {
      line: {
        stroke: colorRed
      }
    }
  });

const createNodesAndLinks = (nodesIds, graph) => {
  nodesIds.forEach((id) => {
    createNode(id).addTo(graph);
  });

  nodesIds.forEach((id) => {
    const possibleTargets = nodesIds.filter(function (value) {
      return value !== id;
    });

    for (let i = 0; i <= g.random(3); i++) {
      const linkedId =
        possibleTargets[Math.floor(Math.random() * (nodesIds.length - 1))];
      createLink(id, linkedId).addTo(graph);
    }
  });
};

const createGraphLayout = (graph) => {
  const graphLayout = new joint.layout.ForceDirected({
    graph: graph,
    x: 0,
    y: 0,
    width: width,
    height: height,
    gravityCenter: { x: width / 2 - 100, y: height / 2 - 60 },
    charge: 800,
    linkDistance: 130
  });

  graphLayout.start();

  Array.from({ length: 100 }).forEach(function () {
    graphLayout.step();
  });
};

const createAdjacencyMatrix = (graph, nodesIds, adjacencyList) => {
  const cells = nodesIds.map((id) =>
    nodesIds.map((nestedId) => ({
      fill: adjacencyList[id].includes(nestedId) ? colorRed : colorDarkBlue
    }))
  );

  const labels = nodesIds.map((id) => ({
    text: id.toUpperCase(),
    fill: colorDarkBlue
  }));

  const matrixSize = 100;

  const matrix = new joint.shapes.chart.Matrix({
    position: { x: width - matrixSize - 10, y: height - matrixSize - 10 },
    size: { width: matrixSize, height: matrixSize },
    z: 1,
    attrs: {
      ".grid-line": { stroke: colorLightGrey }
    },
    cells: cells,
    labels: {
      rows: labels,
      columns: labels
    }
  });

  matrix.addTo(graph);
};

const generateSampleDiagram = (graph, nodesIds, adjacencyListElement) => {
  graph.clear();

  createNodesAndLinks(nodesIds, graph);
  createGraphLayout(graph);

  const adjacencyList = joint.graphUtils.toAdjacencyList(graph);

  createAdjacencyMatrix(graph, nodesIds, adjacencyList);

  adjacencyListElement.innerText = JSON.stringify(adjacencyList);
};

const graph = new joint.dia.Graph();

const paper = new joint.dia.Paper({
  el: document.getElementById("paper"),
  width: width,
  height: height,
  model: graph,
  overflow: true,
  defaultConnectionPoint: { name: "boundary", args: { offset: 4 } },
  background: {
    color: colorLightGrey
  },
  interactive: function (cellView) {
    if (cellView.model.get("type") === "chart.Matrix") {
      return {
        elementMove: false
      };
    }

    return true;
  }
});

const adjacencyListElement = document.getElementById("adjacencyList");

generateSampleDiagram(graph, nodesIds, adjacencyListElement);

document
  .getElementById("generate")
  .addEventListener("click", () =>
    generateSampleDiagram(graph, nodesIds, adjacencyListElement)
  );