var ws;

var userName = ""

var raceCount = $("#raceCount").html()

window.onload = function() {

  'use strict';

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

  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" // Обработчик клика на кнопке "Проверить"
    },

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

    render: function() {

      var lobbiesAsTableRows = _.reduce(this.lobbies, function (memo, lobby) {

        if ($("#deciderName").html() !== lobby.deciderName) return memo;

        var joinButton = (lobby.status === "NotStarted()") ? '<button class="btn btn-primary join-as-player" onclick="joinDecider(\''+lobby.lobbyActorName+'\')">' +
            '<img src="/assets/images/buttons/isAuto.png" style="height: 25px;"> Join lobby <img src="/assets/images/buttons/isAuto.png" style="height: 25px;">' +
            '</button>' : "";
        var observerButton = '<button class="btn btn-success join-as-observer" onclick="observerDecider(\''+lobby.lobbyActorName+'\')">' +
            '<img src="/assets/images/buttons/Ulthwe.png" style="height: 25px;"> Observer <img src="/assets/images/buttons/Ulthwe.png" style="height: 25px;">' +
            '</button>';

        return memo + '<tr>\n' +
            '           <td>'+ lobby.user1Info.name.substring(0, 20) +'</td>\n' +
            '           <td>'+ lobby.user2Info.name.substring(0, 20) +'</td>\n' +
            '           <td>'+ lobby.status +'</td>\n' +
            '           <td>' + joinButton + ' ' + observerButton +
            ' </td>' +
            '</tr>';
      }, "");

      var tableStart = '<table id ="deciderList" class="table"><tbody><tr>\n' +
          '                <th>Player1</th>\n' +
          '                <th>Player2</th>\n' +
          '                <th>Status</th>\n' +
          '                <th style="width: 400px;">Action</th></tr>\n';

      var tableEnd = '</tbody></table>';

      var res = tableStart + lobbiesAsTableRows + tableEnd;

      $("#deciderList tbody", res).append(lobbiesAsTableRows);
      console.log(res);

      this.$el.html(res);
    }
  });

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

  $("#createDecider").click(function(event) {
    event.preventDefault();
    isObserver = false;
    ws.send(JSON.stringify({
      type: "createDecider",
      deciderName: $("#deciderName").html()
    }));
  });

  $("#submitmsg").click(function(event) {
    sendMessage();
  });
  $("#usermsg").on('keyup', function (e) {
    if (e.key === 'Enter' || e.keyCode === 13) {
      sendMessage()
    }
  });


  $("#exit").click(function(event) {
    event.preventDefault();
    ws.send(JSON.stringify({
      type: "leaveDecider"
    }));
    $("#decider").hide();
    $("#lobbies").show();
    $(".navbar").show();
  });

  function requestName(){
    if($.cookie('user') === undefined || $.cookie('user')=== "null"|| $.cookie('user')=== ""){
      var result = prompt("Enter nickname: ", );
      $.cookie('user', result, { expires: 1337 });
      userName = result;
      requestName();
    }else{
      userName = $.cookie('user');
    }
  }

  requestName();


  $("#playerName").html(userName);


  ws = new WebSocket($("body").data("ws-url"));
  ws.onmessage = function(event) {
    var message;
    message = JSON.parse(event.data);
    switch (message.type) {
      case "refreshLobby":
        if(message.lobby.status === "SelectRace()" && (!isObserver)){
          renderRaces();
        }else {
          renderMaps(message.lobby.maps, message.lobby.status);
        }
        renderPlayersAndStats(message.lobby);
        break;
      case "switchToLobby":
        console.log(message);
        switchToLobby(message.lobby.maps, message.lobby.status);
        renderPlayersAndStats(message.lobby);
        break;
      case "sendMessage":
        console.log(message);
        addMessageToChat(message.message);
        break;
      case "sendMapBanMessage":
        console.log(message);
        addBanMapMessageToChat(message.message);
        break;
      case "lobbyError":
        console.log(message);
        disconnectLobby(message.error);
        break;
      case "lobbies":
        lobbyList.lobbies = message.lobbies;
        lobbyList.render();
        return console.log(message);
        break;
      default:
    }
  };
  ws.onopen = function () {
    ws.send(JSON.stringify({
      type: "userName",
      name: $.cookie('user')
    }));
    ws.send(JSON.stringify({
      type: "getLobbies"
    }));
  }

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

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

  userName = $.cookie('user');
  $("#playerName").html(userName);

}


// -----ф-ии прихода с сервера

function switchToLobby(maps, status) {
  console.log(maps);
  renderMaps(maps, status);
  $("#lobbies").hide();
  $(".navbar").hide();
  $("#decider").show();
  $("#chatbox").html("");
}

function disconnectLobby(error) {
  $("#decider").hide();
  $(".navbar").show();
  $("#lobbies").show();
  ws.send(JSON.stringify({
    type: "getLobbies"
  }));
  alert(error);
}

// ---------------Выбор рас --------------

function getRaceImageByNumber(number){
  switch (number) {
    case 1: return  "/assets/images/raceIcons/SM.gif";
    case 2: return  "/assets/images/raceIcons/Chaos.gif";
    case 3: return  "/assets/images/raceIcons/Eldar.gif";
    case 4: return  "/assets/images/raceIcons/Orks.gif";
    case 5: return  "/assets/images/raceIcons/IG.gif";
    case 6: return  "/assets/images/raceIcons/Nec.gif";
    case 7: return  "/assets/images/raceIcons/Tau.gif";
    case 8: return  "/assets/images/raceIcons/Sob.gif";
    case 9: return  "/assets/images/raceIcons/De.gif";
  }
}

function getRaceVideoByNumber(number){
  switch (number) {
    case 1: return  "/assets/video/races/SM.mp4";
    case 2: return  "/assets/video/races/Chaos.mp4";
    case 3: return  "/assets/video/races/Eldar.mp4";
    case 4: return  "/assets/video/races/Orks.mp4";
    case 5: return  "/assets/video/races/IG.mp4";
    case 6: return  "/assets/video/races/Nec.mp4";
    case 7: return  "/assets/video/races/Tau.mp4";
    case 8: return  "/assets/video/races/Sob.mp4";
    case 9: return  "/assets/video/races/SM.mp4";
  }
}

function renderRaces() {
  var resHtml = "";
  resHtml += "<div class='col-xs-4'><center><h2>First race</h2>";
  for(var i = 1; i <= 9; i++){
    var selected = "raceNotSelected";
    if($.cookie("race1") == i){
      selected = "raceSelected";
      selectedMainRace = i;
    }
    resHtml += '<a href = "#" class="'+selected+' mainRaceIcon" onclick="selectMainRace(this, ' +i+')"><img class="raceIcon" src="'+getRaceImageByNumber(i)+'"></a> ';
  }
  resHtml += "</center></div>";

  if(raceCount >= 2){
    resHtml += "<div class='col-xs-4'><center><h2>Second race</h2>";
    for(var i = 1; i <= 9; i++){
      var selected = "raceNotSelected";
      if($.cookie("race2") == i){
        selected = "raceSelected";
        selectedSecondRace = i;
      }
      resHtml += '<a href = "#" class="'+selected+' additionalRaceIcon" onclick="selectSecondRace(this, ' +i+')"><img class="raceIcon" src="'+getRaceImageByNumber(i)+'"></a> ';
    }
    resHtml += "</center></div>";
  }

  if(raceCount >= 3){
    resHtml += "<div class='col-xs-4'><center><h2>Third race</h2>";
    for(var i = 1; i <= 9; i++){
      var selected = "raceNotSelected";
      var banned = "";
      if($.cookie("race3") == i){
        selected = "raceSelected";
        banned = "bannedRace";
        selectedThirdRace = i;
      }
      resHtml += '<a href = "#" class="'+selected+' thirdRaceIcon" onclick="selectThirdRace(this, ' +i+')"><img class="raceIcon" src="'+getRaceImageByNumber(i)+'"></a> ';
    }
    resHtml += "</center></div>";
  }
  resHtml += "<div class='col-xs-4'></div>";
  resHtml += "<div style='clear: both;'></div></br>";

  resHtml += "<center><button id = 'selectRace' class='btn btn-primary' disabled onclick='sendSelectedRacesToServer()'>OK</button></center>"
  $("#mapList").html(resHtml);
  checkRaceSelectFinish();
}

var selectedMainRace = 0;
var selectedSecondRace = 0;
var selectedThirdRace = 0;

function selectMainRace(button, race){
  selectedMainRace = race;
  $.cookie("race1", race, { expires: 1 });
  _.each($(".mainRaceIcon"), function (el){
    $(el).removeClass("raceSelected");
    $(el).addClass("raceNotSelected");
  });
  $(button).removeClass("raceNotSelected");
  $(button).addClass("raceSelected");
  checkRaceSelectFinish();

}

function selectSecondRace(button, race){
  selectedSecondRace = race;
  $.cookie("race2", race, { expires: 1 });
  _.each($(".additionalRaceIcon"), function (el){
    $(el).removeClass("raceSelected");
    $(el).addClass("raceNotSelected");
  });
  $(button).removeClass("raceNotSelected");
  $(button).addClass("raceSelected");
  checkRaceSelectFinish();
}

function selectThirdRace(button, race){
  selectedThirdRace = race;
  $.cookie("race3", race, { expires: 1 });
  _.each($(".thirdRaceIcon"), function (el){
    $(el).removeClass("raceSelected");
    $(el).addClass("raceNotSelected");
  });
  $(button).removeClass("raceNotSelected");
  $(button).addClass("raceSelected");
  checkRaceSelectFinish();
}

function checkRaceSelectFinish(){

  if(selectedMainRace !== 0 && (raceCount < 2 || selectedSecondRace !== 0)  && (raceCount < 3 || selectedThirdRace !== 0)){
    $("#selectRace").removeAttr("disabled")
  }
}

function sendSelectedRacesToServer(){
  ws.send(JSON.stringify({
    type: "selectRace",
    raceFirst: selectedMainRace,
    raceSecond: selectedSecondRace,
    raceThird: selectedThirdRace,
  }));
  $("#mapList").html("<center>Waiting another player...</center>");
}

// ---------------------------------------------

function renderMaps(maps, lobbyStatus) {
  var resHtml = "";

  _.each(maps, function (map) {

    var banHtml = "";
    var banClass = "";
    if(map.isBanned){
      banHtml = "<div class = 'banX'>&#x2715;</div>";
      banClass = "bannedMap";
    }
    if(lobbyStatus === "NotStarted()"){
      banClass = "bannedMap";
    }

    var title = ""

    if(map.description != null){
      title = "title='"+map.description+"'";
    }

    resHtml = resHtml + '<div class="col-xs-4 col-md-3 col-lg-2"><button class = "mapSelect" onmousedown="banMap(\''+map.map+'\')">'+
        '<div class="mapImageAndText '+banClass+'">' +
        '<img class="img-rounded center-block" '+title+' style="width:128px;" src="/assets/images/maps/'+encodeURI(map.map)+'.jpg">' +
        '</div>'+convertMapName(map.map)+
        banHtml + '</button></div>';
  })
  $("#mapList").html(resHtml);
}

var isObserver = false;

function renderFinish(maps, firstPlayerInfo, secondPlayerInfo) {
  var resHtml = "<center>";

  _.each(maps, function (map) {
    if(!map.isBanned){
      resHtml = resHtml + '<div class="col-xs-4 col-md-3 col-lg-2"><button class = "mapSelect" >'+
          '<div class="mapImageAndText ">' +
          '<img class="img-rounded center-block" style="width:128px;" src="/assets/images/maps/'+encodeURI(map.map)+'.jpg">' +
          '</div>'+convertMapName(map.map)+ '</button></div>';
    }
  })

  resHtml += "<div style='clear: both;'>";

  resHtml += "<h2>" +  firstPlayerInfo.name + "</h2>";
  resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(firstPlayerInfo.selectedRaces.firstRace)+"> ";
  if(raceCount >= 2){
    resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(firstPlayerInfo.selectedRaces.secondRace)+"> ";
  }
  if(raceCount >= 3){
    resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(firstPlayerInfo.selectedRaces.thirdRace)+"> ";
  }

  resHtml += "<h2>" +  secondPlayerInfo.name + "</h2>";
  resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(secondPlayerInfo.selectedRaces.firstRace)+"> ";
  if(raceCount >= 2){
    resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(secondPlayerInfo.selectedRaces.secondRace)+"> ";
  }
  if(raceCount >= 3){
    resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(secondPlayerInfo.selectedRaces.thirdRace)+"> ";
  }

  resHtml += "</center>"

  $("#mapList").html(resHtml);
}

function renderPlayersAndStats(lobby) {
  var resHtml = "<center>";
  var player1ReadyBtn = "";
  var player2ReadyBtn = "";
  var readyImg = "<img src='/assets/images/buttons/isAuto.png' class='readyImg'/>";
  var notReadyImg = "<img src='/assets/images/buttons/isNotAuto.png' class='readyImg'/>";
  var warningClass = (lobby.user2Info.name !== "") ? "warningButton" : "";

  if(lobby.user1Info.name === userName){
    if(lobby.user1Info.isReady){
      player1ReadyBtn = "<button class='btn btn-default' onclick='setNotReady()'>"+readyImg+" Ready "+readyImg+"</button>"
    }else{
      player1ReadyBtn = "<button class='btn btn-default "+warningClass+"' onclick='setReady()'>"+notReadyImg+" Not ready "+notReadyImg+"</button>"
    }
  }else{
    if(lobby.user1Info.isReady){
      player1ReadyBtn = readyImg
    }else{
      player1ReadyBtn = notReadyImg
    }
  }

  if(lobby.user2Info.name === userName){
    if(lobby.user2Info.isReady){
      player2ReadyBtn = "<button class='btn btn-default' onclick='setNotReady()'>"+readyImg+" Ready "+readyImg+"</button>"
    }else{
      player2ReadyBtn = "<button class='btn btn-default "+warningClass+"' onclick='setReady()'>"+notReadyImg+" Not ready "+notReadyImg+"</button>"
    }
  } else {
    if(lobby.user2Info.isReady){
      player2ReadyBtn = readyImg
    }else{
      player2ReadyBtn = notReadyImg
    }
  }

  if (lobby.user1Info.name === userName || lobby.user2Info.name === userName) {
    $("#inputMsg").show();
  } else {
    $("#inputMsg").hide();
  }

  var lobbyTypeText = "";
  var last1Selected = "";
  var last3Selected = "";
  var last5Selected = "";
  var last7Selected = "";

  var isNecronsSelected = "";
  if(lobby.isNecrons) isNecronsSelected = "checked";

  switch (lobby.selectedType) {
    case "Last1()":
      looserPickSelected = "selected";
      lobbyTypeText = "Play on last map";
      break;
    case "Last3()":
      last3Selected = "selected";
      lobbyTypeText = "Play on last 3 maps";
      break;
    case "Last5()":
      last5Selected = "selected";
      lobbyTypeText = "Play on last 5 maps";
      break;
    case "Last7()":
      last7Selected = "selected";
      lobbyTypeText = "Play on last 7 maps";
      break;
  }

  console.log(lobby.status);
  switch (lobby.status) {
    case "NotStarted()":
      resHtml = "<div style='float: left; padding-top: 10px;'> <div>" + lobby.user1Info.name + ": " +  player1ReadyBtn +"</div><br/>"
      if(lobby.user2Info.name !== ""){
        var kickBtn = ""
        if(lobby.user1Info.name === userName){
          kickBtn = " - <button class='btn btn-danger' onclick='kickSecondPlayer()'>Kick</button>";
        }
        resHtml += "<div>" + lobby.user2Info.name + ": " +  player2ReadyBtn +  kickBtn + "</div>"
      }else{
        resHtml += "<div>waiting 2-nd player...</div>"
      }

      var disabledText = "";


      if(lobby.user1Info.name !== userName){
        disabledText = "disabled";
      }

      //TODO: here from config
      resHtml += "<br/><select class=\"form-control\" id = 'deciderOption' onChange='changeLobbyType()' "+disabledText+" >" +
          "<option "+last1Selected+"  value = 'last1'>Play on last map</option>" +
          "<option "+last3Selected+"  value = 'last3'>Play on last 3 maps</option>" +
          "<option "+last5Selected+"  value = 'last5'>Play on last 5 maps</option>" +
          "<option "+last7Selected+"  value = 'last7'>Play on last 7 maps</option>" +
          "</select>";

      if(lobby.user1Info.name !== userName && lobby.user2Info.name !== userName){
        disabledText = "disabled";
      }else{
        disabledText = "";
      }
      /*for(var i = 1; i <= 9; i++){
        resHtml += '<a href = "#" class="raceNotSelected mainRaceIcon" style="position: absolute; z-index: -1;"><img class="raceIcon" src="'+getRaceImageByNumber(i)+'"></a> ';
      }*/
      resHtml += "</div>";
      break;
    case "SelectRace()":
      resHtml = "<center>"+lobby.user1Info.name + " vs " + lobby.user2Info.name + " - " +lobbyTypeText+ "<br/> players select races</center>";
      break;
    case "Draft()":
      console.log(lobby.turn);
      var playerTurn = (lobby.playerTurn === 1) ? lobby.user1Info.name : lobby.user2Info.name
      resHtml = "<center>"+lobby.user1Info.name + " vs " + lobby.user2Info.name + " - " +lobbyTypeText+ "<br/><b>" + playerTurn +"</b> turn</center>";
      resHtml += "<center><img class=\"raceIcon\" src="+getRaceImageByNumber(lobby.user1Info.selectedRaces.firstRace)+"> ";
      if(raceCount > 1){
        resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(lobby.user1Info.selectedRaces.secondRace)+"> ";
      }
      if(raceCount > 2){
        resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(lobby.user1Info.selectedRaces.thirdRace)+"> ";
      }
      resHtml += " <span style='font-size: 14px'>VS</span> ";
      resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(lobby.user2Info.selectedRaces.firstRace)+">";
      if(raceCount > 1){
        resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(lobby.user2Info.selectedRaces.secondRace)+"> ";
      }
      if(raceCount > 2){
        resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(lobby.user2Info.selectedRaces.thirdRace)+"> ";
      }
      break;
    case "Finish()":
      renderFinish(lobby.maps, lobby.user1Info, lobby.user2Info);
      break;
  }

  resHtml = resHtml + "</center>"

  $("#playersStatsList").html(resHtml);
}

function addMessageToChat(message){
  var messageHtml = "<div class='msgln'> <b>" + message.userName + "</b>: " + message.message + "<br></div>";
  var chatBox = $("#chatbox");
  chatBox.append(messageHtml);
  chatBox.scrollTop(40000);
}

function addBanMapMessageToChat(message){
  var messageHtml = "<div class='msgln'><span style='color: #2C3D9B'>" + convertMapName(message.mapTechName) + "</span> banned by " + message.user + "<br></div>";
  var chatBox = $("#chatbox");
  chatBox.append(messageHtml);
  chatBox.scrollTop(40000);
}

function banMap(map){
  ws.send(JSON.stringify({
    type: "banMap",
    map: map
  }));
}

function setReady(){
  ws.send(JSON.stringify({
    type: "setReady"
  }));
}

function setNotReady(){
  ws.send(JSON.stringify({
    type: "setNotReady"
  }));
}

function changeLobbyType(){
  var lobbyType = $("#deciderOption").val();
  ws.send(JSON.stringify({
    type: "changeLobbyType",
    lobbyType: lobbyType
  }));
}

function changeIsNecronSelected(){
  var isNecronSelected = $("#isNecron").is(':checked');
  ws.send(JSON.stringify({
    type: "changeIsNecronSelected",
    isNecronSelected: isNecronSelected
  }));
}

function joinDecider(actorName){
  isObserver = false;
  ws.send(JSON.stringify({
    type: "joinDecider",
    lobbyActorName: actorName
  }));
}

function observerDecider(actorName){
  isObserver = true;
  ws.send(JSON.stringify({
    type: "observerDecider",
    lobbyActorName: actorName
  }));
}

function sendMessage(){
  var userInput = $("#usermsg");
  var message = userInput.val();
  userInput.val("");
  if(message !== ""){
    ws.send(JSON.stringify({
      type: "sendMessage",
      message: message
    }));
  }
}

function kickSecondPlayer(){
  ws.send(JSON.stringify({
    type: "kickSecondPlayer"
  }));
}

function convertMapName (techMapName) {
  var mapName = techMapName.replace("2p_", "").replaceAll("_", " ") + " (2)";
  return mapName.charAt(0).toUpperCase() + mapName.slice(1);
}