//
//     Copyright © 2011-2025 Cambridge Intelligence Limited.
//     All rights reserved.
//
//     Sample Code
//
//!    Visualise hierarchical data with angled links.

import { data, linkColour, primaryColour } from "./angledlinks-data.js";

import KeyLines from "keylines";

const fitButton = document.querySelector("#fit");
const fitSelectionButton = document.querySelector("#fit-selection");
const secondaryChartContainer = document.querySelector("#klchart-secondary");
const secondaryChartResizeObserver = new ResizeObserver(() => {
  secondaryChart.zoom("fit");
});
secondaryChartContainer.addEventListener("transitionend", () => {
  secondaryChartResizeObserver.unobserve(secondaryChartContainer);
});

const accentColour = "#0F6BE9";
const selectionColour = "#F4D03F";
const initialSelection = ["Company 46", "Company 19"];
const commonOptions = {
  handMode: true,
  overview: false,
  navigation: false,
  iconFontFamily: "Font Awesome 5 Free",
  selectionColour: selectionColour,
  imageAlignment: {
    "fas fa-building": { e: 0.9 },
    "fas fa-store": { e: 0.85 },
    "fas fa-industry": { e: 0.85 },
    "fas fa-warehouse": { e: 0.75, dy: -4 },
  },
};

let primaryChart;
let secondaryChart;
let highlightedPrimaryPath = undefined;
// Stores the id of the selected node being dragged so we can prevent multi node dragging
let primaryNodeBeingDragged = null;

function setPrimarySelection(ids, animate = true) {
  primaryChart.selection(ids);
  return onSelectionChange(animate);
}

function onPrimaryChartClick({ id, preventDefault }) {
  preventDefault();
  const validatedItem = primaryChart.getItem(id);
  const currentSelection = primaryChart.selection();
  if (validatedItem && validatedItem.type === "node") {
    setPrimarySelection([currentSelection[currentSelection.length - 1], id]);
  } else if (id === null || validatedItem) {
    setPrimarySelection([]);
  }
}

async function loadPathIntoSecondaryChart(ids, animate) {
  if (animate) {
    secondaryChartContainer.style.removeProperty("transition");
    secondaryChartResizeObserver.observe(secondaryChartContainer);
  } else {
    secondaryChartContainer.style.transition = "none";
  }

  if (ids.length === 0) {
    secondaryChartContainer.style.width = "0px";
  } else {
    const items = ids.map((id) => {
      return primaryChart.getItem(id);
    });

    await secondaryChart.load({
      type: "LinkChart",
      items,
    });
    secondaryChart.selection(primaryChart.selection());
    await secondaryChart.layout("sequential", {
      animate: false,
      linkShape: "curved",
    });

    secondaryChartContainer.style.width = "25%";
    if (!animate) {
      requestAnimationFrame(() => {
        secondaryChart.zoom("fit");
      });
    }
  }
}

async function highlightPrimaryPath(ids) {
  if (highlightedPrimaryPath) {
    primaryChart.setProperties(
      highlightedPrimaryPath.map((id) => {
        const type = primaryChart.getItem(id).type;
        return {
          id,
          priority: 0,
          c: type === "node" ? primaryColour : linkColour,
        };
      })
    );
    highlightedPrimaryPath = undefined;
  }

  if (ids.length > 0) {
    highlightedPrimaryPath = ids;
    primaryChart.setProperties(
      ids.map((id) => ({ id, priority: 1, c: accentColour }))
    );
  }
}

function shortestPath() {
  const selectedNodes = primaryChart.selection();
  return selectedNodes.length === 2
    ? primaryChart
        .graph()
        .shortestPaths(selectedNodes[0], selectedNodes[1], { direction: "any" })
        .onePath
    : [];
}

function onSelectionChange(animate) {
  const path = shortestPath();
  highlightPrimaryPath(path);
  return loadPathIntoSecondaryChart(path, animate);
}

function onPrimaryDragStart({ preventDefault, id, type }) {
  const selectedNodes = primaryChart.selection();
  // Prevent multi node dragging when dragging one of the two selected nodes
  if (
    type === "node" &&
    selectedNodes.includes(id) &&
    selectedNodes.length > 1
  ) {
    preventDefault();
    // Enable single node dragging via 'drag-move'
    primaryNodeBeingDragged = primaryChart.getItem(id);
  }
}

// To avoid KeyLines' multi node dragging behaviour when one of the two selected nodes is being dragged,
// handle the drag manually by updating the node's position via setProperties
function onPrimaryDragMove({ x, y }) {
  if (primaryNodeBeingDragged !== null) {
    const worldDragCoords = primaryChart.worldCoordinates(x, y);
    // Update node position properties to simulate the drag
    primaryChart.setProperties({
      id: primaryNodeBeingDragged.id,
      x: worldDragCoords.x,
      y: worldDragCoords.y,
    });
  }
}

async function loadPrimaryChart() {
  primaryChart = await KeyLines.create({
    container: "klchart",
    options: {
      ...commonOptions,
      backColour: "#1B1D20",
      selectedNode: {
        ha0: {
          c: selectionColour,
          r: 30,
          w: 4,
        },
      },
      selectedLink: {},
    },
  });
  await primaryChart.load(data);
  await primaryChart.layout("sequential", {
    linkShape: "angled",
    animate: false,
  });

  primaryChart.on("click", onPrimaryChartClick);

  // Drag handlers for bypassing KeyLines' multi node selection dragging behaviour
  primaryChart.on("drag-start", onPrimaryDragStart);
  primaryChart.on("drag-move", onPrimaryDragMove);
  primaryChart.on("drag-end", () => {
    if (primaryNodeBeingDragged) {
      // Clear the node being dragged when the drag is complete
      primaryNodeBeingDragged = null;
    }
  });
}

async function loadSecondaryChart() {
  secondaryChart = await KeyLines.create({
    container: "klchart-secondary",
    options: {
      ...commonOptions,
      backColour: "#131517",
      zoom: {
        adaptiveStyling: false,
      },
    },
  });
  await loadPathIntoSecondaryChart([]);

  secondaryChart.on("click", ({ preventDefault }) => preventDefault());
  secondaryChart.on("drag-start", ({ type, preventDefault }) => {
    if (type === "node") {
      preventDefault();
    }
  });
}

async function startKeyLines() {
  await Promise.all([loadPrimaryChart(), loadSecondaryChart()]);
  await setPrimarySelection(initialSelection, false);
  requestAnimationFrame(() => {
    primaryChart.zoom("fit");
  });
  fitSelectionButton.addEventListener("click", () => {
    primaryChart.zoom("fit", { ids: shortestPath(), animate: true, time: 150 });
  });
  fitButton.addEventListener("click", () => {
    primaryChart.zoom("fit", { animate: true, time: 150 });
  });
}

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

window.addEventListener("DOMContentLoaded", loadFontsAndStart);