//
//
//     Copyright © 2011-2025 Cambridge Intelligence Limited.
//     All rights reserved.
//
//     Sample Code
//!    Reveal the dependencies and significance of nodes.
import KeyLines from "keylines";
import {
  data,
  fontIcons,
  errorColour,
  warningColour,
  dimmedColour,
  bgColour,
  annotationsState,
} from "./impact-data.js";

// declaring global vars
let chart;
let impactAlertsSelection = document.querySelector(
  'input[name="dependencyView"]:checked'
).value;
let showNodes = null;
let selectedNodeId = null;
const squareNodeText = {};
const rectangleNodeText = {};
const initialNodeStyles = [];
const alertsItems = [];
let hoveredGlyphId = null;
let hoveredAnnotationGlyphId = null;

const graph = KeyLines.getGraphEngine();
graph.load(data);

const impactAlertsRadios = Array.from(
  document.querySelectorAll('input[name="dependencyView"]')
);
const alertsList = document.getElementById("alerts");
const resetButton = document.getElementById("reset");

function getScaleFactor(numOfDeps) {
  return numOfDeps ** (1 / 3);
}

function highlightErrorsAndWarnings() {
  const colourItems = [];
  const warnings = [];
  let errors = [];

  chart.each({ type: "node" }, (item) => {
    if (item.d.logLevel === "error") {
      errors.push(item.id);
      let neighbours = graph.neighbours(item.id, { direction: "from", hops: 5 })
        .nodes;
      errors = errors.concat(neighbours);
    } else if (item.d.logLevel !== "warning") {
      colourItems.push({ id: item.id, c: dimmedColour });
    }
  });
  chart.each({ type: "node" }, (item) => {
    if (item.d.logLevel === "warning") {
      warnings.push(item.id);
      let neighbours = graph.neighbours(item.id, { direction: "from", hops: 5 })
        .nodes;
      neighbours.forEach((id) => {
        if (!errors.includes(id)) {
          warnings.push(id);
        }
      });
    }
  });
  errors.forEach((id) => colourItems.push({ id, c: errorColour }));
  warnings.forEach((id) => colourItems.push({ id, c: warningColour }));

  chart.each({ type: "link" }, (item) => {
    if (errors.includes(item.id2)) {
      colourItems.push({ id: item.id, c: errorColour, c2: errorColour });
    } else if (warnings.includes(item.id2)) {
      colourItems.push({ id: item.id, c: warningColour, c2: warningColour });
    } else {
      colourItems.push({ id: item.id, c: dimmedColour, c2: dimmedColour });
    }
  });
  chart.setProperties(colourItems);
  applyAnnotationStateUpdateToChart();
}

function applyAnnotationStateUpdateToChart() {
  const annotations = [];
  for (const [_, value] of Object.entries(annotationsState)) {
    if (value.hidden) continue;
    annotations.push(value.annotation);
  }
  chart.merge(annotations);
}

function removeAnnotationFromChart(id) {
  chart.removeItem(id);
}

function constructTable() {
  const tableBody = document.querySelector(".alertsTableBody");
  alertsItems.forEach((item) => {
    const label = document.createElement("td");
    const labelText = document.createTextNode(item.label);
    label.appendChild(labelText);

    const type = document.createElement("td");
    const typeText = document.createTextNode(
      item.type.charAt(0).toUpperCase() + item.type.slice(1)
    );
    type.appendChild(typeText);

    const description = document.createElement("td");
    const descriptionText = document.createTextNode(item.description);
    description.appendChild(descriptionText);

    const row = document.createElement("tr");
    row.id = item.nodeId;
    row.setAttribute("name", "alertRow");
    row.appendChild(label);
    row.appendChild(type);
    row.appendChild(description);
    row.onclick = function () {
      setSelection({ id: item.nodeId });
    };

    tableBody.appendChild(row);
  });
}

function clearTableStyling() {
  const alertsTableRows = document.querySelectorAll('tr[name="alertRow"]');
  alertsTableRows.forEach((row) => {
    row.classList.remove("selected-row");
  });
}

function showHideAlertsList() {
  impactAlertsSelection = document.querySelector(
    'input[name="dependencyView"]:checked'
  ).value;

  if (impactAlertsSelection === "impact") {
    chart.each({ type: "annotation" }, (annotation) => {
      chart.removeItem(annotation.id);
    });
    chart.setProperties(initialNodeStyles);
    alertsList.classList.add("hidden");
  } else {
    highlightErrorsAndWarnings();
    alertsList.classList.remove("hidden");
  }
}

async function applyFilters() {
  chart.lock(true);
  const result = await chart.filter(
    (item) => {
      if (item.type === "node" && showNodes) {
        return showNodes[item.id] !== undefined;
      }
      return true;
    },
    { time: 300 }
  );
  chart.lock(false);
  return result;
}

async function doLayout() {
  const layoutOptions = {
    consistent: true,
    mode: "adaptive",
  };
  let layoutName;
  // A node needs to be selected for the selected layout to be run
  if (selectedNodeId) {
    // Set the top node to be the selected one
    layoutName = "sequential";

    // Increase the space between levels for gentler curves in the links
    // but reduce the space between nodes within the same level
    layoutOptions.stretch = 2;
    layoutOptions.tightness = 8;
    layoutOptions.orientation = "right";
    layoutOptions.linkShape = "curved";
  } else {
    layoutName = "organic";
    layoutOptions.tightness = 6;
  }
  await chart.layout(layoutName, layoutOptions);
}

function hoverReaction({ id, subItem }) {
  const item = chart.getItem(id);
  const isAnnotation = id && id.includes("annotation");
  const changes = [];

  // Clear any existing hover styling
  if (hoveredGlyphId) {
    const node = chart.getItem(hoveredGlyphId);
    chart.setProperties({
      id: hoveredGlyphId,
      g: [
        {
          ...node.g[0],
          border: {
            width: 1.5,
            colour: bgColour,
          },
        },
      ],
    });
    hoveredGlyphId = null;
  }

  if (hoveredAnnotationGlyphId) {
    const annotation = chart.getItem(hoveredAnnotationGlyphId);
    if (annotation) {
      changes.push({
        id: hoveredAnnotationGlyphId,
        g: [
          annotation.g[0],
          {
            ...annotation.g[1],
            border: {
              width: 1.5,
              colour: bgColour,
            },
          },
        ],
      });
    }
    hoveredAnnotationGlyphId = null;
  }

  // Add any new glyph hover styling
  if (subItem.type === "glyph" && !isAnnotation) {
    hoveredGlyphId = id;
    chart.setProperties({
      id,
      g: [
        {
          ...item.g[0],
          border: {
            width: 1.5,
            colour: "white",
          },
        },
      ],
    });
  }

  if (isAnnotation && subItem.type === "glyph" && subItem.index === 1) {
    chart.setProperties({
      id,
      g: [
        item.g[0],
        {
          ...item.g[1],
          border: {
            width: 1.5,
            colour: "white",
          },
        },
      ],
    });
    hoveredAnnotationGlyphId = id;
    return;
  }

  // Handle node + node's tree hover styling and clearing
  const tree =
    item && item.type === "node"
      ? graph.distances(id, { direction: "from" })
      : [];
  chart.each({ type: "node" }, (node) => {
    // don't overwrite selected node styling
    if (node.id !== selectedNodeId) {
      const highlight = node.id in tree && !hoveredGlyphId;
      const borderWidth = node.w === 300 ? node.w / 40 : node.w / 20;
      changes.push({
        id: node.id,
        b: highlight ? "white" : undefined,
        bw: highlight ? borderWidth : 0,
      });
    }
  });

  chart.setProperties(changes);
}

async function setSelection({ id, subItem }) {
  const isAnnotation = id && id.includes("annotation");
  if (id && subItem?.type === "glyph" && !isAnnotation) {
    annotationsState[id].hidden = false;
    applyAnnotationStateUpdateToChart();
    chart.setProperties({ id, g: [] });
    return;
  }

  if (isAnnotation && subItem?.type === "glyph" && subItem.index === 1) {
    const subjectId = chart.getItem(id).subject;
    annotationsState[subjectId].hidden = true;
    removeAnnotationFromChart(id);
    chart.setProperties({
      id: subjectId,
      g: [annotationsState[subjectId].glyphStyling],
    });
    return;
  }

  if (isAnnotation) {
    // annotations are not selectable
    return;
  }

  clearTableStyling();
  // Update the selected node with the one passed in
  if (id === null) {
    const prevSelectedNodeId = selectedNodeId;
    selectedNodeId = null;
    resetButton.disabled = true;
    setNodeStyling("square");

    // click on chart background or network button - reshow hidden items
    showNodes = null;
    if (prevSelectedNodeId) {
      const result = await applyFilters();
      // Only layout if any nodes were shown or hidden
      if (result.shown.nodes.length > 0 || result.hidden.nodes.length > 0) {
        doLayout();
      }
    }
  } else {
    selectedNodeId = id;
    const item = chart.getItem(id);
    chart.selection(id);
    if (item && item.type === "node") {
      resetButton.disabled = false;
      const alertTableRow = document.getElementById(id);
      if (alertTableRow) {
        alertTableRow.classList.add("selected-row");
      }

      showNodes = {
        ...graph.distances(id, { direction: "to" }),
        ...graph.distances(id, { direction: "from" }),
      };
      if (item.d.dependencies.length) {
        item.d.dependencies.forEach((id) => (showNodes[id] = 1));
      }
      await applyFilters();
      setNodeStyling("rectangle");
      doLayout();
    }
  }
}

function storeNodeStyling() {
  const fontColour = bgColour;
  const backgroundColour = "rgba(0,0,0,0)";
  // set and store label styling for square and rectanglular nodes
  data.items.forEach((item) => {
    if (item.type === "node") {
      squareNodeText[item.id] = {
        t: [
          {
            fi: {
              t: fontIcons[item.d.type],
            },
            position: {
              vertical: "top",
            },
            fc: fontColour,
            fbc: backgroundColour,
          },
          {
            t: item.t.replace("-", "\n"),
            position: {
              vertical: "middle",
            },
            fc: fontColour,
            fbc: backgroundColour,
            fb: true,
          },
        ],
      };
      rectangleNodeText[item.id] = {
        fi: null,
        t: [
          {
            fi: {
              t: fontIcons[item.d.type],
            },
            position: {
              vertical: "middle",
              horizontal: "left",
            },
            fc: fontColour,
            fbc: backgroundColour,
            fs: 30,
            padding: {
              left: 13,
            },
          },
          {
            t: item.t,
            fc: fontColour,
            fbc: backgroundColour,
            position: {
              vertical: "top",
              horizontal: 45,
            },
            padding: {
              top: item.d.logMessage ? 19 : 24,
            },
            fb: true,
          },
          {
            fc: fontColour,
            fbc: backgroundColour,
            t: item.d.logMessage,
            fs: 9,
          },
        ],
      };
      initialNodeStyles.push({ id: item.id, c: item.c });
    } else if (item.type === "link") {
      initialNodeStyles.push({ id: item.id, c: item.c, c2: item.c2 });
    }
  });
}

function setNodeStyling(shape) {
  const isRectangle = shape === "rectangle";
  const styles = [];

  chart.each({ type: "node" }, (node) => {
    const id = node.id;
    const logLevel = node.d.logLevel;
    const b = id === selectedNodeId ? "white" : node.c;
    const bw = 6;
    let scaleFactor = 1;
    let w = 40;
    let h = 50;
    let borderRadius = 10;
    let t;
    let g = [];

    const dependencies = Object.keys(graph.distances(id, { direction: "from" }))
      .length;

    if (impactAlertsSelection === "impact" || logLevel) {
      if (dependencies > 0) {
        scaleFactor = getScaleFactor(dependencies);
      }
    }

    if (isRectangle) {
      t = [...rectangleNodeText[node.id].t];
      w = 300;
      h = 60;

      t[0].fs = 48;
      t[0].padding = { right: 30, left: 15 };
      t[1].margin = { left: 14 };
      if (t[2]) {
        t[2].margin = { left: 14 };
      }
    } else {
      t = [...squareNodeText[node.id].t];
      w = h *= scaleFactor;
      borderRadius *= scaleFactor;
      t[0].fs = 22 * scaleFactor;
      t[0].padding = { top: 7 * scaleFactor };
      t[1].fs = 5 * scaleFactor;
      t[1].padding = { top: 17 * scaleFactor };
    }

    if (impactAlertsSelection === "alerts" && logLevel) {
      const icon = fontIcons.exclamationTriangle;
      const iconSize = isRectangle ? 2 : 1.2 * scaleFactor;
      const glyphStyling = {
        c: "white",
        p: "ne",
        fi: {
          t: icon,
          c: bgColour,
        },
        e: iconSize,
        border: {
          width: 1.5,
          colour: bgColour,
        },
      };

      if (annotationsState[id].hidden) {
        g.push(glyphStyling);
      }
      annotationsState[id].glyphStyling = glyphStyling;
    }

    styles.push({ id, t, w, h, b, bw, borderRadius, g });
  });
  chart.setProperties(styles);
}

function initialiseInteractions() {
  // On hover, foreground connected nodes
  chart.on("hover", hoverReaction);
  // On click, focus on the selected node
  chart.on("click", setSelection);
  // Hide/show alerts list based on radio selection
  impactAlertsRadios.forEach((radio) => {
    radio.addEventListener("click", () => {
      showHideAlertsList();
      const isAnnotation =
        selectedNodeId && selectedNodeId.includes("annotation");
      setSelection({ id: isAnnotation ? null : selectedNodeId });
      doLayout();
    });
  });
  resetButton.addEventListener("click", () => setSelection({ id: null }));
}

function initialiseTableData() {
  data.items.forEach((item) => {
    if (item.type == "node" && item.d.logLevel) {
      alertsItems.push({
        label: item.t,
        type: item.d.logLevel,
        description: item.d.logMessage,
        nodeId: item.id,
      });
    }
  });
}

async function startKeyLines() {
  const imageAlignment = {
    "fas fa-server": { e: 0.75 },
    "fas fa-desktop": { e: 0.75 },
    "fas fa-exclamation-triangle": { dy: -11 },
  };

  const options = {
    arrows: "large",
    backColour: bgColour,
    navigation: false,
    overview: false,
    drag: {
      links: false,
    },
    hover: 0,
    handMode: true,
    minZoom: 0.02,
    iconFontFamily: "Font Awesome 5 Free",
    imageAlignment,
    // Disable chart selection styles
    selectedNode: {},
    selectedLink: {},
  };

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

  chart.load(data);
  initialiseInteractions();
  initialiseTableData();
  constructTable();
  storeNodeStyling();
  setNodeStyling("square");
  doLayout();
}

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

window.addEventListener("DOMContentLoaded", loadKeyLines);