//
//     Copyright © 2011-2025 Cambridge Intelligence Limited.
//     All rights reserved.
//
//     Sample Code
//
//!    Measure how well KeyLines performs.
import KeyLines from "keylines";
function fpsCounter(blend = 0.33) {
  var tick = Date.now();
  var mean = -1;

  (function next() {
    requestAnimationFrame((tock) => {
      var durr = tock - tick;
      mean = mean >= 0 ? mean * blend + durr * (1 - blend) : durr;
      tick = tock;
      next();
    });
  })();

  return { get: () => Math.round(1000 / mean) };
}

var width = 638;
var height = 470;
var numNodes;
var numLinks;
var spacing;
var zooming = false;
var zoomHow = "out";
var animating = false;
var showLabels = false;
var chart;

function pushData(loadedChart) {
  chart = loadedChart;

  function linkIds() {
    var obj = {
      id1: "id" + Math.floor(Math.random() * numNodes),
      id2: "id" + Math.floor(Math.random() * numNodes),
    };
    if (obj.id1 === obj.id2) {
      return linkIds(numNodes); // try again
    }

    return obj;
  }

  function randomX() {
    return Math.floor(Math.random() * width * spacing);
  }

  function randomY() {
    return Math.floor(Math.random() * height * spacing);
  }

  function random(nNodes, nLinks) {
    cancelAnimations();
    numNodes = nNodes;
    numLinks = nLinks;
    spacing = numNodes < 150 ? 1 : Math.sqrt(numNodes / 150);

    var nodes = (function () {
      var ret = [];
      for (var i = 0; i < numNodes; i++) {
        ret.push({
          id: "id" + i,
          type: "node",
          t: showLabels ? i : null,
          d: { label: i },
          x: randomX(),
          y: randomY(),
          u: "/images/icons/telephone.png",
        });
      }
      return ret;
    })();

    var links = (function () {
      var ret = [];
      for (var i = 0; i < numLinks; i++) {
        var ids = linkIds();
        ret.push({
          id: "linkid" + i,
          type: "link",
          t: showLabels ? i : null,
          d: { label: i },
          id1: ids.id1,
          id2: ids.id2,
          c: "rgb(50, 50, 50)",
          w: 1,
        });
      }
      return ret;
    })();

    var items = nodes.concat(links);

    chart.load({
      type: "LinkChart",
      items: items,
    });
    chart.zoom("fit");
  }

  async function startAnimation() {
    if (animating) {
      var items = [];
      for (var i = 0; i < numNodes; i++) {
        items.push({ id: "id" + i, x: randomX(), y: randomY() });
      }
      await chart.animateProperties(items, { time: 3000 });
      startAnimation();
    }
  }

  function swapButtons(type, isActive) {
    // cast the isActive because undefined is different from false in this case
    $("#" + type + "On").toggleClass("active btn-kl", !!isActive);
    $("#" + type + "Off").toggleClass("active btn-kl", !isActive);
  }

  $("#animationOff").click(function (evt) {
    animating = false;
    swapButtons("animation", false);

    evt.preventDefault();
  });

  $("#animationOn").click(function (evt) {
    if (numNodes > 0 && animating === false) {
      swapButtons("animation", true);
      animating = true;
      startAnimation();
    }

    evt.preventDefault();
  });

  async function startZooming() {
    if (zooming) {
      // Invert the current zoom
      zoomHow = zoomHow === "in" ? "out" : "in";
      // Run the zoom
      await chart.zoom(zoomHow, { animate: true });
      startZooming();
    }
  }

  $("#zoomOff").click(function (evt) {
    zooming = false;
    swapButtons("zoom", false);

    evt.preventDefault();
  });

  $("#zoomOn").click(function (evt) {
    if (numNodes > 0 && zooming === false) {
      zooming = true;
      swapButtons("zoom", true);
      startZooming();
    }

    evt.preventDefault();
  });

  function toggleLabels() {
    var items = [];
    chart.each({ type: "all" }, function (item) {
      items.push({ id: item.id, t: showLabels ? item.d.label : null });
    });
    chart.setProperties(items);
  }

  $("#labelsOff").click(function (evt) {
    showLabels = false;
    swapButtons("labels", false);
    toggleLabels();
    evt.preventDefault();
  });

  $("#labelsOn").click(function (evt) {
    if (numNodes > 0) {
      showLabels = true;
      swapButtons("labels", true);
      toggleLabels();
    }

    evt.preventDefault();
  });

  function cancelAnimations() {
    // Cancel nodes animation
    animating = false;
    swapButtons("animation", false);
    // Cancel zoom
    zooming = false;
    swapButtons("zoom", false);
  }

  $("#generate").click(function (evt) {
    var option = $("#nodelink").val();
    if (option) {
      $("#animationOn").removeClass("disabled");
      $("#zoomOn").removeClass("disabled");
      $("#labelsOn").removeClass("disabled");
      var parts = option.split(",");
      random(Number(parts[0]), Number(parts[1]));
    }

    evt.preventDefault();
  });

  $("#layout").click(async function (evt) {
    cancelAnimations();
    evt.preventDefault();
    var start = new Date().getTime();
    await chart.layout("organic", { animate: false, packing: "circle" });
    var endtime = new Date().getTime();
    var secs = (endtime - start) / 1000;
    $("#layoutStats").text(secs + "s");
  });

  // display frame rate
  setInterval(
    function (fps) {
      $("#fps").text(fps.get() + " Frames per Second");
    },
    400,
    fpsCounter()
  );
}

$(function () {
  var options = {
    logo: { u: "/images/Logo.png" },
    minZoom: 0.02,
  };
  KeyLines.create({ container: "klchart", options: options }).then(pushData);
});