//mostrarTateti();
let tateti = [[" ", " ", " "],[" "," ", " "],[" "," ", " "]];

//Se define a que jugador le corresponde que ficha
jugador = [["X", " "], ["O", " "]];
turno=0;

//Contador de jugadas, para determinar un empate
jugadas=0;

function agregar(){
    
    //crea objetos correspondientes a elementos del DOM
    selectX = document.getElementById("selectX");
    selectO = document.getElementById("selectO");
    option1 = document.createElement('option');
    option2 = document.createElement('option');
    jugadorInput = document.getElementById("jugadorInput");
    
    //Comprueba que el input del jugador no esté vacío
    if(jugadorInput.value==""){
        alert("Debe introducir un nombre!");
        return;
    }    
    
    //Setea el valor del option con el valor del input
    option1.value=jugadorInput.value
    option1.innerHTML=jugadorInput.value;
    option2.value=jugadorInput.value
    option2.innerHTML=jugadorInput.value;
    
    //Para agregar el valor del input al select
    selectX.appendChild(option1);
    selectO.appendChild(option2);

    //Muestra el <select>, que estaba inicialmente oculto
    selectX.removeAttribute("hidden");
    selectO.removeAttribute("hidden");
    document.getElementById("selectores").removeAttribute("hidden");
    //Borra el valor ingresado
    jugadorInput.value="";
}

function comenzarJuego(){
    
    //Recibe los valores de los elementos select
    selectX = document.getElementById("selectX");
    selectO = document.getElementById("selectO");

    //Comprobar que los jugadores X y O tienen jugadores válidos
    if(selectX.value==""){
        alert("Debe elegir un jugador X");
        return;
    }
    if(selectO.value==""){
        alert("Debe elegir un jugador O");
        return;
    }

    //Comprobar que los jugadores X y O no sean iguales
    if(selectX.value == selectO.value){
        alert("Los jugadores X y O deben ser diferentes!");
        return;
    }
    jugador[0][1] = selectX.value;
    jugador[1][1] = selectO.value;   

    mostrarTateti();

    //Si a la computadora le toca el primer turno, arranca
    //jugando
    if(jugador[turno][1].toLowerCase()=="computadora"){
        do{
            computadoraX = aleatorio(0,2);
            computadoraY = aleatorio(0,2);
        }while(tateti[computadoraX][computadoraY]!=" ")

        jugar(computadoraX, computadoraY);
    }
}

function mostrarTateti(){
    
    //Oculta todos los elementos de la primera pantalla y
    //da lugar al tablero del tateti
    document.getElementById("inputJugadores").hidden="hidden";
    document.getElementById("selectores").hidden="hidden";
    document.getElementById("botonComenzarJuego").hidden="hidden";
    document.getElementById("tateti").removeAttribute("hidden");

    //Llama a la función mensajeTurno
    mensajeTurno();
}


function jugar(x, y){
    //esta funcion tiene que llenar la matriz con la ficha 
    //correspondiente, tiene que cambiar la imagen del botón
    //y volverlo disable

    
    //en la matriz, setea el valor con X u O
    tateti[x][y]= jugador[turno][0];

    //cambia el contenido del botón
    document.getElementById(""+x+y).innerHTML=jugador[turno][0];

    //Desactiva el botón que se eligió
    document.getElementById(""+x+y).disabled="disabled";

    //Comprueba si hay un ganador
    if(comprobarGanador()){
        console.log("ganó "+ jugador[turno][1]);
        mostrarResultado(jugador[turno][1]);
        console.log(tateti);
        return;
    }    
    
    //Para intercambiar turnos
    if(turno == 0){
        turno=1;
    }
    else if(turno == 1){
        turno=0;
    }

    //Llama a la función mensajeTurno
    mensajeTurno(); 

    //agrega una jugada más al contador
    jugadas++;
    if(jugadas==9){
        mostrarResultado("empate");
        return;
    }

    //comprueba si es el turno de la computadora
    if(jugador[turno][1].toLowerCase()=="computadora"){
        do{
            computadoraX = aleatorio(0,2);
            computadoraY = aleatorio(0,2);
        }while(tateti[computadoraX][computadoraY]!=" ")
        jugar(computadoraX, computadoraY);
    }
    
}

//Muestra quien es el ganador en caso de que haya uno
//Si es empate, tambien muestra
function mostrarResultado(ganador){
    //comprobar que valor tiene ganador
    //achicar el tateti (para esto puedo crear una clase en css
    //y asignarle esa clase al div tateti)
    //Mostrar un mensaje grande abajo con el nombre del ganador
    p = document.createElement('p');
    document.getElementById('resultado').appendChild(p);
    if(ganador=="empate"){        
        p.innerHTML="Empate!"
    }else{
        p.innerHTML="Ganó "+ jugador[turno][1]+"!";
    }

    //Quita el atributo "oculto" del resultado, para poder mostrar
    document.getElementById("resultado").removeAttribute("hidden");

    //obtiene todos los objetos tipo casilla
    casillas = document.getElementsByClassName('casilla');

    //desabilita todas las casillas, para que no se pueda
    //seguir jugando
    for(i=0; i<9; i++){
        casillas[i].disabled="disabled";
    }

    document.getElementById("tatetiTurnos").hidden="hidden";
}

//Muestra un mensaje indicando a quién corresponde el turno
function mensajeTurno(){   
    document.getElementById("tatetiTurnos").removeAttribute("hidden"); 
    document.getElementById("mensajeTurno").innerHTML="Turno de "
        +jugador[turno][1] + ", jugador " + jugador[turno][0];    
}

//Comprueba si hay un ganador
function comprobarGanador(){

    //Comprobación de filas
    if(tateti[0][0]==tateti[0][1] && tateti[0][1]==tateti[0][2]){
        if(tateti[0][0]!=" "){
            pintarGanador(["00", "01", "02"]);
            return true;
        }        
    }
    if(tateti[1][0]==tateti[1][1] && tateti[1][1]==tateti[1][2]){
        if(tateti[1][0]!=" "){
            pintarGanador(["10", "11", "12"]);
            return true;
        }        
    }
    if(tateti[2][0]==tateti[2][1] && tateti[2][1]==tateti[2][2]){
        if(tateti[2][0]!=" "){
            pintarGanador(["20", "21", "22"]);
            return true;
        }        
    }

    //Comprobación de columnas
    if(tateti[0][0]==tateti[1][0] && tateti[1][0]==tateti[2][0]){
        if(tateti[0][0]!=" "){
            pintarGanador(["00", "10", "20"]);
            return true;
        }        
    }
    if(tateti[0][1]==tateti[1][1] && tateti[1][1]==tateti[2][1]){
        if(tateti[0][1]!=" "){
            pintarGanador(["01", "11", "21"]);
            return true;
        }        
    }
    if(tateti[0][2]==tateti[1][2] && tateti[1][2]==tateti[2][2]){
        if(tateti[0][2]!=" "){
            pintarGanador(["02", "12", "22"]);
            return true;
        }        
    }

    //Comprobación de diagonales
    if(tateti[0][0]==tateti[1][1] && tateti[1][1]==tateti[2][2]){
        if(tateti[0][0]!=" "){
            pintarGanador(["00", "11", "22"]);
            return true;
        }        
    }
    if(tateti[0][2]==tateti[1][1] && tateti[1][1]==tateti[2][0]){
        if(tateti[0][2]!=" "){
            pintarGanador(["02", "11", "20"]);
            return true;    
        }        
    }

    return false;
}

function pintarGanador(pos){

    for(i=0; i<3; i++){
        aux=document.getElementById(""+pos[i]);
        aux.classList.add("ganador");
    }

}

function aleatorio(limite_inferior, limite_superior) {
    return Math.round(Math.random() * (limite_superior - limite_inferior) + limite_inferior);
}