document.addEventListener("DOMContentLoaded", async (event) => {
  // Functions to open and close a modal
  function openModal($el) {
    $el.classList.add('is-active');
  }

  function closeModal($el) {
    $el.classList.remove('is-active');
  }

  function closeAllModals() {
    (document.querySelectorAll('.modal') || []).forEach(($modal) => {
      closeModal($modal);
    });
  }

  function hydrateDetailsModal(target) {
    console.log(target);
    let $objid = document.getElementById("modetails-objid");
    let $content = document.getElementById("modetails-content");
    $objid.textContent = target.data("label");
    $content.textContent = target.data("details");
  }

  // Add a click event on buttons to open a specific modal
  (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
    const modal = $trigger.dataset.target;
    const $target = document.getElementById(modal);

    $trigger.addEventListener('click', () => {
      openModal($target);
    });
  });

  // Add a click event on various child elements to close the parent modal
  (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-cancel') || []).forEach(($close) => {
    const $target = $close.closest('.modal');

    $close.addEventListener('click', () => {
      closeModal($target);
    });
  });

  // Add a keyboard event to close all modals
  document.addEventListener('keydown', (event) => {
    if(event.key === "Escape") {
      closeAllModals();
    }
  });

  let data = await fetch("/graph.json")
  let elements = data.json();
  let cy = cytoscape({
    container: document.getElementById('cy'),
    elements: elements,
    style: [
      {
        selector: 'node',
        style: {
          'label': 'data(label)',
          'background-color': 'data(color)',
        }
      },
      {
        selector: 'edge',
        style: {
          'width': 2,
          'line-color': '#aaa',
          'target-arrow-shape': 'triangle',
          'target-arrow-color': '#ccc',
          'curve-style': 'bezier'
        }
      },
      {
        selector: 'edge[?oauth_scope]',
        style: {
          'target-arrow-shape': 'tee',
        }
      }
    ],
    layout: {
      name: 'fcose',
      nodeDimensionsIncludeLabels: true
    }
  });
  cy.on('dbltap', 'node', (evt) => { 
    let $target = document.getElementById("modal-details");
    hydrateDetailsModal(evt.target);
    openModal($target);
  });
});