//
//     Copyright © 2011-2025 Cambridge Intelligence Limited.
//     All rights reserved.
//
//     Sample Code
//
//!    Explore bitcoin transactions and their blockchain structure.
import KeyLines from "keylines";
import { data } from "./bitcoin-data.js";

let chart;
let comboIds;
let graph;
let timebar;

const currentViewState = {
  index: 0, // tracks currentViewState
  itemInfo: () => {}, // shows rhs info
  stateTransition: false, // flag to override timebar change event during view changes
};
// Text of differents views
const views = {
  0: document.getElementById("view0"),
  1: document.getElementById("view1"),
  2: document.getElementById("view2"),
  3: document.getElementById("view3"),
};
// Text between buttons
const viewEl = document.getElementById("view");
// State chage buttons
const button = {
  next: document.getElementById("next"),
  prev: document.getElementById("prev"),
};

// Generates and renders the rhs information text
function getSelectedItemInfo() {
  const currencySymbols = { btc: "₿", usd: "$" };
  const contentEl = document.getElementById("content");
  const headerEl = document.getElementById("header");
  function format(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
  }
  function truncate(string) {
    return string.substring(0, Math.min(25, string.length)).concat("...");
  }
  function addCommas(string) {
    return string.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }
  function highlight(float) {
    const splitString = float.toFixed(2).split(".");
    return `<b>${addCommas(splitString[0])}</b>.${splitString[1]}`;
  }
  const handlers = {
    value: {
      label: "Value",
      content: (d) =>
        `${currencySymbols.btc + d.btc} / ${
          currencySymbols.usd + highlight(d.usd)
        }`,
    },
    hash: { label: "Hash", content: (d) => truncate(d) },
    type: { label: "Type", content: (d) => format(d) },
    level: { label: "Time", content: (d) => new Date(d).toUTCString() },
    address: { label: "Address", content: (d) => truncate(d) },
    transaction: {
      label: "Transaction",
      content: (d) => truncate(chart.getItem(d).d.hash),
    },
  };
  function getContent(props) {
    return Object.keys(props)
      .map((key) => {
        const handler = handlers[key];
        return `<tr><td><strong>${
          handler.label
        }</strong></td><td>${handler.content(props[key])}</td></tr>`;
      })
      .join("");
  }
  return {
    show: (props) => {
      headerEl.style.display = props ? "none" : "block";
      contentEl.innerHTML = props ? getContent(props) : "";
    },
  };
}

// Converts dates to milliseconds
function toMS(dt) {
  return Date.UTC(
    dt.getFullYear(),
    dt.getMonth(),
    dt.getDate(),
    dt.getHours(),
    dt.getMinutes(),
    dt.getSeconds(),
    dt.getMilliseconds()
  );
}

// Make the timebar range a bit broader
async function setTimebarRange() {
  const offset = 1000;
  const range = await timebar.range();
  await timebar.range(toMS(range.dt1) - offset, toMS(range.dt2) + offset, {
    animate: false,
  });
}

async function foregroundItemsInRange() {
  await chart.foreground(timebar.inRange);
}

async function closeCombos() {
  await chart.combo().close(comboIds, { animate: false });
}

// Hides some autogenerated arrows on combolinks
function hideArrowsFromComboLinks() {
  const props = [];
  chart.each({ type: "link", items: "toplevel" }, (link) => {
    if (chart.combo().isCombo(link.id2)) {
      props.push({ id: link.id, a1: false, a2: false, c2: "#d3d3d3" });
    }
  });
  chart.setProperties(props);
}

async function revealLinks(item) {
  const itemType = item.d.type;
  if (itemType === "transaction") {
    const linksToReveal = [];
    const neighbours = await graph.neighbours(item.id);
    neighbours.links.forEach((linkId) => {
      const link = chart.getItem(linkId);
      const isChildNode = !!chart.getItem(link.id2).parentId;
      const isOpenCombo = !!chart.combo().isOpen(chart.combo().find(link.id2));
      if (isChildNode && isOpenCombo) linksToReveal.push(linkId);
    });
    chart.combo().reveal(linksToReveal);
  } else if ((itemType === "input" || itemType === "output") && item.parentId) {
    const linksToReveal = await graph.neighbours(item.id).links;
    chart.combo().reveal(linksToReveal);
  }
}

function showInfoAndRevealLinks() {
  currentViewState.itemInfo.show();
  chart.combo().reveal([]);
  const item = chart.getItem(chart.selection()[0]);
  if (item && item.type === "node") {
    currentViewState.itemInfo.show(item.d);
    revealLinks(item);
  }
}

// Zoom to fit all items
async function zoomToFit() {
  await Promise.all([
    chart.zoom("fit", { animate: true, time: 1000 }),
    timebar.zoom("fit", { animate: true, time: 1000 }),
  ]);
  await foregroundItemsInRange();
}

// Zoom to specific items
async function zoomToIds(ids) {
  await Promise.all([
    chart.zoom("fit", { animate: true, time: 1000, ids }),
    timebar.zoom("fit", { animate: true, time: 1000, id: ids }),
  ]);
  await setTimebarRange();
  await foregroundItemsInRange();
}

async function dismissChain() {
  await zoomToFit();
  await chart.filter(() => true, { type: "node" });
  await chart.hide(data.chainLinkIds);
  await chart.animateProperties(data.layout.organic);
  comboIds = await chart.combo().combine(data.comboDefs, { select: false });
  hideArrowsFromComboLinks();
  await zoomToFit();
}

async function inspectChain() {
  await zoomToIds(data.chainNodeIds);
  await chart.combo().uncombine(comboIds || data.comboIds, { select: false });
  await chart.filter((node) => data.chainNodeIds.includes(node.id), {
    type: "node",
  });
  await chart.show(data.chainLinkIds);
  await chart.animateProperties(data.layout.sequential);
  await zoomToFit();
}

async function dismissTxs() {
  await chart.filter(() => true, { type: "link", items: "toplevel" });
  await zoomToFit();
}

async function inspectTxs(ids) {
  const neighbours = await chart.graph().neighbours(ids, { hops: Infinity });
  await chart.filter((link) => neighbours.links.includes(link.id), {
    type: "link",
    items: "toplevel",
  });
  await zoomToIds([...ids, ...neighbours.nodes, ...neighbours.links]);
}

// Introduce a 500ms pause to make zooming transitions easier to follow;
async function pauseAnimation() {
  await new Promise((resolve) => setTimeout(resolve, 500));
}

// Action mapping for forward currentViewState changes
async function getPrevState() {
  await {
    0: async () => {
      await dismissTxs();
    },
    1: async () => {
      await dismissTxs();
      await pauseAnimation();
      await inspectTxs(["t1013", "t886"]);
    },
    2: async () => {
      await dismissChain();
      await pauseAnimation();
      await inspectTxs(["t282", "t283"]);
    },
    3: async () => {
      await inspectChain();
    },
  }[currentViewState.index % 4]();
}

// Action mapping for backwards currentViewState changes
async function getNextState() {
  await {
    0: async () => {
      await dismissChain();
    },
    1: async () => {
      await inspectTxs(["t1013", "t886"]);
    },
    2: async () => {
      await dismissTxs();
      await pauseAnimation();
      await inspectTxs(["t282", "t283"]);
    },
    3: async () => {
      await dismissTxs();
      await pauseAnimation();
      await inspectChain();
    },
  }[currentViewState.index % 4]();
}

function disableUI() {
  button.prev.disabled = true;
  button.next.disabled = true;
}

function enableUI() {
  button.prev.disabled = currentViewState.index === 0;
  button.next.disabled = false;
}

// Update view text and text between buttons
function updateView() {
  Object.keys(views).forEach((i) => {
    views[i].style.display = "none";
  });
  views[currentViewState.index % 4].style.display = "block";
  viewEl.innerHTML = `${(currentViewState.index % 4) + 1} of 4`;
}

function enableUserInteraction() {
  enableUI();
  chart.on("selection-change", showInfoAndRevealLinks);
  // Disable node dragging
  chart.on("drag-start", ({ preventDefault, type }) => {
    if (type === "node") {
      preventDefault();
    }
  });

  timebar.on("change", foregroundItemsInRange);

  // Click handlers
  const handlers = {
    prev: async () => {
      currentViewState.index--;
      updateView();
      await getPrevState();
    },
    next: async () => {
      currentViewState.index++;
      updateView();
      await getNextState();
    },
  };

  ["prev", "next"].forEach((id) => {
    button[id].addEventListener(
      "click",
      async () => {
        // Override change event when zooming and manually foreground items
        timebar.off("change");
        closeCombos();
        disableUI();
        await handlers[id]();
        enableUI();
        timebar.on("change", foregroundItemsInRange);
      },
      false
    );
  });
}

async function startKeyLines() {
  graph = KeyLines.getGraphEngine();
  graph.load(data);
  currentViewState.itemInfo = getSelectedItemInfo();

  const chartOpts = {
    backColour: "#282828",
    controlTheme: "dark",
    defaultStyles: { comboGlyph: null },
    drag: { links: false },
    handMode: true,
    iconFontFamily: "Font Awesome 5 Free",
    imageAlignment: { "fas fa-exchange-alt": { e: 0.7 } },
    minZoom: 0.001,
    overview: { icon: false, shown: false },
    selectionColour: "#d3d3d3",
  };

  const timebarOpts = {
    area: { colour: "#d24dff" },
    backColour: "#282828",
    controlBarTheme: "dark",
    scale: { highlightColour: "#363636" },
    sliders: "none",
    type: "area",
  };

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

  await chart.load(data);
  await timebar.load(data);
  await zoomToFit();
  hideArrowsFromComboLinks();
  enableUserInteraction();
}

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

window.addEventListener("DOMContentLoaded", loadWebFonts);