//
//     Copyright © 2011-2025 Cambridge Intelligence Limited.
//     All rights reserved.
//
//     Sample Code
//
//!    Add a stack to give users unlimited undo/redo options.
import KeyLines from "keylines";
import dataGenerator from "./undoredo-data.js";

let chart;
const undoStack = [];
const redoStack = [];

const addButton = document.getElementById("add-node");
const removeButton = document.getElementById("remove-node");
const undoButton = document.getElementById("undo");
const redoButton = document.getElementById("redo");
const layoutButton = document.getElementById("layout");

function disableButtons(isDisabled) {
  addButton.disabled = isDisabled;
  removeButton.disabled = isDisabled;
  undoButton.disabled = isDisabled;
  redoButton.disabled = isDisabled;
  layoutButton.disabled = isDisabled;
}

function refreshUI() {
  disableButtons(false);

  undoButton.value = `Undo (${undoStack.length})`;
  undoButton.disabled = undoStack.length === 0;

  redoButton.value = `Redo (${redoStack.length})`;
  redoButton.disabled = redoStack.length === 0;

  // disables "remove button" if no more items to remove
  removeButton.disabled = chart.serialize().items.length === 0;
}

async function undoStackAdd(callbackFunction) {
  // save the current chart state into the undo stack
  undoStack.push(chart.serialize());
  // clear the redo stack
  redoStack.length = 0;

  if (callbackFunction) {
    await callbackFunction();
  }
  refreshUI();
}

async function expandNewItems() {
  disableButtons(true);
  // If a node is selected then adds new nodes to that node, otherwise adds to a random node
  const selectedIds = chart.selection();
  const selectedId =
    selectedIds.length > 0 && chart.getItem(selectedIds[0]).type === "node"
      ? selectedIds[0]
      : undefined;

  await chart.expand(dataGenerator.newNodeAndLink(selectedId), {
    time: 500,
    layout: { name: "organic", fix: "all" },
  });
  addButton.disabled = false;
  disableButtons(false);
}

function removeNode() {
  // If a node is selected then removed that node, otherwise remove random node
  const selectedIds = chart.selection();
  const selectedId = selectedIds[0] || dataGenerator.getRemoveNodeId(chart);
  chart.removeItem(selectedId);
}

function initialiseInteractions() {
  chart.load(dataGenerator.makeChart());
  chart.layout("organic");

  undoButton.addEventListener("click", () => {
    redoStack.push(chart.serialize());
    chart.load(undoStack.pop());
    refreshUI();
  });

  redoButton.addEventListener("click", () => {
    undoStack.push(chart.serialize());
    chart.load(redoStack.pop());
    refreshUI();
  });

  chart.on("prechange", ({ type }) => {
    if (/(move|offset)/.test(type)) {
      // Before moving a link / node, we save the chart state in the undo stack
      undoStackAdd();
    }
  });

  layoutButton.addEventListener("click", async () => {
    // Disable buttons to stop button used while layout happening
    disableButtons(true);
    await undoStackAdd(() => chart.layout("organic"));
    refreshUI();
  });

  addButton.addEventListener("click", () => {
    undoStackAdd(expandNewItems);
  });

  removeButton.addEventListener("click", () => {
    undoStackAdd(removeNode);
  });
}

async function loadKeyLines() {
  const options = {
    logo: { u: "/images/Logo.png" },
    handMode: true,
  };
  chart = await KeyLines.create({ container: "klchart", options });

  initialiseInteractions();
}

window.addEventListener("DOMContentLoaded", loadKeyLines);