//
//     Copyright © 2011-2025 Cambridge Intelligence Limited.
//     All rights reserved.
//
//     Sample Code
//
//!    Organise links into aggregate links to reduce clutter in the chart.
import KeyLines from "keylines";
import { data, combineNodesAndRevealLinks } from "./linkaggregation-data.js";

let chart;

async function layout() {
  await chart.layout("sequential", {
    orientation: "right",
    stretch: 2,
    level: "level",
  });
}

function isCombo(ids, type = "node") {
  return chart.combo().isCombo(ids, { type });
}

function openCombo(ids) {
  const targets = Array.isArray(ids) ? ids : [ids];
  chart.combo().open(targets, { adapt: "inCombo" });
}

function closeCombo(ids) {
  const targets = Array.isArray(ids) ? ids : [ids];
  chart.combo().close(targets, { adapt: "inCombo" });
}

function initialiseInteractions() {
  document.querySelectorAll('input[name="aggregateLinks"]').forEach((radio) => {
    radio.addEventListener("click", async (e) => {
      const value = e.target.value;
      switch (value) {
        case "true":
          chart.options({ aggregateLinks: true });
          break;
        case "false":
          chart.options({ aggregateLinks: false });
          break;
        case "via":
          chart.options({ aggregateLinks: { aggregateBy: "via" } });
          break;
      }
    });
  });

  chart.on("link-aggregation", ({ change, links, aggregateByValue, id }) => {
    if (change !== "deleted") {
      // style the aggregate after it has been created or updated
      let colour = "grey";
      let typeGlyph; // glyph that shows the type of transport

      if (aggregateByValue) {
        // if aggregating by link type, get some styling from a child link
        const childLink = chart.getItem(links[0]);
        colour = childLink.c;
        typeGlyph = childLink.g[0];
      }

      // create a glyph to show the number of child links
      const glyphs = [{ c: "white", b: colour, t: links.length, fc: colour }];

      if (typeGlyph) {
        glyphs.push(typeGlyph);
      }

      chart.setProperties({ id, w: links.length, c: colour, g: glyphs });
    }
  });

  chart.on("double-click", ({ id, preventDefault, button }) => {
    if (id && button === 0) {
      if (isCombo(id)) {
        if (chart.combo().isOpen(id)) {
          closeCombo(id);
        } else {
          openCombo(id);
        }
      }
      preventDefault();
    }
  });
}

async function startKeyLines() {
  const options = {
    handMode: true,
    selectionColour: "#f75252",
    combos: { shape: "rectangle" },
    iconFontFamily: "Font Awesome 5 Free",
    linkEnds: { avoidLabels: false },
    aggregateLinks: { aggregateBy: "via" },
  };

  chart = await KeyLines.create({ container: "klchart", options });
  initialiseInteractions();
  chart.load(data);

  // combine and reveal links
  await combineNodesAndRevealLinks(chart);
  await layout();
}

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

window.addEventListener("DOMContentLoaded", loadWebFonts);