let idSessao = "0";
let idQuiz = "1";
let idPergunta = "0";
let idUltimaPergunta = "0";
let perguntas = [];
let hash = "empty";
let firstPerson = false;
let rankingID = null;
let QuantidadePerguntas = 10;
let jogadas = [];

window.addEventListener('load', () => {
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    var hashUrl = urlParams.get('session');
    rankingID = localStorage.getItem(hashUrl);

    if (!rankingID) {
        if (!hashUrl) {
            CriaNovoQuiz(idQuiz);
            firstPerson = true;
            CriaSessao();
        } else {
            PegaPerguntas(hashUrl);
        };
    } else {
        QuizCriado(hashUrl);
    };
});

function QuizCriado(hashUrl) {
    GerarRanking(hashUrl);
    $('#divFinalizacao').fadeIn();
    $('#btnResultado').hide();
    $('#btnNovoQuiz').hide();
    confetti.start(5000, 1, 350);
    $('#txtArea').val(jXTGakdskj2+"/index.html?session=" + hashUrl);
    var btnCopiar = document.getElementById("btnCopiar");
    btnCopiar.setAttribute('data-clipboard-text', jXTGakdskj2+"/index.html?session=" + hashUrl);
};

function geraTabela(json) {
    let tableData = document.getElementById("divTabela");

    //set header of table
    let table = `
<table class="table table-hover" id = "myTable">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Pontuação</th>
    </tr>
  </thead>
  <tbody>
  `;
    //create//append rows
    for (i = 0; i < json.length; i++) {
        table = table +
            `<tr id="${json[i].acertos}">
      <th scope="row">${i + 1}º</th>
      <td>${json[i].nickname}</td>
      <td>${json[i].acertos}</td>
    </tr>`
    }
    //close off table
    table = table +
        `</tbody>
  </table>`;
    tableData.innerHTML = table;

    $('#divRanking').fadeIn();
    $('#divNome').fadeOut();

    if (rankingID) {
        $('#lblPergunta').text("Seu desafio está pronto, compartilhe!");
    } else {
        $('#lblPergunta').text("Resultado Geral");
    }
    document.getElementById("lblPergunta").setAttribute('text-align', 'center');

    if (json.length != 0) {
        document
            .getElementById(acertos)
            .scrollIntoView({ behavior: "smooth" });
    }
};

function AvancaPergunta(choice) {
    SalvarResposta(choice);

    if (idPergunta + 1 < perguntas.length) {
        idPergunta++;
        ExecutaQuiz(idQuiz, perguntas[idPergunta], firstPerson);
        return true;
    } else {
        SolicitaNome();
        return false;
    }
};

function SolicitaNome() {
    $('#divQuiz').fadeOut();
    $('#divNome').fadeIn();
    if (!firstPerson) {
        $('#lblPontuacao').fadeIn();
        $('#lblPontuacao').append("Você acertou " + acertos + " de " + perguntas.length + " questões.");
        document.getElementById("lblPergunta").innerText = "Desafio finalizado";
    } else {
        document.getElementById("lblPergunta").innerText = "Seu desafio está pronto";
    }
}

function PreenchePergunta(json, firstPerson) {
    var lblPergunta = document.getElementById("lblPergunta");

    lblPergunta.innerText = "";

    var span = document.createElement('span');
    span.setAttribute('class', 'label');
    span.style.backgroundColor = "#357ebd";
    span.style.paddingBottom = "3.600";
    span.innerText = Number(idPergunta) + 1 + "/" + perguntas.length;

    var label = document.createElement('span');
    if (firstPerson) {
        label.innerText = " " + json.pergunta;
    } else {
        label.innerText = " " + ReplaceName(json.pergunta_alternativa);
    }

    lblPergunta.appendChild(span);
    lblPergunta.appendChild(label);
}

function LimpaRespostas() {
    var divRespostas = document.getElementById("divQuiz");

    divRespostas.innerHTML = "";
}

function PegaAlternativas(json) {
    var divRespostas = document.getElementById("divQuiz");

    for (let index = 0; index < json.resposta.length; index++) {
        divRespostas.appendChild(createLabelAnswer(index, json));
    }
};

function createLabelAnswer(index, json) {
    var input = createRadioElement("q_answer", false, json.resposta[index].id);

    var span = document.createElement('span');
    span.setAttribute('class', 'btn-label');

    var i = document.createElement('i');
    i.setAttribute('class', 'glyphicon glyphicon-chevron-right');

    var label = document.createElement('label');
    label.setAttribute('class', 'element-animation1 btn btn-lg btn-primary btn-block');
    label.innerText = json.resposta[index].resposta;
    span.appendChild(i);
    label.appendChild(span);
    label.appendChild(input);

    if (respostas[idPergunta] == json.resposta[index].id) {
        label.setAttribute('id', 'lblRespostaCerta')
    };

    return label;
};

function createRadioElement(name, checked, value) {
    var radioInput;

    radioInput = document.createElement('input');
    radioInput.setAttribute('type', 'radio');
    radioInput.setAttribute('name', name);
    radioInput.setAttribute('value', value);
    if (checked) {
        radioInput.setAttribute('checked', 'checked');
    }

    return radioInput;
};