// import cola from 'cytoscape-cola';

async function getData() {
  try {
    const resp = await fetch("/api/data");
    if (!resp.ok) {
      throw new Error(`Response status: ${resp.status}`);
    }

    const json = await resp.json();
    return json;
  } catch (error) {
    console.error(error);
  }
}

function setupGraph() {

  getData()
    .catch(function (err) { console.error(err) })
    .then(function (elements) {

      var cy = window.cy = cytoscape({

        container: document.getElementById('map-container'), // container to render in

        elements: elements,
        // elements: [ // list of graph elements to start with
        //   { // node a
        //     data: { id: 'a' }
        //   },
        //   { // node b
        //     data: { id: 'b' }
        //   },
        //   { // edge ab
        //     data: { id: 'ab', source: 'a', target: 'b' }
        //   }
        // ],

        style: [ // the stylesheet for the graph
          {
            selector: 'node',
            style: {
              'background-color': '#666',
              'label': 'data(id)'
            }
          },

          {
            selector: 'edge',
            style: {
              'width': 1,
              'line-color': '#1E88E5',
              'target-arrow-color': '#1E88E5',
              'target-arrow-shape': 'none',
              'curve-style': 'bezier'
            }
          },
          {
            selector: ".virtual-edge",
            style: {
              "line-color": "#BDBDBD",
              "line-style": "dashed",
            }
          }
        ],

        layout: {
          name: 'cola',
        }

      });
    });

}

document.addEventListener('DOMContentLoaded', setupGraph);