//
//     Copyright © 2011-2025 Cambridge Intelligence Limited.
//     All rights reserved.
//
//     Sample Code
//
//!    Create and edit annotations on nodes.
import KeyLines from "keylines";
import {
  colours,
  data,
  createAnnotation,
} from "./usercreatedannotations-data.js";

let chart;
let annotationIdCount = 1;
let nodeIdWithAnnotateButton = null;
let annotationBeingUpdated = null;
let hoveredAnnotationId = null;
let annotationToolbarShown = false;
const editLabelIndex = 2;
const chartContainer = document.getElementById("klchart");
const annotateButton = document.getElementById("annotate-button");
const annotationPreview = document.getElementById("annotation-preview");
const annotationTextArea = document.getElementById("annotation-text");
const textMeasurementSpan = document.getElementById("text-measure");

async function annotate() {
  const annotationSubjects = getSelectedNodeIds();
  // Clear chart selection when an annotation is created
  chart.selection([]);
  hideAnnotateButton();
  // Reset the pointer cursor override from the edit label
  setCursor(null);

  // Add the initial annotation to the chart to help with overlay positioning
  annotationBeingUpdated = createAnnotation(
    `a${++annotationIdCount}`,
    annotationSubjects
  );
  await chart.merge(annotationBeingUpdated);

  // Ensure the new annotations and its subjects are in view if required
  await fitViewToAnnotation();
  placeAnnotationPreview();
  setupAnnotationPreview();
}

async function finalizeAnnotation(action) {
  if (annotationBeingUpdated === null) return;
  if (action === undefined || action === "dismiss") {
    const annotationText = annotationBeingUpdated.t[1].t;
    action = annotationText === "" ? "delete" : "dismiss";
  }
  if (action === "delete") {
    chart.removeItem(annotationBeingUpdated.id);
  } else {
    const windowSelection = window.getSelection();
    // Clear text highlighting
    if (windowSelection.rangeCount !== 0) {
      windowSelection.removeAllRanges();
    }
  }
  annotationPreview.style.display = "none";
  annotationBeingUpdated = null;
}

async function initialiseAnnotationEdit() {
  chart.selection([]);
  placeAnnotationPreview();
  // Preconfigure the preview element for the annotation we are editing
  setupAnnotationPreview();
}

// Determines whether an annotation is currently in view
function isAnnotationOutOfBounds(id) {
  const annotationPosition = chart.labelPosition(id, 0);
  const chartContainerBounds = chartContainer.getBoundingClientRect();
  const outOfVerticalBounds =
    annotationPosition.y1 <= 0 ||
    annotationPosition.y2 >= chartContainerBounds.height;
  const outOfHorizontalBounds =
    annotationPosition.x1 <= 0 ||
    annotationPosition.x2 >= chartContainerBounds.width;
  return outOfVerticalBounds || outOfHorizontalBounds;
}

// Fits the view to the annotation and its subjects if required
async function fitViewToAnnotation() {
  // Check whether we need to adjust the view to allow the annotation space
  if (isAnnotationOutOfBounds(annotationBeingUpdated.id)) {
    await chart.zoom("fit", {
      ids: [
        annotationBeingUpdated.id,
        ...annotationBeingUpdated.subjects.map((id) => id),
      ],
      animate: true,
      time: 400,
    });
  }
}

function getSelectedNodeIds() {
  return chart.selection().filter((id) => chart.getItem(id).type === "node");
}

function getLatestSelectedNodeId() {
  const selectedNodeIds = getSelectedNodeIds();
  return selectedNodeIds[selectedNodeIds.length - 1];
}

/* Positions the annotate button based on the current
   chart zoom level and attached node position */
function updateAnnotateButtonPosition() {
  const nodeBaseSize = 27;
  const node = chart.getItem(nodeIdWithAnnotateButton);
  const { x, y } = chart.viewCoordinates(node.x, node.y);
  const { zoom } = chart.viewOptions();
  const nodeSize = nodeBaseSize * zoom;
  annotateButton.style.left = `${x + nodeSize}px`;
  annotateButton.style.top = `${y - annotateButton.clientHeight - nodeSize}px`;
}

// Hides / shows the edit tool bar on the annotation preview
function toggleAnnotationToolbar(show) {
  const annotationToolbar = document.getElementById("annotation-toolbar");
  const ghostDoneButton = document.getElementById("ghost-done-button");
  const toolbarDisplay = show ? "flex" : "none";
  const ghostDoneButtonDisplay = show ? "none" : "block";
  annotationToolbar.style.display = toolbarDisplay;
  ghostDoneButton.style.display = ghostDoneButtonDisplay;
  annotationToolbarShown = show;
}

function placeAnnotationPreview() {
  // Get the position of the annotation's background label to place the preview
  const annotationPosition = chart.labelPosition(annotationBeingUpdated.id, 0);
  annotationPreview.style.top = `${annotationPosition.y1}px`;
  annotationPreview.style.left = `${annotationPosition.x1}px`;
  annotationPreview.style.display = "flex";
  annotationTextArea.focus();
}

function updateTextAreaHeight() {
  annotationTextArea.style.height = "auto";
  annotationTextArea.style.height = `${annotationTextArea.scrollHeight}px`;
}

/* KeyLines doesn't wrap strings without spaces so add new lines manually
   to handle long words which exceed the annotation body width */
function wrapLongWord(word) {
  let wrappedText = "";
  let tempLine = "";
  for (const char of word) {
    // Add characters to the measurement span incrementally to check if the word exceeds the annotation bounds
    textMeasurementSpan.textContent = `${tempLine}${char}`;
    if (
      textMeasurementSpan.getBoundingClientRect().width >
      annotationTextArea.clientWidth
    ) {
      wrappedText += `${tempLine}\n`;
      tempLine = char;
    } else {
      tempLine += char;
    }
  }
  // Add remaining part of word
  wrappedText += tempLine;
  return wrappedText;
}

function formatAnnotationInputText(string) {
  let formattedText = "";
  const words = string.split(" ");
  words.forEach((word) => {
    textMeasurementSpan.textContent = word;
    /* Use the measurement span to check if a word doesn't fit on a single line in the text area 
           if it does wrap it across multiple lines */
    if (
      textMeasurementSpan.getBoundingClientRect().width >
      annotationTextArea.clientWidth
    ) {
      formattedText += wrapLongWord(word) + " ";
    } else {
      formattedText += word + " ";
    }
  });
  return formattedText.trim();
}

/* Updates the chart annotation text & height properties to ensure the preview
   element can be synced to the correct position */
async function updateAnnotationTextAndHeight(text, height) {
  const annotationBeingUpdatedLabels = annotationBeingUpdated.t;
  annotationBeingUpdatedLabels[1].t = text;
  await chart.setProperties({
    id: annotationBeingUpdated.id,
    t: annotationBeingUpdatedLabels,
    h: height,
  });
}

async function onAnnotationInput() {
  // Remove any trailing whitespaces and new lines (\n) that may have been added from previous long words
  const cleanTextInput = annotationTextArea.value.replace(/\n/g, "").trim();
  const cleanTextLength = cleanTextInput.length;
  const showToolbar = cleanTextLength > 0 && !annotationToolbarShown;
  // Ensure annotation preview height grows / shrinks with the text input
  updateTextAreaHeight();

  if (showToolbar) {
    toggleAnnotationToolbar(true);
  } else if (annotationToolbarShown && cleanTextLength === 0) {
    // If we only have white space hide the toolbar
    toggleAnnotationToolbar(false);
  }

  // Format text so long words are wrapped correctly before updating chart annotation text
  const formattedText = formatAnnotationInputText(cleanTextInput);
  // Update the chart annotation text & height so we can position the preview
  await updateAnnotationTextAndHeight(
    formattedText,
    annotationPreview.offsetHeight
  );
  // Sync the preview overlay position with the chart annotation position
  placeAnnotationPreview();
}

async function onAnnotationKeyDown(e) {
  const { key } = e;
  if (annotationBeingUpdated !== null) {
    if (key === "Escape") {
      finalizeAnnotation();
    }
    if (key === "Enter") {
      // Don't create new lines for enter
      e.preventDefault();
      await finalizeAnnotation("dismiss");
    }
  }
}

// Sets up the initial state for the preview based on the annotation being edited
function setupAnnotationPreview() {
  const { t } = annotationBeingUpdated;
  const annotationText = t[1].t;
  annotationTextArea.value = annotationText;
  toggleAnnotationToolbar(annotationText !== "");
  updateTextAreaHeight();
}

function hideAnnotateButton() {
  annotateButton.style.display = "none";
  nodeIdWithAnnotateButton = null;
}

function placeAnnotateButtonOnNode(nodeId) {
  nodeIdWithAnnotateButton = nodeId;
  annotateButton.style.display = "block";
  updateAnnotateButtonPosition();
}

async function onSelectionChange() {
  // remove the glyph from the previous selected node if we have one
  if (nodeIdWithAnnotateButton) {
    hideAnnotateButton();
  }
  if (getSelectedNodeIds().length > 0) {
    placeAnnotateButtonOnNode(getLatestSelectedNodeId());
  }
}

async function onClick({ id, subItem, preventDefault }) {
  // If the chart is clicked while an annotation is being edited finalize the annotation
  if (annotationBeingUpdated !== null) {
    finalizeAnnotation();
    preventDefault();
    return;
  }

  if (id) {
    const clickedItem = chart.getItem(id);
    if (
      clickedItem.type === "annotation" &&
      subItem?.index === editLabelIndex
    ) {
      if (nodeIdWithAnnotateButton !== null) {
        hideAnnotateButton();
      }
      // Prevent selection from being cleared when an annotation is clicked
      preventDefault();
      setCursor(null);
      annotationBeingUpdated = clickedItem;
      await initialiseAnnotationEdit();
    }
  }
}

async function onDragStart() {
  // If the chart is dragged while an annotation is being edited finalize the annotation
  if (annotationBeingUpdated !== null) {
    await finalizeAnnotation();
  }
}

function onDragMove({ id }) {
  // Update the annotate button position while dragging the attached node
  if (id && getSelectedNodeIds().includes(id)) {
    updateAnnotateButtonPosition();
  }
}

function onViewChange() {
  // Update the annotate button position while zooming and panning the chart
  if (nodeIdWithAnnotateButton) {
    updateAnnotateButtonPosition();
  }
}

/* Ensures annotate button position is updated when nodes
   are moved using the keyboard arrow keys */
function onPreChange({ type }) {
  if (type === "move" && nodeIdWithAnnotateButton !== null) {
    setTimeout(() => {
      updateAnnotateButtonPosition();
    });
  }
}

async function onHover({ id, subItem }) {
  const hoveringEditLabel = id && subItem?.index === editLabelIndex;
  if (hoveringEditLabel) {
    hoveredAnnotationId = id;
  }
  // Apply styling updates when the chart annotation edit button is hovered
  if (hoveredAnnotationId !== null) {
    await updateEditLabelHoverState(
      hoveringEditLabel,
      chart.getItem(hoveredAnnotationId)
    );
    const cursorUpdateType = hoveringEditLabel ? "pointer" : "null";
    setCursor(cursorUpdateType);
  }
  if (id === null) {
    hoveredAnnotationId = null;
  }
}

async function updateEditLabelHoverState(hovered, hoveredAnnotation) {
  const hoveredAnnotationLabel = hoveredAnnotation?.t;
  if (hoveredAnnotationLabel) {
    const editLabelHoverColour = hovered
      ? colours.hoveredEditLabel
      : colours.defaultEditLabel;
    hoveredAnnotation.t[editLabelIndex].fbc = editLabelHoverColour;
    await chart.setProperties({
      id: hoveredAnnotation.id,
      t: hoveredAnnotation.t,
    });
  }
}

// Enable cursor styling override while interacting with the chart
function setCursor(type) {
  // get all non-cursor classes
  const classes = Array.from(chartContainer.classList).filter(
    (cn) => !cn.match(/^cursor-/)
  );
  if (type) {
    classes.push(`cursor-${type}`);
  }
  chartContainer.className = classes.join(" ");
}

function initialiseInteractions() {
  chart.on("selection-change", onSelectionChange);
  chart.on("click", onClick);
  chart.on("hover", onHover);
  chart.on("drag-start", onDragStart);
  chart.on("drag-move", onDragMove);
  chart.on("prechange", onPreChange);
  chart.on("view-change", onViewChange);
  const confirmAnnotationUpdateButton = document.getElementById("done");
  const deleteAnnotationButton = document.getElementById("delete");
  annotateButton.addEventListener("click", annotate);
  confirmAnnotationUpdateButton.addEventListener("click", () =>
    finalizeAnnotation("dismiss")
  );
  deleteAnnotationButton.addEventListener("click", () =>
    finalizeAnnotation("delete")
  );
  annotationTextArea.addEventListener("input", onAnnotationInput);
  annotationTextArea.addEventListener("keydown", onAnnotationKeyDown);
}

async function startKeyLines() {
  const options = {
    handMode: true,
    backColour: "rgb(209, 224, 230)",
    overview: false,
    navigation: false,
    selectedNode: {
      c: colours.selectedNode,
    },
    selectedLink: {},
    hover: 10,
    fontFamily: "Muli",
    iconFontFamily: "CI-Icons",
  };

  chart = await KeyLines.create({ container: "klchart", options });
  await chart.load(data);
  await chart.layout("sequential", {
    level: "level",
    tightness: 0,
    stretch: 0.54,
    animate: false,
  });

  await chart.zoom("fit", { ids: ["n1", "n2", "n3"] });

  initialiseInteractions();
}

// if you need font icons, keep this.
// If not, call startKeyLines() from the listener on the last line and delete this function
function loadWebFonts() {
  document.fonts.load('24px "CI-Icons"').then(startKeyLines);
}

window.addEventListener("DOMContentLoaded", loadWebFonts);