// colorGame.js
console.log("connected")


var level = 6;
var colors = [];
var pickedColor;
var squares = document.querySelectorAll(".square");
var rgbColorDisplay = document.getElementById("rgbColor");
var restartGame = document.querySelector("#reset");
var largeHeader = document.querySelector("#header");
var modeButtons = document.querySelectorAll(".mode");
var messageDisplay = document.querySelector("#score");
var titleChange = document.querySelector("#theGreat");
var smallHeader = document.querySelector("#scoreHeader");
var largeHeader = document.querySelector("#header");
var styles = {
    color: "White",
    background: "steelblue",
    border: "2px solid purple"
}

game();

function game() {
    setupModeButtons();
	setUpSquares();
	reset();		
}	

function setupModeButtons(){
	for(var i = 0; i < modeButtons.length; i++){
		modeButtons[i].addEventListener("click", function(){
			modeButtons[0].classList.remove("selected");
			modeButtons[1].classList.remove("selected");
			this.classList.add("selected");
			this.textContent === "Easy" ? level = 3: level = 6;
			reset();
		});
	}
}	

function setUpSquares() {
	for (var i = 0; i < squares.length; i++){
	// //add initial colors to squares
	squares[i].addEventListener("click", function(){
 		  //grab color
          var clickedColor = this.style.background;
          console.log(clickedColor, pickedColor)
          if(clickedColor === pickedColor){
			    changeColors(clickedColor);
			    $("h1").css({
					    color: "White",
					    background: pickedColor,
					    border: "2px solid purple"
					});
			    messageDisplay.textContent = "Correct";
			    messageDisplay.style.color = "White";
			  	restartGame.textContent = "Start Again";
			  	restartGame.style.color = colors[2];
			  	titleChange.style.color = "light-green";
			  		titleChange.textContent = "Great";
			  		smallHeader.style.background="Green";
			  		largeHeader.style.background=clickedColor;
			  	// return clickedColor;
			  	} else {
			  		$("h1").css({
					    color: clickedColor,
					    background: "White",
					    border: "2px solid purple"
					});
					this.style.background = "black";
					messageDisplay.textContent = "Try Again";
					restartGame.textContent = "Reset";
					// titleChange.style.color = "red";
					// smallHeader.style.background="Red";
			  		titleChange.textContent = "Nope";
			  		// largeHeader.style.background="red";
		     }
      	});
	}
}



function reset(){

	//generate all new colors
	colors = generateRandomColors(level);
	$("h1").css(styles);
	//pick a new random color from array
	pickedColor = pickColor();
	rgbColorDisplay.textContent = pickedColor;
	this.textContent = "New Colors"
	smallHeader.style.background="White";
    titleChange.textContent = "";
	for(var i = 0; i < squares.length; i++) {
		if(colors[i]){
			squares[i].style.display = "block";
			squares[i].style.background = colors[i];
		} else {
			squares[i].style.display = "none";
		}
	}
	titleChange.style.background = "#232323";
	
}

	
restartGame.addEventListener("click", function() {
	reset();
});


function changeColors(color){
	for (var i = 0; i < squares.length; i++) {
		  	squares[i].style.background=color;
		 
		  }
} 

function pickColor(){
	var random = Math.floor(Math.random() * colors.length);
	return colors[random];
}





function pickColor(){
	var randomNum = Math.floor(Math.random() * colors.length);
	return colors[randomNum];
}

function generateRandomColors(num){
	// make an array
	var rgbArray = [];
	// add random numbers to the array
	for(var i = 0; i < num; i++){
	        //get random color and push to array
		   rgbArray.push(randomColor());
	}
	// return array
		return rgbArray;
}

function randomColor (){
	// pick red from 0 - 255
	/// pick green from 0-255
	var rNum = (Math.floor(Math.random() * 256));
	var gNum = (Math.floor(Math.random() * 256));
	var bNum = (Math.floor(Math.random() * 256));
    return "rgb(" + rNum + ", " + gNum + ", " + bNum + ")";
}