var npcs_ids = []
var gamedata = {}
var currentNpc = null
var username = null

function show(className){
    document.getElementsByClassName(className)[0].classList.remove("hidden");
}

function hide(className){
    document.getElementsByClassName(className)[0].classList.add("hidden");
}

function setListenerToIntroductionNextBtn(){
    document.getElementById("introduction_next_btn").addEventListener("click", showInterogationViewFromIntroduction);
}

function setListenerToInterrogationSuspectPreviousBtn(){
    document.getElementById("interrogation_suspect_previous_btn").addEventListener("click",goBackToInterogation)
}

function setListenerToInterrogationNextBtn(){
    document.getElementById("interrogation_next_btn").addEventListener("click", showEmotionAndCulpritChoicesView)
}

function setQuestionButtonsListeners(){
    document.getElementById("QA_0").addEventListener("click",askTypeZeroQuestion);
    document.getElementById("QA_1").addEventListener("click",askTypeOneQuestion);
}

function removeQuestionButtonsListeners(){
    document.getElementById("QA_0").removeEventListener("click",askTypeZeroQuestion);
    document.getElementById("QA_1").removeEventListener("click",askTypeOneQuestion);
}

function goBackToInterogation(){
    hide("interrogation_suspect");
    show("interrogation");
}


function showInterogationViewFromIntroduction(){
    hide("introduction");
    show("interrogation");
}

function showEmotionAndCulpritChoicesView(){
    hide("interrogation");
    show("emotion_and_culprit_choices");
}

function getNpcLocationAndPartner(npcid){
    data = {}
    npcid = parseInt(npcid)
    for(const room in gamedata["rooms"]){
        if(gamedata["rooms"][room]["npcs"].includes(npcid)){
            data["room"] = gamedata["rooms"][room]["name"];
            if(gamedata["rooms"][room]["npcs"].length === 1){
                do{
                    const random = Math.floor(Math.random() * npcs_ids.length);
                    data["partner"] = npcs_ids[random]
                }while(data["partner"] === npcid);
            }
            else{
                data["partner"] = gamedata["rooms"][room]["npcs"][gamedata["rooms"][room]["npcs"][1] === npcid ?0:1];
            }
        }
    }
    return data;
}


function getCulprit(){
    culprit = null
    Object.values(gamedata["rooms"]).forEach(element =>{
        if (element['npcs'].length === 1){
            culprit = element['npcs'][0];
            return;  
        } 
    })
    return culprit
}

async function askTypeOneQuestion(){
    removeQuestionButtonsListeners();
    partnerId = getNpcLocationAndPartner(currentNpc)["partner"];
    anwser = gamedata["npcs"][currentNpc]["QA_1"];
    anwser = anwser.replace("{NPC}",gamedata["npcs"][partnerId]["name"]);
    document.getElementsByClassName("suspect_answer")[0].textContent = anwser;
    show("question_answer");
    document.getElementById("currentNpcPicure").src = "/api/v1//getNpcReaction?npcid="+currentNpc;
    //sleep for 5 sec
    await new Promise(r => setTimeout(r, 5000));
    document.getElementById("currentNpcPicure").src = "/api/v1/getNpcImage?npcid="+currentNpc;
    hide("question_answer");
    document.getElementsByClassName("suspect_answer")[0].textContent = "";
    setQuestionButtonsListeners();
}


async function askTypeZeroQuestion(){
    removeQuestionButtonsListeners();
    document.getElementById("QA_0")
    room = getNpcLocationAndPartner(currentNpc)["room"];
    anwser = gamedata["npcs"][currentNpc]["QA_0"];
    anwser = anwser.replace("{SALLE}",room);
    document.getElementsByClassName("suspect_answer")[0].textContent = anwser;
    show("question_answer");
    document.getElementById("currentNpcPicure").src = "/api/v1//getNpcReaction?npcid="+currentNpc;
    //sleep for 5 sec
    await new Promise(r => setTimeout(r, 5000));
    document.getElementById("currentNpcPicure").src = "/api/v1/getNpcImage?npcid="+currentNpc;
    hide("question_answer");
    document.getElementsByClassName("suspect_answer")[0].textContent = "";
    setQuestionButtonsListeners();
}

async function sendAnswers(){
    selects = document.getElementsByClassName("suspect_emotion_chooser");
    let playerResponses = {}
    for (let index = 0; index < selects.length; index++) {
        select = selects[index];
        playerResponses[select.id] = select.value
    }
    data = {};
    data["responses"] = JSON.stringify(playerResponses);
    return await makeAPIRequest("submitAnswers",data);
    //TODO Waiting screen until results shows
}

function renderAnswerSelectionPanel() {
    npcs_ids.forEach(element => {
        let suspect = document.createElement("div");
        suspect.classList.add("suspect");

        suspect_emotion_chooser = document.createElement("select");
        suspect_emotion_chooser.classList.add("suspect_emotion_chooser")
        suspect_emotion_chooser.setAttribute("id",element);
        gamedata["traits"].forEach(trait =>{
            let option = document.createElement("option");
            option.value = trait;
            option.text = trait;
            suspect_emotion_chooser.appendChild(option);
        });
        suspect.appendChild(suspect_emotion_chooser);
        let data = {};
        let img = document.createElement('img');
        img.classList.add("suspect_picture");
        img.src = "/api/v1/getNpcImage?npcid="+element; 
        suspect.appendChild(img);
        let button = document.getElementById("culpritButton");
        let button_clone = button.cloneNode(true);
        button_clone.addEventListener("click",()=>{
            sendAnswers();
            //TODO Make this button green when clicked, and reset all other green button if any 
        });
        button_clone.removeAttribute("id");
        button_clone.classList.remove("hidden");
        suspect.appendChild(button_clone);
        document.getElementById("culprits_choices").appendChild(suspect);
    });
}

function renderInterogation(){
    document.getElementById("QA_0").textContent = gamedata["questions"]["QA_0"],
    document.getElementById("QA_1").textContent = gamedata["questions"]["QA_1"],
    npcs_ids.forEach(element => {
        let suspect = document.createElement("div");
        suspect.classList.add("suspect");

        let img = document.createElement('img');
        img.classList.add("suspect_picture");
        img.src = "/api/v1/getNpcImage?npcid="+element; 
        suspect.appendChild(img);
        let button = document.getElementById("interogationButton");
        let button_clone = button.cloneNode(true);
        button_clone.classList.remove("hidden");
        button_clone.addEventListener("click",()=>{
            // TODO remove this listener when we know the questions has already been asked;
            currentNpc = element
            document.getElementById("currentNpcPicure").src = "/api/v1/getNpcImage?npcid="+element;
            hide("interrogation");
            show("interrogation_suspect");
        })
        suspect.appendChild(button_clone)
        document.getElementById("interrogation_suspects").appendChild(suspect);
    });
}

function initSock(){
    socket = io({
        auth:{
            game_id: gamedata["game_id"]
        }
    });

    socket.on("connect", () => {
        console.log("Connected !")
    })

    //TODO Send and receive userprogress when they have sent their responses
    socket.on("gameprogress", (username) => {
        console.log(username);
    });
    
    socket.on("gamefinished", (finalResults) => {
        hide("emotion_and_culprit_choices");
        console.log(finalResults);
        document.getElementsByClassName("reveal_score")[0].textContent = Object.values(finalResults["player"][username]).filter(x => x==true).length +"/5"
        for (const player in finalResults["player"]){
            if(player === username){continue}
            let playerNode = document.createElement("h3")
            playerNode.classList.add("player_name_and_score")
            let playerResultArray = Object.values(finalResults["player"][player])
            playerNode.textContent = "" + player + " : " + playerResultArray.filter(x => x==true).length
            document.getElementsByClassName("players_list")[0].appendChild(playerNode);
        }
        culprit = getCulprit();
        document.getElementsByClassName("reveal_culprit_title")[0].textContent += " " + gamedata["npcs"][culprit]["name"];
        document.getElementById("culprit").src = "/api/v1/getNpcImage?npcid="+culprit;
        show("results_game");
        npcs_ids.filter(x => x!=culprit).forEach(npcid =>{
            let suspect = document.createElement("div");
            suspect.classList.add("summary_suspect");
            let img = document.createElement("img")
            img.src = "/api/v1/getNpcImage?npcid=" + npcid;
            suspect.appendChild(img)

            let emotionTitle = document.createElement("h2");
            emotionTitle.classList.add("explain_suspect_emotion_title");
            emotionTitle.textContent = "Ce suspect était " + finalResults["npcs"][npcid]["reaction"];
            suspect.appendChild(emotionTitle);

            let emotionDesc = document.createElement("p");
            emotionDesc.classList.add("explain_suspect_emotion_description");
            //TODO fix typos on the database 
            emotionDesc.textContent = "Qui se caractérise par " + finalResults["npcs"][npcid]["description"];
            suspect.appendChild(emotionDesc)

            document.getElementsByClassName("suspects_list")[0].appendChild(suspect)
        })
    });
}

async function setGameData(){
    data = {};
    response = await makeAPIRequest("getGameData");
    gamedata = response["gamedata"];
    username = response["username"]
    npcs_ids = Object.keys(gamedata["npcs"]).sort((a, b) => 0.5 - Math.random())
}

async function initGame(){
    await setGameData();
    initSock();
    renderAnswerSelectionPanel();
    renderInterogation();
    setQuestionButtonsListeners()
    setListenerToInterrogationSuspectPreviousBtn()
    setListenerToIntroductionNextBtn()
    setListenerToInterrogationNextBtn();
    show("introduction");
}
initGame();