//
//     Copyright © 2011-2025 Cambridge Intelligence Limited.
//     All rights reserved.
//
//     Sample Code
//
//!    Populate the contents of combos on demand.
import KeyLines from "keylines";
import {
  randomColour,
  baseNode,
  baseLink,
  plusIcon,
} from "./comboload-data.js";

let chart;
let idCount = 0;

const maxNodes = 12;
const minNodes = 3;
const linkDensity = 0.2;

function createRandomNodes(parent) {
  // Create random nodes with links between them all in a given parent
  const items = [];
  const nodeCount =
    Math.floor(Math.random() * (maxNodes - minNodes + 1)) + minNodes;
  const colour = randomColour();
  // Create nodes
  for (let n = 0; n < nodeCount; n++) {
    items.push(
      Object.assign({}, baseNode, {
        id: `node${idCount++}`,
        parentId: parent,
        c: colour.node,
        g: [plusIcon],
      })
    );
  }
  // Create links
  for (let n1 = 0; n1 < nodeCount; n1++) {
    for (let n2 = n1 + 1; n2 < nodeCount; n2++) {
      if (Math.random() < linkDensity) {
        items.push(
          Object.assign({}, baseLink, {
            id: `link${idCount++}`,
            id1: items[n1].id,
            id2: items[n2].id,
          })
        );
      }
    }
  }
  return { items, colour };
}

async function createParentCombo(id) {
  const data = createRandomNodes(id);
  // Create the new combo with the nodes
  await chart.merge(data.items);
  await chart.setProperties({ id, g: [], oc: { c: data.colour.oc } });
  await chart.combo().arrange(id, { animate: false });
  await chart.combo().open(id);
}

function isNode(id) {
  const item = chart.getItem(id);
  return item?.type === "node";
}

function handleClick({ id, preventDefault }) {
  if (id && !chart.combo().isCombo(id) && isNode(id)) {
    createParentCombo(id);
    preventDefault();
  }
}

async function startKeyLines() {
  const options = {
    handMode: true,
    // Set the name of the font we want to use for icons (a font must be loaded in the browser
    // with exactly this name)
    iconFontFamily: "Font Awesome 5 Free",
    logo: { u: "/images/Logo.png" },
    selectionColour: "rgb(68, 68, 68)",
  };

  chart = await KeyLines.create({
    container: "klchart",
    options,
  });
  chart.on("double-click", handleClick);

  chart.load({ type: "LinkChart", items: createRandomNodes(null).items });
  chart.zoom("fit", { animate: false });
  chart.layout("organic", { time: 400 });
}

function loadKeyLines() {
  document.fonts.load('24px "Font Awesome 5 Free"').then(startKeyLines);
}

window.addEventListener("DOMContentLoaded", loadKeyLines);