const gameMessage = ''
const APIFQDN = 'https://scapegoat.awful.fun/api/'
const player = {
    name: "",
    id: "",
    target: " ",
    game: " ",
    isHost: false,
    color: "",
    pickedAColor: false,
    addPlayer: function () {
        var playerName = document.getElementById("playerName").value
        var dataPost = "name=" + playerName
        //console.log(dataPost)
        xhr(APIFQDN + 'players', 'POST', player.addPlayerLoad, dataPost)
    },
    addPlayerLoad: function(requestData){
        player.name = Object.values(requestData).toString()
        player.id = Object.keys(requestData).toString()
        if (player.isHost){
            game.newGame(player.id);
        } else {
            game.joinGame(game.gameID, player.id)
            getState();
       }
    },
    leaveGame: function(){
        xhr(APIFQDN + 'player/remove/' + String(game.gameID) + "/" + String(player.id), 'POST', player.leaveGameLoad)
    },
    leaveGameLoad: function(){
        player.name = ""
        player.id = null
    }
};

const game ={
    gameID: "0",
    previousState: "0",
    previousPlayerCount: 0,
    state: "0",
    players: {},
    colors: ["red","yellow","blue"],
    joinGame: function(gameID, yourID){
        game.gameID = gameID.toUpperCase();
        var myUrl = String(APIFQDN + 'game/join/' + gameID.toUpperCase() + '/' + yourID);
        xhr(myUrl, 'POST', game.joinGameLoad) ;
    },
    joinGameLoad: function(data) {
                goToGame();
    },
    newGame: function(yourID) {
        var myURL = String(APIFQDN + 'game/new/' + yourID)
        xhr(myURL, 'POST', game.newGameLoad)
    },
    newGameLoad: function(requestData){
        gameNum = String(requestData)
        game.gameID = gameNum
        goToGame();
        updateText( "Game ID: " + gameNum , "gameIdDisplay");
    },
    startGame: function(gameID) {
        xhr(APIFQDN +  'game/start/' + gameID, 'POST', game.startGameLoad);
    },
    startGameLoad: function(requestData){
        if (String(requestData) == '0') {
            alert( "You need more players.");
        } else if(String(requestData) == '3'){
            alert( "You can only have 6 players.");
        } else {
            updateText("Game ID: " + String(game.gameID), "gameIdDisplay");
            getState();
            document.getElementById("startGame").style.display = "none";
        }
    },
    endRound: function() {
        xhr(APIFQDN +  'game/endround/' + String(game.gameID), 'POST', game.endRoundLoad);
    },
    endRoundLoad: function(data){
        alert("New round!")
    },
    pollingID: null,
    playerPoller: function(flip){
        if (flip) {
            game.pollingID = setInterval(getState, 2000);
        }else{
            clearInterval(game.pollingID);
        }
    }
}

const colorz = {
    Red: 'rgb(170, 40, 40)',
    Yellow: 'rgb(236, 229, 39)',
    Blue: 'rgb(67, 113, 182)',
    Green: 'rgb(71, 126, 57)',
    Orange: 'rgb(203, 137, 52)',
    Purple: 'rgb(94, 77, 134)'
}

function xhr(thisURL, GETorPOST, onLoadFunction=xhrLoad, dataIn=""){
        var aRequest = new XMLHttpRequest()
        aRequest.open(GETorPOST, thisURL, true)
        aRequest.onload = function() {
            var data = JSON.parse(this.response);
            if (aRequest.status >= 200 && aRequest.status < 400) {
                onLoadFunction(data);
            } else {
                console.log('error');
            }
        }
        if (dataIn != ""){
            aRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded" );
            aRequest.send(dataIn);
        } else {
            aRequest.send();
        }
}
function xhrLoad(data){
    console.log(data);
}

function startGame(){game.startGame(game.gameID);};

function resetGame(){ goToLobby(); player.leaveGame();};

function goToLobby() {
    document.getElementById("lobby").style.display = "block";
    document.getElementById("game").style.display = "none";
    document.getElementById("endRound").style.display = "none";
    document.getElementById("topright").style.display = "none";
    document.getElementById("startGame").innerHTML = "Start Game";
    document.getElementById("headerText").innerHTML = "Scape Goat";
    document.getElementById("playerList").innerHTML = "";
    game.playerPoller(false);
    player.color = "";
    document.getElementById("hand").innerHTML = "";
    game.selection = "";
    updateText("", "gameIdDisplay");

};

function goToGame() {
    document.getElementById("lobby").style.display = "none";
    document.getElementById("game").style.display = "block";
    document.getElementById("topright").style.display = "block";
    document.getElementById("endRound").style.display = "none";
    document.getElementById("headerText").innerHTML =  player.name;
    game.state = 0
    if (player.isHost ==false){
        document.getElementById("startGame").style.display = "none";
    }else{
        document.getElementById("startGame").style.display = "inline";
    }
    updateText("Game ID: " + game.gameID, "gameIdDisplay" )
    getState();
    game.playerPoller(true);
};

function hostGame() {
    if (document.getElementById("playerName").value == "" ){
                alert("Please enter your name.")
    } else {
        player.isHost = true;
        player.addPlayer();
    }
};

async function joinGame() {
    if (document.getElementById("playerName").value == "" ){
        alert("Please enter your name.")
    } else {
        player.isHost = false;
        game.gameID = await prompt("Enter a game ID", "0")
        player.addPlayer();
        //game.drawCards(game.gameID, game.maxHandSize - player.currentHandSize);
    }
};

function getState () {
    var thisURL =  APIFQDN + 'state/' + String(game.gameID)
    xhr(thisURL, 'GET', getStateLoad)
}
function getStateLoad(data){
    var gsState = Object.values(data.state).toString()
    game.state = gsState
    var stateChanged = false;
    var daPlayers = Object.entries(data.players);
    var playerCount = daPlayers.length
    //console.log(playerCount)
    if (game.state != game.previousState){
        stateChanged = true;
        game.previousState = game.state;
    }
    if (game.previousPlayerCount != playerCount){
        stateChanged = true;
        game.previousPlayerCount = playerCount
    }
    game.players = daPlayers;
    updatePlayerList(daPlayers);
    switch (gsState){
         case "0":
             //0 - new game not started all players
             break;
         case "1":
             //1 - players pick colors
             if (stateChanged){
                 game.selection = "";
                 document.getElementById("promptText").innerHTML = "";
                 document.getElementById("headerText").innerHTML = "Pick a color.";
                 document.getElementById("submit").style.display = "none";
		         // Show colors to pick form.
		         renderColorButtons(data.colors);
                 player.pickedAColor = false;
                 if (player.isHost){
                    document.getElementById("endRound").style.display = "inline";
                 }
             }
		     renderColorButtons(data.colors);
             break;
         case "2":
            //show the pick color button
            document.getElementById("hand").innerHTML = "";
            document.getElementById("headerText").innerHTML = "Click Show Target.";
            document.getElementById("submit").style.display = "inline";
            document.getElementById("submit").innerHTML  = "Show Target";
            if (player.isHost){
                document.getElementById("endRound").style.display = "inline";
            }
            break;
    }
};

function makeSelection(thisButton){
    var cards = document.getElementById("hand").children;
    var i;
    for (i = 0; i < cards.length; i++) {
        var card = cards[i];
        if (card.innerHTML == thisButton.innerHTML){
            card.style.background = "white";
            game.selection = thisButton.innerHTML
        } else {
            card.style.background = colorz[String(card.innerHTML)]
        }
    }
    finalSubmit()
};

function renderColorButtons(colorsToRender){
    var hand = document.getElementById("hand");
    hand.innerHTML = "";
    for (color in colorsToRender) {
        var cardButton = document.createElement("button");
        cardButton.style.width = '85%';
        cardButton.style.padding = '10px';
        cardButton.style.background = colorz[String(colorsToRender[color])];
        cardButton.innerHTML=String(colorsToRender[color]);
        cardButton.addEventListener("click", makeSelection.bind(null, cardButton));
        hand.appendChild(cardButton);
    };
};
function submit() {
    finalSubmit();
}

function finalSubmit(){
    var state = game.state.toString()
    switch(state){
        case "1":
            if (player.pickedAColor){
                alert("You already picked a color.")
            }else {
                submitColor()
            }
            break;
        case "2":
            showTarget()
            break;
   }
};

function updateText(words, id="messenger") {
    document.getElementById(id).innerHTML = words;
};

function submitColor(){
    var aURL = String( APIFQDN + 'game/' + game.gameID + '/submit/' + player.id + '/' + game.selection)
    console.log(aURL)
    xhr(aURL, 'POST', submitColorLoad)
}
function submitColorLoad(data){
    if (data){
        updateText("Waiting for everyone else to pick a color.", "headerText")
        document.getElementById("submit").style.display = "none";
        document.getElementById("hand").innerHTML = "";
        player.color = game.selection;
        document.body.style.backgroundColor = colorz[String(player.color)];
        player.pickedAColor = true;
    }else{
        alert("Someone beat you to it. Pick a different color.")
   }
   document.getElementById("hand").innerHTML = "";
   getState ()
}

function endRound(){
  game.endRound()
  document.getElementById("endRound").style.display = "none";
}

function updatePlayerList(playorDator) {
    var playerList = document.getElementById("playerList");
    playerList.innerHTML = "";
    for (playa in playorDator) {
        var li = document.createElement("li");
        var outText = String(playorDator[playa][1].name + " - " + playorDator[playa][1].color);
        li.appendChild(document.createTextNode(outText));
        playerList.appendChild(li);
    };
};

function showTarget(){
    url = APIFQDN + "game/target/" + game.gameID + "/" +  String(player.id)
	xhr(url, 'GET', showTargetLoad)
}

function showTargetLoad(data){
    console.log(data)
    var targetMessage= "The scapegoat is: " + String(data.name) + " (" + String(data.color) + ")";
    alert(targetMessage);
}