var aperto1;
var aperto2;
var quantidade = 9;
var array = [];
var tema = 'marvel';
var extensao = '.jpg';
var qtdJogadas = 0;
var acertos = 0;
var jogador1 = 0;
var jogador2 = 0;
var vezDoJogador1 = true;
var multiplayer = false;
var nomeJogador1 = 'Anderson';
var nomeJogador2 = 'Patricia';

window.addEventListener('load', () => {
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);    
    urlTema = urlParams.get('tema');
    tema = urlTema?urlTema:tema;

    if(tema==='cats' || tema==='dogs'){
        extensao = '.jpg';
    }else{
        extensao = '.png';
    }

    sortearFiguras();   
    iniciarCronometro();

    if(multiplayer){
        document.getElementById('multiplayer').style.removeProperty('display');
        document.getElementById('AcertosMultiplayer').style.removeProperty('display');
        document.getElementById('Acertos').style.setProperty('display', 'none');
        document.getElementById('nomeNoPlacarJogador1').innerText = nomeJogador1;
        document.getElementById('nomeNoPlacarJogador2').innerText = nomeJogador2;
        vezDoJogador1 = Math.random() < 0.5;
        colocaNomeDoJogador(vezDoJogador1?nomeJogador1:nomeJogador2);
    }
});

function colocaNomeDoJogador(nome){
    var labelNome = document.getElementById('nomeJogador');
    labelNome.innerText = nome;
}

function PegaClique(id){    
    var divFront = document.getElementById('front'+id);
    divFront.style.setProperty('transform', 'rotateY(180deg)');
    var carta = document.getElementById(id);

    if(!aperto1){
        aperto1 = [carta.id, carta.value]
    }else{
        block_screen();
        aperto2 = [carta.id, carta.value]
        setTimeout(comparaSelecoes, 900);
    }
}

function comparaSelecoes(){ 
    unblock_screen();   
    if(aperto1[0]!=aperto2[0]){
        if(aperto1[1] === aperto2[1]){
            if(multiplayer){
                acertoMultiplayer();
            }else{
                acerto();
            }
        }else{            
            desvira(aperto1);
            desvira(aperto2);
            if(vezDoJogador1){
                colocaNomeDoJogador(nomeJogador2);
                vezDoJogador1 = false;
            }else{
                colocaNomeDoJogador(nomeJogador1);
                vezDoJogador1 = true;
            }
        } 
    
        aperto1 = null;
        aperto2 = null;
        qtdJogadas++;
        document.getElementById("qtdJogadas").textContent = qtdJogadas;
    }
}

function acertoMultiplayer(){
    confetti.start(1000, 1, 350);
    desativaCarta(aperto1[0]);
    desativaCarta(aperto2[0]);
    if(vezDoJogador1){
        jogador1++;
        document.getElementById('qtdAcertosJogador1').textContent = jogador1;
    }else{
        jogador2++;
        document.getElementById('qtdAcertosJogador2').textContent = jogador2;
    }
    
    if((jogador1+jogador2)===quantidade){
        var vencedor = jogador1 > jogador2? nomeJogador1:nomeJogador2;
        pausarCronometro();
        Swal.fire({
            title: 'Parabéns, ' +vencedor + ' venceu! <br> Tempo total: ' + returnData(hour)+':'+ returnData(minute)+':'+ returnData(second),
            icon: 'success',
            showDenyButton: true,
            showCancelButton: true,
            confirmButtonText: 'Recomeçar Partida',
            denyButtonText: `Escolher outro tema`,
          }).then((result) => {
            /* Read more about isConfirmed, isDenied below */
            if (result.isConfirmed) {
              window.location.reload();
            } else if (result.isDenied) {
                window.location.href = "selecionarTema.html";              
            }
          })
    }    
}

function acerto(){
    confetti.start(1000, 1, 350);
    desativaCarta(aperto1[0]);
    desativaCarta(aperto2[0]);
    acertos++;
    document.getElementById('qtdAcertos').textContent = acertos;
    if(acertos===quantidade){
        pausarCronometro();
        Swal.fire({
            title: 'Parabéns, você venceu! <br> Tempo total: ' + returnData(hour)+':'+ returnData(minute)+':'+ returnData(second),
            icon: 'success',
            showDenyButton: true,
            showCancelButton: true,
            confirmButtonText: 'Recomeçar Partida',
            denyButtonText: `Escolher outro tema`,
          }).then((result) => {
            /* Read more about isConfirmed, isDenied below */
            if (result.isConfirmed) {
              window.location.reload();
            } else if (result.isDenied) {
                window.location.href = "selecionarTema.html";      
            }
          })
    }    
}

function desativaCarta(idCarta){
    document.getElementById(idCarta).disabled = true;
}

function desvira(aperto){    
    var carta = document.getElementById('front'+aperto[0]);
    carta.style.removeProperty('transform');
}

function sortearFiguras(){
    for(x=1;x<=quantidade;x++){ 
        array.push(x);
        array.push(x);
    }

    array.sort(function randomizar() {
        return Math.random() * 2 - 1; // Ordena randomicamente
      });    
      
    var divTabuleiro = document.getElementById('tabuleiro');
    
    for(x=0; x<array.length;x++){
        var divFlipbox = geraDivs(x, array[x]);
        divTabuleiro.appendChild(divFlipbox);
    }  
}

function geraDivs(id, value){
    var divFlipbox = document.createElement('div');
    divFlipbox.setAttribute('class', 'flip-box'); 

    var divFlipboxInner = document.createElement('div');
    divFlipboxInner.setAttribute('class', 'flip-box-inner'); 
    divFlipboxInner.setAttribute('id', 'front'+id); 
    
    var divFlipboxFront = document.createElement('div');
    divFlipboxFront.setAttribute('class', 'flip-box-front'); 
  
    var divFlipboxBack = document.createElement('div');
    divFlipboxBack.setAttribute('class', 'flip-box-back'); 
    
    var imagemFront = geraElementoImagemFront(id, value);
    var imagemBack = geraElementoImagemBack(value);

    divFlipboxFront.appendChild(imagemFront);
    divFlipboxBack.appendChild(imagemBack);
    divFlipboxInner.appendChild(divFlipboxFront);
    divFlipboxInner.appendChild(divFlipboxBack);
    divFlipbox.appendChild(divFlipboxInner);


    return divFlipbox;
}

function geraElementoImagemFront(id, value){
    var imagem = document.createElement('input');
    imagem.setAttribute('type', 'image');
    imagem.setAttribute('src', 'images/'+tema+'/Carta'+extensao);
    imagem.setAttribute('class', 'carta');        
    imagem.setAttribute('id', id)
    imagem.setAttribute('value', value)
    imagem.setAttribute('onclick', 'PegaClique(this.id)');
    return imagem;
}

function geraElementoImagemBack(value){
    var imagem = document.createElement('input');
    imagem.setAttribute('type', 'image');
    imagem.setAttribute('src', 'images/'+tema+'/'+value+extensao);
    imagem.setAttribute('class', 'carta');        
    return imagem;
}