//
//     Copyright © 2011-2025 Cambridge Intelligence Limited.
//     All rights reserved.
//
//     Sample Code
//
//!    Use combinations of filters to simplify networks.
import KeyLines from "keylines";
import { data } from "./filters-data.js";

let chart;
let kCoresResult;
const graphEngine = KeyLines.getGraphEngine();
const kCoresEl = document.getElementById("slider");
let filterCountries;
let k;

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

// Append a new checkbox with label for each country
function createCheckboxMarkup(element, countries) {
  countries.forEach((country) => {
    const newCheckBoxItem = document.createElement("label");
    const countryName = country.country;
    const countryCount = country.count;

    newCheckBoxItem.innerHTML = `
      <input type='checkbox' id=${countryName} disabled=true checked>
      <img src='/images/flags/${countryName}.png' style='width: 16px; height: 16px')>
      ${countryName} (${countryCount})`;

    element.append(newCheckBoxItem);
  });
}

function displayCheckboxItems(items) {
  const checkboxColumn1El = document.getElementById("checkboxColumn1");
  const checkboxColumn2El = document.getElementById("checkboxColumn2");

  // Count occurrences of each country
  const countries = {};
  items.forEach((item) => {
    if (item.type === "node") {
      const country = item.d.country;
      countries[country] = (countries[country] || 0) + 1;
    }
  });
  // Convert into array and sort countries in descending order of occurrences
  const countryCounts = Object.keys(countries).map((country) => ({
    country,
    count: countries[country],
  }));
  countryCounts.sort((a, b) => b.count - a.count);

  // Show each country as a checkbox in two columns
  createCheckboxMarkup(checkboxColumn1El, countryCounts.slice(0, 13));
  createCheckboxMarkup(checkboxColumn2El, countryCounts.slice(13));
}

// Model the chart state from original data and user selection
// We include all links as the load function will disregard links that don't have both ends present
function getChartModel() {
  const items = data.items.filter(
    (item) => item.type === "link" || filterCountries.includes(item.d.country)
  );
  return { type: "LinkChart", items };
}

// Returns a new kCores result
function getNewkCores() {
  graphEngine.load(getChartModel());
  return graphEngine.kCores();
}

// Sets the value of filters and kCore values
function setFilters() {
  k = kCoresEl.value;
  filterCountries = [
    ...document.querySelectorAll("input[type=checkbox]:checked"),
  ].map((checkbox) => checkbox.id);
  kCoresResult = getNewkCores();
}

function matchesFilters(item) {
  const countryIsSelected = filterCountries.includes(item.d.country);
  const kCoreIsValid = kCoresResult.values[item.id] >= k;
  return kCoreIsValid && countryIsSelected;
}

function toggleInteraction() {
  const inputItems = document.querySelectorAll("input");
  // Filter the chart when any checkbox is changed
  inputItems.forEach((inputItem) => {
    inputItem.disabled = !inputItem.disabled;
  });
  // focus back on the slider to stop Edge requiring 2 taps
  kCoresEl.focus();
}

// Filter the chart based on user selections
async function doFiltering() {
  setFilters();
  toggleInteraction();
  // Filter the chart and run a layout
  await chart.filter(matchesFilters, { type: "node" });
  await doLayout();
  toggleInteraction();
}

function initialiseInteractions() {
  toggleInteraction();
  const checkBoxes = [...document.querySelectorAll("input[type=checkbox]")];

  // Set the slider max value from kCoresResultAll
  kCoresEl.setAttribute("max", kCoresResult.maximumK);

  // Filter the chart when any checkbox is changed
  checkBoxes.forEach((checkbox) => {
    checkbox.addEventListener("click", doFiltering);
  });

  // Filter the chart when all countries are selected
  document.getElementById("selectAll").addEventListener("click", () => {
    checkBoxes.forEach((checkbox) => {
      checkbox.checked = "checked";
    });
    doFiltering();
  });

  // Filter the chart when all countries are cleared
  document.getElementById("clearAll").addEventListener("click", () => {
    checkBoxes.forEach((checkbox) => {
      checkbox.checked = false;
    });
    doFiltering();
  });

  // Filter the chart when slider is changed
  kCoresEl.addEventListener("change", () => {
    const kCoresValue = kCoresEl.value;
    document.getElementById("kCoresValue").innerHTML = ` ${kCoresValue}`;
    doFiltering();
  });
}

async function loadKeyLines() {
  const options = {
    logo: { u: "/images/Logo.png" },
    handMode: true,
  };
  chart = await KeyLines.create({ container: "klchart", options });

  displayCheckboxItems(data.items);

  chart.load(data);
  // Calculate the initial core values
  kCoresResult = chart.graph().kCores();
  await doLayout();
  initialiseInteractions();
}

window.addEventListener("DOMContentLoaded", loadKeyLines);