//
//     Copyright © 2011-2025 Cambridge Intelligence Limited.
//     All rights reserved.
//
//     Sample Code
//
//!    Drag nodes onto the chart to create a network.
import KeyLines from "keylines";
let chart;
let container;
const draggableArea = document.getElementsByClassName(
  "chart-wrapper demo-cols"
)[0];
// used for item creation
let nodeIdCounter = 0;
let linkIdCounter = 0;

let dragIcon = "";
let clone;
let dragStartCoords;

function removePlusIcon(nodeId) {
  if (nodeId) {
    chart.setProperties({ id: nodeId, g: null });
  }
}

function removeAllPlusIcons() {
  chart.each({ type: "node" }, (node) => {
    if (node.g) {
      removePlusIcon(node.id);
    }
  });
}

// Glyphs
function addPlusIcon({ id }) {
  removeAllPlusIcons();
  const hoveringItem = chart.getItem(id);
  // in case the cursor is hovering a node, add the icon
  if (id && hoveringItem.type === "node") {
    chart.setProperties({ id, g: [{ p: "ne", t: "+", c: "green" }] });
  }
}

async function createLink(nodeId, newLinkId) {
  // Define the style of the new link
  const newLinkStyle = {
    c: "rgb(255, 127, 127)",
    w: 5,
    a2: true, // link directed to the new node
  };
  // create the link and remove the + icon at the end in any case
  const linkedItemId = await chart.createLink(nodeId, newLinkId, {
    style: newLinkStyle,
  });
  removePlusIcon(linkedItemId);
}

function startLinkCreation({ id: nodeId, type, subItem }) {
  // if the node has the plus icon on the top-right corner...
  if (type === "node" && subItem.subId === "ne") {
    const linkId = `link${++linkIdCounter}`;
    // override the default node dragger with create-link
    createLink(nodeId, linkId);
  }
}

// place and setup the label box
function openLabelEditBox({ id }) {
  const item = chart.getItem(id);
  if (!item) return;

  const editLabel = document.getElementById("editLabel");
  const chartBox = document.getElementById("klchart").getBoundingClientRect();
  let keyDownHandler;

  function closeEdit() {
    editLabel.style.display = "none";
    chart.lock(false);
    // detach event listeners from the box
    editLabel.removeEventListener("keydown", keyDownHandler, false);
    editLabel.removeEventListener("blur", closeEdit, false);
  }

  keyDownHandler = (evt) => {
    if (evt.keyCode === 27) {
      // esc
      // exit without save
      closeEdit();
    }
    if (evt.keyCode === 13) {
      // return
      // save
      chart.setProperties({ id, t: editLabel.value });
      // and exit
      closeEdit();
    }
  };

  const labelPosition = chart.labelPosition(id);
  labelPosition.x1 += chartBox.left;
  labelPosition.x2 += chartBox.left;
  labelPosition.y1 += chartBox.top - 8;
  labelPosition.y2 += chartBox.top - 8;
  const labelWidth = labelPosition.x2 - labelPosition.x1;
  const editBoxWidth = Math.max(labelWidth, 80);
  const deltaWidth = editBoxWidth - labelWidth;
  // Place the box just under the node
  Object.assign(editLabel.style, {
    fontSize: `${labelPosition.fs}px`,
    top: `${labelPosition.y1}px`,
    left: `${labelPosition.x1 - deltaWidth / 2}px`,
    height: `${labelPosition.y2 - labelPosition.y1 + 4}px`,
    width: `${editBoxWidth}px`,
  });

  // copy and paste the current label in the box
  editLabel.value = item.t || "";

  // listen for which key the user presses
  editLabel.addEventListener("keydown", keyDownHandler, false);

  // on blur, exit without save
  editLabel.addEventListener("blur", closeEdit, false);

  // show the box, focus and set it ready to be filled
  editLabel.style.display = "block";
  editLabel.focus();
  editLabel.select();
  // lock the chart
  chart.lock(true);
}

function followMouse(evt) {
  // The cloned icon has 'position: fixed'.
  // On mousemove, we update its top and left CSS values
  // by looking at the current mouse position.
  clone.style.left = `${evt.clientX - clone.clientWidth / 2}px`;
  clone.style.top = `${evt.clientY - clone.clientHeight / 2}px`;
}

function getIconColor(iconName) {
  const icon = document.querySelector(`#dragdropTable i.fa-${iconName}`);
  return getComputedStyle(icon).color;
}

function removeClone() {
  clone.parentElement.removeChild(clone);
  clone = null;
}

function createNode(mouseViewCoords) {
  // mouseViewCoords gives the position of the
  // mouseup event, relative to the top-left corner of the the page

  const chartBox = document.getElementById("klchart").getBoundingClientRect();
  const x = mouseViewCoords.x - chartBox.left;
  const y = mouseViewCoords.y - chartBox.top;
  const pos = chart.worldCoordinates(x, y);
  const id = `node${++nodeIdCounter}`;
  // create the node
  chart.setItem({
    type: "node",
    id,
    x: pos.x,
    y: pos.y,
    fi: {
      t: `fas fa-${dragIcon}`,
      c: getIconColor(dragIcon),
    },
    t: "New Item",
  });

  openLabelEditBox({ id });
  removeClone();
}

function revertDrag() {
  // dropped icon outside of chart, so we slide it back to initial position
  clone.classList.add("transition");
  clone.style.left = `${dragStartCoords.x}px`;
  clone.style.top = `${dragStartCoords.y}px`;
  // when the transition is over, remove the cloned fonticon
  setTimeout(removeClone, 500);
}

function endDrag(evt) {
  document.removeEventListener("mousemove", followMouse, false);
  document.removeEventListener("mouseup", endDrag, false);

  // check whether we have dropped the cloned icon within the chart area
  const klRect = container.getBoundingClientRect();

  const mouseViewCoords = {
    x: evt.clientX,
    y: evt.clientY,
  };

  const withinChartX =
    mouseViewCoords.x >= 0 && mouseViewCoords.x <= klRect.width;
  const withinChartY =
    mouseViewCoords.y >= 0 && mouseViewCoords.y <= klRect.height;
  const mouseIsOverChart = withinChartX && withinChartY;
  if (mouseIsOverChart) {
    createNode(mouseViewCoords);
  } else {
    revertDrag();
  }
}

function startDrag(evt) {
  if (!clone) {
    const element = evt.target;
    dragIcon = element.dataset.icon;
    clone = element.cloneNode(true);
    draggableArea.appendChild(clone);

    // add id to apply CSS
    clone.id = "icon-clone";

    dragStartCoords = {
      x: evt.clientX,
      y: evt.clientY,
    };
    followMouse(evt);
    document.addEventListener("mousemove", followMouse, false);
    document.addEventListener("mouseup", endDrag, false);
  }
}

function makeDraggable(element) {
  element.addEventListener("mousedown", startDrag, false);
}

function setUpUI() {
  container = document.getElementById("klchart");
  chart.on("hover", addPlusIcon);
  chart.on("drag-start", startLinkCreation);
  chart.on("double-click", openLabelEditBox);
  const draggables = document.querySelectorAll(".draggable");
  draggables.forEach(makeDraggable);

  const layoutButton = document.getElementById("layout");
  layoutButton.addEventListener(
    "click",
    () => {
      chart.layout("organic", { tightness: 2 });
    },
    false
  );
  const clearButton = document.getElementById("clear");
  clearButton.addEventListener("click", chart.clear, false);
}

async function startKeyLines() {
  const imageAlignment = {
    "fa-female": { e: 1.2 },
    "fa-male": { e: 1.2 },
    "fa-money-bill-alt": { e: 1.125 },
  };

  const options = {
    drag: {
      links: false,
    },
    logo: { u: "/images/Logo.png" },
    // quick hover refresh time to set the glyph icon
    hover: 5,
    iconFontFamily: "Font Awesome 5 Free",
    imageAlignment,
  };

  // create the chart
  chart = await KeyLines.create({ container: "klchart", options });
  setUpUI();
}

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

window.addEventListener("DOMContentLoaded", loadFontsAndStart);