//
//     Copyright © 2011-2025 Cambridge Intelligence Limited.
//     All rights reserved.
//
//     Sample Code
//
//!    Create fully custom HTML overlays for the chart.
import KeyLines from "keylines";
import { data } from "./overlayhtml-data.js";

let chart;
const baseAnnotationOffset = 35;
const annotations = {};
const chartContainer = document.getElementById("klchart");
const templateHtml = document.getElementById("annotation_html").innerHTML;

function createAnnotation(item) {
  const itemId = item.id;
  // Add details to the template
  const html = templateHtml
    .replace(/{{annotation-id}}/, itemId)
    .replace(/{{close-id}}/, `${itemId}-close`)
    .replace(/{{note}}/, item.d.notes);

  // Add annotation to the DOM
  const annotationContainer = createAnnotationContainer(itemId);
  chartContainer.appendChild(annotationContainer);
  annotationContainer.innerHTML = html;

  // Update the annotations lookup state
  annotations[itemId] = {
    element: document.getElementById(`${itemId}`),
    show: true,
  };

  // Allow annotations to be closed manually
  document.getElementById(`${itemId}-close`).addEventListener("click", () => {
    closeAnnotation(itemId);
  });
}

function createAnnotationContainer(itemId) {
  const newAnnotationContainer = document.createElement("div");
  newAnnotationContainer.itemId = `annotation-container-${itemId}`;
  newAnnotationContainer.setAttribute("data-id", itemId);
  return newAnnotationContainer;
}

function updateAnnotationsPositions(zoomValue) {
  const zoom = zoomValue || chart.viewOptions().zoom;
  Object.keys(annotations).forEach((annotation) => {
    if (annotations[annotation].show) {
      const element = annotations[annotation].element;
      const item = chart.getItem(annotation);
      const point = chart.viewCoordinates(
        item.x + baseAnnotationOffset * (item.e || 1),
        item.y
      );
      // Translate the annotation so its position corresponds to the point of the arrow
      // and scale the size of the annotation depending on zoom level
      element.style.transform = `translate(5px, -44px) scale(${Math.max(
        0.9,
        Math.min(2, zoom)
      )}`;
      element.style.left = `${point.x}px`;
      element.style.top = `${point.y}px`;
    }
  });
}

function toggleStickyNoteGlyph(id, show) {
  chart.setProperties({
    id,
    g: show
      ? [
          {
            p: "ne",
            fi: {
              t: "fas fa-sticky-note",
              c: "#FEA95E",
            },
            e: 1.8,
          },
        ]
      : null,
  });
}

function toggleAllAnnotations(showAll) {
  Object.keys(annotations).forEach((itemId) => {
    if (showAll) {
      showAnnotation(itemId);
    } else {
      closeAnnotation(itemId);
    }
  });
}

function closeAnnotation(itemId) {
  const annotation = annotations[itemId];
  if (annotation.show) {
    annotation.show = false;
    toggleStickyNoteGlyph(itemId, true);
    annotation.element.style.visibility = "hidden";
  }
}

// Show the annotation and remove the indicative glyph
function showAnnotation(itemId) {
  const annotation = annotations[itemId];
  if (!annotation.show) {
    annotations[itemId].show = true;
    toggleStickyNoteGlyph(itemId, false);
    annotations[itemId].element.style.visibility = "visible";
  }
}

// Show the annotation of a selected item
function handleClick({ id }) {
  if (id && annotations[id] && !annotations[id].show) {
    showAnnotation(id);
    updateAnnotationsPositions();
  }
}

function initialiseInteractions() {
  document.getElementById("showAnnotations").addEventListener("click", () => {
    toggleAllAnnotations(true);
    updateAnnotationsPositions();
  });

  document.getElementById("hideAnnotations").addEventListener("click", () => {
    toggleAllAnnotations(false);
  });

  // Update all annotation positions on view change, but close them when the view dimensions change
  chart.on("view-change", () => {
    const { zoom } = chart.viewOptions();
    updateAnnotationsPositions(zoom);
  });

  chart.on("click", handleClick);

  // Keep the shown annotation position relative to the node
  // when dragging the node and panning the chart
  chart.on("drag-move", () => updateAnnotationsPositions());
}

async function startKeyLines() {
  const options = {
    handMode: true,
    iconFontFamily: "Font Awesome 5 Free",
    selectedNode: {
      fc: "#000000",
    },
  };

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

  chart.load(data);

  // If a node has a note, create an HTML annotation element for it
  chart.each({ type: "node" }, (item) => {
    if (item.d && item.d.notes) {
      createAnnotation(item);
    }
  });
  chart.layout("organic", { tightness: 3, consistent: true });
  initialiseInteractions();
}

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

window.addEventListener("DOMContentLoaded", loadWebFonts);