//1.function called getComputerChoice 
//that will randomly return either ‘Rock’, ‘Paper’ or ‘Scissors’.

//2.function that plays a single round of Rock Paper Scissors. 
//The function should take two parameters - the playerSelection and computerSelection - 
//and then return a string that declares the winner of the round like so: 
//"You Lose! Paper beats Rock"
//Make your function’s playerSelection parameter case-insensitive 
//(so users can input rock, ROCK, RocK or any other variation).

//3.Important note: you want to return the results of this function call, not console.log() them. 
//You’re going to use what you return later on, 
//so let’s test this function by using console.log to see the results:

//4.Write a NEW function called game(). 
//Call the playRound function inside of this one to play a 5 round game 
//that keeps score and reports a winner or loser at the end.
//At this point you should be using console.log() to display 
//the results of each round and the winner at the end.
//Use prompt() to get input from the user. Read the docs here if you need to.
//Feel free to re-work your previous functions if you need to.
//Specifically, you might want to change the return value to something more useful.
//Feel free to create more “helper” functions if you think it would be useful.

function getComputerChoice(){
    const number = Math.floor(Math.random() * 3);
    let computer = number;

    if (number === 0){
        computer = "rock";
    }
    else if (number === 1){
        computer= "paper";
    }
    else{
        computer= "scissors";
    }

    return computer;
}

const btns = Array.from(document.querySelectorAll('.btn'));
btns.forEach(btn => btn.addEventListener('click', graphicGame));

let player = 0;
let computer = 0;
const container = document.querySelector("#content");
let score = document.createElement("p");

score.textContent = `Player score: ${player}/5 - Computer score: ${computer}/5`;
container.appendChild(score);

function graphicGame(player1, player2){
    if (player < 5 && computer < 5) {
        let party = playRound(player1, player2);

        if(party === true){
            player +=1;
        }
        else if(party === false){
            computer +=1;
        }
        score.textContent = `Player score: ${player}/5 - Computer score: ${computer}/5`;

        let resultScore = document.createElement("p");
        
        if(player === 5){
            resultScore.textContent = "You win!";
            container.appendChild(resultScore);
            btns.forEach(btn => btn.disabled = true);
            
        }
        else if(computer === 5){
            resultScore.textContent = "Computer wins!";
            container.appendChild(resultScore);
            btns.forEach(btn => btn.disabled = true);
        }
        
    }
}

function playRound(playerSelection, computerSelection){
    let state = null;
    
    computerSelection = getComputerChoice();
    playerSelection = playerSelection.target.dataset.word;
    //playerSelection = playerSelection.toLowerCase();

    let result = document.createElement("p");
    if (playerSelection === "rock" && computerSelection == "paper"){
        result.textContent = "You Lose! Paper beats Rock";
        state = false;
    }
    else if(playerSelection === "paper" && computerSelection == "rock"){
        result.textContent = "You Win! Paper beats Rock";
        state = true;
    }
    else if(playerSelection === "paper" && computerSelection == "scissors"){  
        result.textContent = "You Lose! Scissors beats Paper";
        state = false;
    }
    else if(playerSelection === "scissors" && computerSelection == "paper"){
        result.textContent = "You Win! Scissors beats Paper";
        state = true;
    }
    else if(playerSelection === "rock" && computerSelection == "scissors"){
        result.textContent = "You Win! Rock beats Scissors";
        state = true;
    }
    else if(playerSelection === "scissors" && computerSelection == "rock"){
        result.textContent = "You Lose! Rock beats Scissors";
        state = false;
    }
    else{
        result.textContent = "It's a Tie!";
        state = null;
    }

    container.appendChild(result);
    return state;
}

function game(player1, player2){
    let player = 0;
    let computer = 0;
    const container = document.querySelector("#result");
    let score = document.createElement("p");
    let result = document.createElement("p");
    result.textContent = "You win";

    while (player < 5 && computer < 5) {
        let party = playRound(player1, player2);
        
        score.textContent = `Player score: ${player}/5  Computer score: ${computer}/5`;
        container.appendChild(score);
        
        if(party === true){
            player +=1;
        }
        else if(party === false){
            computer +=1;
        }
        
        if(player === 5){
            result.textContent = "You win!";
            container.appendChild(result);
        }
        else if(computer === 5){
            result.textContent = "Computer wins!";
            container.appendChild(result);
        }
    }

}