'use strict';
// This is the backend client js
let iosocket = io.connect();

// setup all my handlers
iosocket.on('clientrefresh', () => {
  location.reload();
});

iosocket.on('stateChange', (state) => {
  $('#team-container').bracket({
    init: state,
    save: saveFn,
    /* without save() labels are disabled */
    decorator: {
      edit: edit_fn,
      render: render_fn
    }
  });

  $('.increment').click(function(){
    alert('haha');
  });
  $('.decrement').click(function(){
    alert('haha');
  });

});

// get my state
let context = 'admin';
iosocket.emit('loadState', context);



// Bracket editing


/* Custom data objects passed as teams */
var customData = {
  teams: [
    ["Team 1","Team 2"],
    ["Team 3","Team 4"]
  ],
  results: []
}

/* Edit function is called when team label is clicked */
function edit_fn(container, data, doneCb) {
  var input = $('<input type="text" style="color:black;">')
  container.html(input)
  input.focus()
  input.blur(function() {
    var inputValue = input.val()
    if (inputValue.length === 0) {
      doneCb(null); // Drop the team and replace with BYE
    } else {
      doneCb(inputValue);
    }
  });
}

/* Render function is called for each team label when data is changed, data
 * contains the data object given in init and belonging to this slot.
 *
 * 'state' is one of the following strings:
 * - empty-bye: No data or score and there won't team advancing to this place
 * - empty-tbd: No data or score yet. A team will advance here later
 * - entry-no-score: Data available, but no score given yet
 * - entry-default-win: Data available, score will never be given as opponent is BYE
 * - entry-complete: Data and score available
 */
function render_fn(container, data, score, state) {
  switch (state) {
    case "empty-bye":
      container.append("No team")
      return;
    case "empty-tbd":
      container.append("Upcoming")
      return;

    case "entry-no-score":
    case "entry-default-win":
    case "entry-complete":
      container.append(data);
      return;
  }
}

function saveFn(data, userData) {
  iosocket.emit('editState', data);
}


$(function() {
  $('#refresh').click(function(){
    iosocket.emit('clientrefresh');
  });
});