function setupChart({ all_dates }, ...cumuls) {
  const chart = Highcharts.chart('recap-xp-container', {
    chart: {
      backgroundColor: '#000',
    },
    title: {
      text: '',
      color: '#55f5f5',
    },
    xAxis: {
      categories: all_dates,
    },
    series: cumuls.map((cumul, idx) => ({
      // color: '#55f5f5',
      visible: idx != 0,
      name: cumul.name,
      data: cumul.data,
    })),
  });
}

function objectToQueryParam(obj) {
  return Object.entries(obj).map(tuple => tuple.join("=")).join("&");
}

function urlWithQueryParams(base, object_with_params) {
  if (Object.keys(object_with_params).length > 0) {
    return `${base}?${objectToQueryParam(object_with_params)}`;
  }
  return base;
}

async function requestChart() {
  let url = "/api/pex/v1/recap";
  const days_ago = document.querySelector("#inputDaysAgo").value;
  if (days_ago.length > 0) {
    url = urlWithQueryParams(url, { days_ago });
  }
  ajax({
    method: "GET",
    url: url,
    body: null,
    headers: { Accept: "application/json" },
    on_success: (body) => {
      const json_output = JSON.parse(body);
      setupChart({ all_dates: json_output.all_dates }, ...json_output.pex_tables);
    },
  });
}

document.addEventListener('DOMContentLoaded', async function () {
  requestChart();

  const form = document.querySelector(".recap-xp form#reloader");
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    requestChart();
  });
});