function updateGraphWithFilter() {
  filterString = $('#options input[type=checkbox]:checked').map((idx, elem) => {
    console.log('Adding ' + elem.id + ' to return string')
    return elem.id
  }).get().join(',')
  console.log(filterString);
  fetch('/api/stats/graph?deck_ids=' + filterString)
    .then(response => response.json())
    .then(response => {
      window.chart.data.datasets = response.datasets
      window.chart.update()
    })
}

$(document).ready(function() {

  $('#filter_button').click(updateGraphWithFilter)

  fetch('/api/deck/by_player')
    .then(response => response.json())
    .then(response => {
      console.log(response);
      for (playerName in response) {
        buildPlayerDecksDiv($('#options'), playerName, response[playerName])
      }
    })

  fetch('/api/stats/graph')
    .then(response => response.json())
    .then(response => {
      console.log(response.datasets);
      window.chart = new Chart(
        document.getElementById('graph_canvas'),
        {
          type: 'line',
          data: {
            datasets: response.datasets
          },
          options: {
            scales: {
              x: {
                type: 'time'
              }
            },
            parsing: {
              xAxisKey: 'date',
              yAxisKey: 'score'
            }
          }
    
        }
      );
    });

});

function buildPlayerDecksDiv(parentDiv, playerName, playerDecks) {
  div = $('<div>',
    id='player_div_for_' + playerName
  )
  div.append('<p>' + playerName + '</p>')
  for (deck of playerDecks) {
    div.append('<input type="checkbox" id="' + deck["id"] + '" name="' + deck["name"] + '" value="' + deck["name"] + '"><label for="' + deck["name"] + '">' + deck["name"] + '</label><br/>')
  }
  div.appendTo(parentDiv)
}