//
//     Copyright © 2011-2025 Cambridge Intelligence Limited.
//     All rights reserved.
//
//     Sample Code
//
//!    Show events that represent periods of time.
import KeyLines from "keylines";
import data from "./tbperiods-data.js";

let chart;
let timebar;
const selectionColours = [
  ["rgb(252, 0, 0)", "rgb(253, 141, 60)"],
  ["rgb(0, 0, 255)", "rgb(0, 191, 255)"],
  ["rgb(0, 128, 0)", "rgb(50,205,50)"],
];
const greyColours = ["rgb(105, 105, 105)", "rgb(192, 192, 192)"];
const tooltip = document.getElementById("tooltip");
const tooltipStart = document.getElementById("tooltip-start");
const tooltipEnd = document.getElementById("tooltip-end");

// Runs an organic layout
async function doLayout(mode = "adaptive") {
  await chart.layout("organic", { time: 400, easing: "linear", mode });
}

function getDate(timestamp) {
  if (!timestamp) {
    return "n/a";
  }
  const date = new Date(timestamp);
  return date.toDateString().slice(4);
}

function closeTooltip() {
  tooltip.classList.add("hidden");
}

function showTooltip({ id, x, y, type, pointerType }) {
  // only handle hover and touch + pen
  if (type === "pointer-down" && pointerType === "mouse") return;
  // null for the background
  const item = chart.getItem(id);
  // hovering over a link
  if (item && item.type === "link") {
    // fill-in tooltip
    tooltipStart.innerHTML = getDate(item.dt[0].dt1);
    tooltipEnd.innerHTML = getDate(item.dt[0].dt2);

    // position it relative to the event
    if (chart.viewOptions().width > x + 250) {
      tooltip.style.top = `${y - 28}px`;
      tooltip.style.left = `${x + 20}px`;
      tooltip.classList.remove("right");
    } else {
      tooltip.style.top = `${y - 28}px`;
      tooltip.style.left = `${x - 230}px`;
      tooltip.classList.add("right");
    }
    // show the tooltip
    tooltip.classList.remove("hidden");
  } else {
    // if not selecting a link, then close tooltip
    closeTooltip();
  }
}

function buildItemStyling(item, width, colour, border = false) {
  if (item.type === "node") {
    return {
      id: item.id,
      fi: {
        c: colour,
        t: item.d.type === "person" ? "fas fa-user" : "fas fa-building",
      },
      b: border ? colour : null,
    };
  }
  // else it is a link
  return { id: item.id, w: width || 3, c: colour };
}

function showSelection() {
  // clear all selections
  timebar.selection([]);
  const timebarSelection = [];

  const chartProperties = {};
  // set default colouring
  chart.each({ type: "all" }, (item) => {
    chartProperties[item.id] = buildItemStyling(
      item,
      3,
      item.type === "node" ? greyColours[0] : greyColours[1]
    );
  });

  // we only colour the first few items of the selection
  let selectedIds = chart.selection();

  if (selectedIds.length > selectionColours.length) {
    selectedIds = selectedIds.slice(0, selectionColours.length);
  }
  chart.selection(selectedIds);

  selectedIds.forEach((id, index) => {
    let neighbouringNodes = [];
    let links = [];
    const item = chart.getItem(id);
    const colour =
      index < selectionColours.length
        ? selectionColours[index][0]
        : greyColours[1];

    if (item.type === "node") {
      // note we use all: true so that we apply styles also to
      // hidden nodes and links that aren't in the current time range
      const neighbours = chart.graph().neighbours(id, { all: true });
      links = neighbours.links;
      neighbouringNodes = neighbours.nodes;

      // colour node
      chartProperties[id] = buildItemStyling(item, 3, colour, true);
    } else {
      // it is a link
      links.push(id);
      neighbouringNodes.push(item.id1, item.id2);

      // colour link
      chartProperties[id] = buildItemStyling(item, 5, colour);
    }

    // colour neighbouring nodes
    neighbouringNodes.forEach((neighbourId) => {
      if (
        chartProperties[neighbourId].fi.c === greyColours[0] &&
        index < selectionColours.length
      ) {
        chartProperties[neighbourId] = buildItemStyling(
          chart.getItem(neighbourId),
          3,
          selectionColours[index][1]
        );
      }
    });

    // and select in the timebar
    timebarSelection.push({
      id: links,
      index,
      c: colour,
    });
  });

  timebar.selection(timebarSelection);
  chart.setProperties(
    Object.keys(chartProperties).map((key) => chartProperties[key])
  );
}

function resizePeopleByDegree() {
  function normalize(max, min, value) {
    return max === min ? min : (value - min) / (max - min);
  }

  const values = chart.graph().degrees();
  const ids = Object.keys(values);
  const valuesArray = Object.keys(values).map((key) => values[key]);
  const max = Math.max.apply(null, valuesArray);
  const min = Math.min.apply(null, valuesArray);

  const resizedNodes = ids.map((id) => {
    const item = chart.getItem(id);
    const resizeValue =
      item.d.type === "person" ? normalize(max, min, values[id]) : 0;
    return { id, e: 2 * resizeValue + 1 };
  });

  chart.setProperties(resizedNodes);
}

function initialiseInteractions() {
  chart.on("hover", showTooltip);
  chart.on("pointer-down", showTooltip);
  chart.on("selection-change", showSelection);

  const layoutButton = document.getElementById("layout");
  layoutButton.addEventListener("click", () => {
    doLayout("full");
  });

  timebar.on("change", async () => {
    // filter the chart to show only items in the new range
    await chart.filter(timebar.inRange, { animate: false, type: "link" });

    // and then adjust the chart's layout
    resizePeopleByDegree();
    doLayout();
  });
}

async function loadData() {
  data.items.forEach((element) => {
    if (element.type === "node") {
      element.fi = {
        c: greyColours[0],
        t: element.d.type === "person" ? "fas fa-user" : "fas fa-building",
      };
    }
  });

  // load the data (defined in separate js file) into both the chart and time bar
  timebar.load(data);
  timebar.zoom("fit", { animate: false });

  chart.load(data);
  resizePeopleByDegree();
  await doLayout();

  initialiseInteractions();
}

async function loadKeyLines() {
  const options = {
    selectedNode: {},
    selectedLink: {},
    handMode: true,
    logo: "/images/Logo.png",
    overview: { icon: false },
    hover: 5,
    iconFontFamily: "Font Awesome 5 Free",
  };

  const tbOptions = { minScale: { units: "day" } };

  const components = await KeyLines.create([
    { container: "klchart", type: "chart", options },
    { container: "kltimebar", type: "timebar", options: tbOptions },
  ]);

  chart = components[0];
  timebar = components[1];

  loadData();
}

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

window.addEventListener("DOMContentLoaded", loadFonts);