async function getPlayerCounts(range) {
  const res = await fetch(`/api/player-count?range=${range}`)
  if (!res.ok) {
    throw new Error(`Failed to get player counts, got status ${res.status}`)
  }

  const json = await res.json()
  return json
}

function initChart() {
  const range = document.querySelector("select#range")
  const canvas = document.querySelector("canvas#chart")

  const chart = new Chart(canvas, {
    type: "line",
    data: {
      datasets: [],
    },
    options: {
      scales: {
        x: {
          type: "time",
        },
        y: {
          beginAtZero: true,
          time: {
            unit: "minute"
          },
        },
      },
    },
    plugins: [],
  })

  const updateChart = async () => {
    try {
      const data = await getPlayerCounts(range.value)
  
      const datasets = new Map([
        ["Playing", "playing"],
        ["Normal queue", "normal_queue"],
        ["Priority queue", "priority_queue"],
      ])
  
      chart.data.datasets = Array
        .from(datasets.entries())
        .map(([name, key]) => ({
          label: name,
          data: data.map(point => ({
            x: point["time"] * 60_000,
            y: point[key],
          }))
        }))
      chart.update()
    } catch (e) {
      alert(`Failed to fetch data: ${e}`)
    }
  }

  range.addEventListener("input", () => updateChart())
  updateChart()
}

document.addEventListener("DOMContentLoaded", () => {
  initChart()
})