var updateDecider;

var ws;

window.onload = function() {

  'use strict';

  function getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max));
  }

  var DeciderLobby = Backbone.View.extend({

    lobbies: undefined,

    initialize: function (number) {
      console.log(number);
      this.elCount = number;
    },

    template: _.template('<td><%= title %></td>' +
        '<td><%= title %></td>' +
        '<td><%= content %></td>'),

    events: {
      "click .title": "check" // Обработчик клика на кнопке "Проверить"
    },

    check: function () {
      this.elCount = "azaz" + getRandomInt(100000000);
      this.render();
    },

    render: function() {
      console.log("render");
      this.$el.html(this.template({title: "Vasyan " + this.elCount, content: "noob"}));
      console.log(this.$el);
      return this;
    }
  });

  var LobbyList = Backbone.View.extend({

    lobbies: undefined,

    initialize: function () {
      this.elCount = 0;
    },

    template: _.template('<table id ="deciderList" class="table"><tbody><tr>\n' +
        '                <th>Host</th>\n' +
        '                <th>Status</th>\n' +
        '                <th>Action</th></tr>\n' +
        '            </tbody></table>'),

    events: {
      "click .title": "check" // Обработчик клика на кнопке "Проверить"
    },

    check: function () {
      this.elCount = "azaz" + getRandomInt(100000000);
      this.render();
    },

    render: function() {
      this.$el.html(this.template());
      var lobbiesAsTableRows = _.reduce(this.lobbies, function (memo, lobby) {
        console.log(lobby, memo);
        return memo + '<tr>\n' +
      '           <td>'+ lobby.lobbyName +'</td>\n' +
      '           <td>'+ lobby.status +'</td>\n' +
      '           <td>Action</td>' +
        '</tr>';
      }, "");
      $("#deciderList tbody", this.el).append(lobbiesAsTableRows);
      return this;
    }
  });

  var lobbyList = new LobbyList;
  $("#lobbiesList").append(lobbyList.el);
  lobbyList.render();

  $("#createDecider").click(function(event) {
    event.preventDefault();
    ws.send(JSON.stringify({
      type: "createDecider"
    }));
  });

  $("#updateDecider").click(function(event) {
    event.preventDefault();
    ws.send(JSON.stringify({
      type: "updateDecider"
    }));
  });

  $("#getAllUsers").click(function(event) {
    event.preventDefault();
    ws.send(JSON.stringify({
      type: "getLobbies"
    }));
  });

  if($.cookie('user')=== undefined){
    result = prompt("Введите ник", );
    $.cookie('user', result, { expires: 7 });
  }else{
    console.log("Welcome, " + $.cookie('user'));
  }

  ws = new WebSocket($("body").data("ws-url"));
  ws.onmessage = function(event) {
    var message;
    message = JSON.parse(event.data);
    switch (message.type) {
      case "maps":
        return updateDecider(message);
      default:
      case "lobbies":
        lobbyList.lobbies = message.lobbies;
        lobbyList.render();
        return console.log(message);
    }
  };
  ws.onopen = function () {
    ws.send(JSON.stringify({
      type: "userName",
      name: $.cookie('user')
    }));
  }

  let timerId = setInterval(() =>
      ws.send(JSON.stringify({
        type: "getLobbies"
      })), 2000);
}

function changeNick() {
  result = prompt("Введите ник", $.cookie('user'));
  $.cookie('user', result, { expires: 7 });
  ws.send(JSON.stringify({
    type: "userName",
    name: $.cookie('user')
  }));
}


updateDecider = function(message) {
  console.log(message.deciderMaps);
};