//
//     Copyright © 2011-2025 Cambridge Intelligence Limited.
//     All rights reserved.
//
//     Sample Code
//
//!    Work with data spanning multiple levels.
import KeyLines from "keylines";
import data from "./sequential-data.js";

let chart;
let generatedData;
let maxLevels;
const options = {
  multiComp: false,
};

const linkShapeInputs = [
  ...document.querySelectorAll('input[name="linkshape"]'),
];
const orientationInputs = [
  ...document.querySelectorAll('input[name="orientation"]'),
];
const generateDataEl = document.getElementById("generate");
const levelOrderingInputs = [
  ...document.querySelectorAll('input[name="levelOrdering"]'),
];
const orderByInputs = [...document.querySelectorAll('input[name="orderBy"]')];
const stretchSliderEl = document.getElementById("stretchSlider");
const stretchSliderInput = document.querySelector('input[name="stretch"]');

// Return a colour gradient scale by adjusting the alpha value based on the max levels
function getColourScale() {
  const colourScale = [];
  const startColour = { r: 0, g: 201, b: 128 };
  const endColour = { r: 255, g: 255, b: 255 };

  const deltaR = (endColour.r - startColour.r) / maxLevels;
  const deltaG = (endColour.g - startColour.g) / maxLevels;
  const deltaB = (endColour.b - startColour.b) / maxLevels;

  colourScale.push(`rgb(${startColour.r}, ${startColour.g}, ${startColour.b})`);
  for (let i = 1; i <= maxLevels; i++) {
    colourScale.push(
      `rgb(${Math.round(startColour.r + deltaR * i)}, ${Math.round(
        startColour.g + deltaG * i
      )}, ${Math.round(startColour.b + deltaB * i)})`
    );
  }

  return colourScale;
}

function resetLevelColourScale(isUniform) {
  const colourScale = getColourScale();
  const props = [];
  chart.each({ type: "node" }, ({ id, d }) =>
    props.push(
      isUniform
        ? // Revert to the same colour for all nodes
          { id, c: "rgb(0, 201, 128)", fc: "rgba(0,0,0,0)" }
        : // Set the colour scale on the level assignment
          { id, c: colourScale[d.level], fc: "rgb(0,0,0)" }
    )
  );
  chart.setProperties(props);
}

function resetGlyphs(show) {
  // rescale number glyphs to distinguish them in the UI from level numbers
  const scale = 10;
  const props = [];

  chart.each({ type: "node" }, ({ id, d }) => {
    const g =
      show && d.col !== void 0
        ? [
            {
              id,
              t: d.col * scale,
              c: "rgb(128, 0, 0)",
              p: 45,
              r: 40,
              e: 3,
              b: null,
            },
          ]
        : null;
    props.push({ id, g });
  });

  chart.setProperties(props);
}

// Runs a sequential layout from the selected layout options
function runLayout() {
  // Collect the layout options selected
  const selectedNodes = chart
    .selection()
    .filter((item) => chart.getItem(item).type === "node");
  const orientation = document.querySelector(
    'input[name="orientation"]:checked'
  ).value;
  const stretch = document.querySelector('input[name="stretch"]').value;
  const linkShape = document.querySelector('input[name="linkshape"]:checked')
    .value;
  const layoutOpts = { stretch, orientation, linkShape };

  // Get the current level ordering criteria
  const orderMethod = document.querySelector(
    'input[name="levelOrdering"]:checked'
  ).value;

  if (orderMethod === "levels") {
    // A colour gradient is used to highlight the ordering
    resetLevelColourScale(false);
    // The level value is used to assign levels
    layoutOpts.level = "level";
  } else {
    resetLevelColourScale(true);
    if (orderMethod === "top" && selectedNodes.length > 0) {
      // Selected nodes from the chart will be placed at the top of the hierarchy
      layoutOpts.top = selectedNodes;
    }
    // The default is auto levels are used to assign levels
  }

  // always show orderBy glyphs
  resetGlyphs(true);

  // Get the current column ordering criteria
  const orderBy = document.querySelector('input[name="orderBy"]:checked');
  layoutOpts.orderBy = {
    property: orderBy.getAttribute("property"),
    sortBy: orderBy.getAttribute("sortBy"),
  };

  chart.layout("sequential", layoutOpts);
}

function generateChartData() {
  // Decide how many components we want
  // Bias towards just a single component and occasionally leave it to fate
  // Always display a single component on load
  if (options.multiComp && Math.random() > 0.6) {
    options.comps = Math.ceil(Math.random() * 3);
  } else {
    options.comps = 1;
  }

  generatedData = data.generate(options);
  // Get the max number of levels generated
  maxLevels = generatedData.chartLevel;
  chart.load(generatedData.chartData);
  options.multiComp = true;
  runLayout();
}

function marqueeDragStartHandler({ type }) {
  if (type === "marquee") {
    chart.off("selection-change", runLayout);
  }
}

function marqueeDragEndHandler({ type }) {
  if (type === "marquee") {
    chart.on("selection-change", runLayout);
    runLayout();
  }
}

function levelOrderingHandler(e) {
  if (e.target.value === "top") {
    chart.on("drag-start", marqueeDragStartHandler);
    chart.on("drag-end", marqueeDragEndHandler);
    chart.on("selection-change", runLayout);
  } else {
    chart.off("drag-start", marqueeDragStartHandler);
    chart.off("drag-end", marqueeDragEndHandler);
    chart.off("selection-change", runLayout);
  }
  runLayout();
}

function addEventHandlers() {
  chart.on("drag-start", ({ type, setDragOptions }) => {
    if (type === "node") {
      setDragOptions({ type: "pan" });
    }
  });

  // Generate a new chart
  generateDataEl.addEventListener("click", generateChartData);

  // Change link style
  linkShapeInputs.forEach((input) => {
    input.addEventListener("change", () => {
      runLayout();
    });
  });

  stretchSliderInput.addEventListener("change", () => {
    // Update the slider value on the UI
    const sliderValue = stretchSliderEl.value;
    document.getElementById("stretchVal").innerHTML = ` ${sliderValue}`;
    runLayout();
  });

  orientationInputs.forEach((input) => {
    input.addEventListener("change", () => {
      runLayout();
    });
  });

  levelOrderingInputs.forEach((input) => {
    input.addEventListener("change", levelOrderingHandler);
  });

  orderByInputs.forEach((input) => {
    input.addEventListener("change", runLayout);
  });
}

async function startKeyLines() {
  const chartOptions = {
    logo: { u: "/images/Logo.png" },
    handMode: true,
    selectedNode: {
      ha0: {
        c: "rgb(255, 156, 161)",
        w: 10,
        r: 40,
      },
    },
  };

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

  addEventHandlers();
  generateChartData();
}

window.addEventListener("DOMContentLoaded", startKeyLines);