var profilePhoto = "./img/pp.png";
var diceRollSound = null;
var countDownSound = null;
var onInvitedPage = false
var onGamePage = false
var playerType = "owner"
var yourTurn = false
var element = document.getElementById("animpath");
var pathLength = element.getTotalLength();

var continuex = true

var generalTimer = 30
var generalTimeOut 

element.style.strokeDasharray = pathLength;
element.style.strokeDashoffset = pathLength;

$(document).ready(function () {
    if (diceRollSound != null) {
        diceRollSound.pause();
    }
    diceRollSound = new Howl({ src: ["sound/rollSound1.mp3"] });
    diceRollSound.volume(0.7);

	if (countDownSound != null) {
        countDownSound.pause();
    }
    countDownSound = new Howl({ src: ["sound/countdown.mp3"] });
    countDownSound.volume(0.2);
});

function animateRoute(e, len, breakS) 
{

// Each step we decrement the dash offset
len -= 3.33;
if (len < 0)
	len = 0;  // clamp to minimum 0

element.style.strokeDashoffset = len;

// We need to stop looping when the length gets to 0
if (len > 0) {
	generalTimer -= 1
	if (generalTimer <= 0) {
		generalTimer = 0
		if (continuex){
			if (yourTurn){
				$.post(
					"https://ak4y-dice/rolled",
					JSON.stringify({})
				);
			}
		}
	}
	$('.percentage').html(generalTimer+"Sec")
	// Do another step
	generalTimeOut = setTimeout(function() { animateRoute(e, len); }, 1000);
}
}

window.addEventListener("message", (event) => {
	if (event.data.type === "openMenu") {
		$(".notifyPage").css("display", "none");
		firstOpen = false;
		var xhr = new XMLHttpRequest();
		xhr.responseType = "text";
		xhr.open("GET", event.data.steamPP, true);
		xhr.send();
		xhr.onreadystatechange = processRequest;
		function processRequest(e) {
		    if (xhr.readyState == 4 && xhr.status == 200) {
		        var string = xhr.responseText.toString();
		        var array = string.split("avatarfull");
		        var array2 = array[1].toString().split('"');
		        profilePhoto = array2[2].toString();
		        $(".profileImg").css("background-image", `url(${profilePhoto})`);
		    }
		}
		$('.targetName').html(event.data.targetName)
		$('.descTargetName').html(event.data.targetName + " ")
		$('.targetId').html("ID "+ event.data.targetId)
		$("#mySelectArea").empty();
		event.data.diceOptions.forEach(element => {
			var x = document.getElementById("mySelectArea");
			var option = document.createElement("option");
			option.text = element.optionLabel;
			option.value = element.optionId;
			$(option).attr("optionData", `${JSON.stringify(element)}`);
			x.add(option);
		});

		$(".menuBox").css("display", "flex");
		$(".invitationMenu").css("display", "flex");
	}else if (event.data.type === "close"){
		closeMenu()
		$.post("https://ak4y-dice/closeMenu", JSON.stringify());
	}else if (event.data.type === "inviteMenu"){
		$(".notifyPage").css("display", "none");
		var xhr = new XMLHttpRequest();
		xhr.responseType = "text";
		xhr.open("GET", event.data.steamPP, true);
		xhr.send();
		xhr.onreadystatechange = processRequest;
		function processRequest(e) {
		    if (xhr.readyState == 4 && xhr.status == 200) {
		        var string = xhr.responseText.toString();
		        var array = string.split("avatarfull");
		        var array2 = array[1].toString().split('"');
		        profilePhoto = array2[2].toString();
		        $(".profileImg").css("background-image", `url(${profilePhoto})`);
		    }
		}
		$(".menuBox").css("display", "flex");
		$(".inviteAcceptMenu").css("display", "flex");
		$('.invitedTargetName').html(event.data.ownerName)
		$('.ownerName').html(event.data.ownerName)
		$('.ownerId').html("ID "+event.data.ownerId)
		$('.inviteRound').html(event.data.round+" Round")
		$('.invitePrice').html("$"+event.data.betting)
	}else if (event.data.type === "ownerInviteNotif"){
		$("#successNotifyLine").css("width", "7.2396vw")
		$(".notifyPage").css("display", "flex");
		$(".notifyBoxDenied").css("display", "none");
		$(".notifyBoxSuccess").css("display", "flex");
		$("#successNotifyLine")
            .stop()
            .animate(
                {
                    width: "0%",
                },
                {
                    duration: parseInt(10000),
                    complete: function () {
						$(".notifyBoxSuccess").css("display", "none");
						// $(".notifyPage").css("display", "none");
						$(".notifyBoxDenied").css("display", "none");
                    },
                }
            );
	}
	else if (event.data.type === "inviteDeclinedNotif"){
		$("#deniedNotifyLine").css("width", "7.2396vw")
		$(".notifyBoxSuccess").css("display", "none");
		$(".notifyPage").css("display", "flex");
		$(".notifyBoxSuccess").css("display", "none");
		$(".notifyBoxDenied").css("display", "flex");
		$("#deniedNotifyLine")
            .stop()
            .animate(
                {
                    width: "0%",
                },
                {
                    duration: parseInt(10000),
                    complete: function () {
						$(".notifyBoxSuccess").css("display", "none");
						// $(".notifyPage").css("display", "none");
						$(".notifyBoxDenied").css("display", "none");
                    },
                }
            );
	}
	else if (event.data.type === "inviteAcceptedGameStarted"){
		startText = 3
		$(".gamePage").css("display", "flex");
		$('#ownerDices').empty()
		$('#playerDices').empty()
		$('.startGameSide').css("opacity", "1")
		$('.startGameSide').css("display", "flex")
		clearTimeout(generalTimeOut)
		element.style.strokeDashoffset = 100;
		generalTimer = 30
		$('.percentage').html("30Sec")
		$('.startText').html("3")
		countDownSound.play()
		countdownInterval = setInterval(() => {
			startText -= 1
			if (startText < 0) startText = 0
			$('.startText').html(startText.toString())
			if (startText == 0) clearInterval(countdownInterval)
		}, 1050);
		$('.roundSay').html("Round 1")
		$('.fa-arrow-right-long').css("opacity", "0.12")
		$('.fa-arrow-left-long').css("opacity", "1")
		$('.gameWonSide').css("display", "none")
		$('.gameDrawSide').css("display", "none")
		$('.gameLoseSide').css("display", "none")
		$('.gameCenterSide').css("display", "flex")
		$('.gameBottomSide').css("display", "flex")

		$('.betAmountIngame').html("$"+event.data.betAmount)

		$('.gameOwnerId').html("ID "+event.data.ownerId)
		$('.gameOwnerName').html(event.data.ownerName)

		$('.gamePlayerName').html(event.data.playerName)
		$('.gamePlayerId').html("ID "+event.data.playerId)

		$('.ingameRoundText').html(event.data.rount+" Round")
		$(".notifyPage").css("display", "none");
		$(".menuBox").css("display", "none");
		$(".invitationMenu").css("display", "none");
		$(".inviteAcceptMenu").css("display", "none");

		if (event.data.areYouOwner ? playerType = "owner" : playerType = "player")
		$('.progress.blueteam').css("width", "0%")
		$('.progress.redteam').css("width", "0%")

		$('.progress-text.blueteamx').html("0")
		$('.progress-text.redteamx').html("0")


		var xhr = new XMLHttpRequest();
		xhr.responseType = "text";
		xhr.open("GET", event.data.ownerSteam, true);
		xhr.send();
		xhr.onreadystatechange = processRequest;
		function processRequest(e) {
		    if (xhr.readyState == 4 && xhr.status == 200) {
		        var string = xhr.responseText.toString();
		        var array = string.split("avatarfull");
		        var array2 = array[1].toString().split('"');
		        profilePhotox = array2[2].toString();
		        $(".teamProfile").css("background-image", `url(${profilePhotox})`);
		    }
		}

		setTimeout(() => {
			var xhr = new XMLHttpRequest();
			xhr.responseType = "text";
			xhr.open("GET", event.data.playerSteam, true);
			xhr.send();
			xhr.onreadystatechange = processRequest;
			function processRequest(e) {
				if (xhr.readyState == 4 && xhr.status == 200) {
					var string = xhr.responseText.toString();
					var array = string.split("avatarfull");
					var array2 = array[1].toString().split('"');
					profilePhotoy = array2[2].toString();
					$(".redteamProfile").css("background-image", `url(${profilePhotoy})`);
				}
			}
		}, 100);

		setTimeout(() => {
			$(".startGameSide").animate({ opacity: 0 }, 300);
			setTimeout(() => {
				onGamePage = true
				continuex = true
				clearInterval(countdownInterval)
				$('.startGameSide').css("display", "none")
				playGame(event.data.gameData)
			}, 700);
		}, 3700);



		


	}
	else if (event.data.type === "forceCloseGame"){
		closeMenu()
		continuex = false
		clearTimeout(generalTimeOut)
		$(".notifyPage").css("display", "none");
		$(".gamePage").css("display", "none");
		$(".menuBox").css("display", "none");
		$.post("https://ak4y-dice/closeMenu", JSON.stringify());
	}
	else if (event.data.type === "rolled"){
		continuex = event.data.continue
		yourTurn = false

		document.getElementById("diceRollButton").className = "gameRollDiceButtonPassive"
	
		var diceText = "x"
		var randomArray = ["fa-solid fa-dice-one", "fa-solid fa-dice-two", "fa-solid fa-dice-three", "fa-solid fa-dice-four", "fa-solid fa-dice-five", "fa-solid fa-dice-six"]
		switch (event.data.rollDice) {
			case 1:
				diceText = "fa-solid fa-dice-one"
				break;
			case 2:
				diceText = "fa-solid fa-dice-two"
				break;
			case 3:
				diceText = "fa-solid fa-dice-three"
				break;
			case 4:
				diceText = "fa-solid fa-dice-four"
				break;
			case 5:
				diceText = "fa-solid fa-dice-five"
				break;
			case 6:
				diceText = "fa-solid fa-dice-six"
				break;
			default:
				break;
		}
		diceRollSound.play()
		if (event.data.gameData.turn == "player"){
			var rocket = document.getElementById('ownerDiceRoll');
			var degrees = 0
			ownerInterval = setInterval(() => {
				var randomText = Math.floor(Math.random() * randomArray.length);
				document.getElementById("ownerDiceRoll").className = randomArray[randomText];
			}, 100);

			rotateInterval = setInterval(() => {
				degrees++;
				rocket.style.webkitTransform = 'rotate(' + degrees + 'deg)';
			}, 1);

			setTimeout(() => {
				rocket.style.webkitTransform = 'rotate(' + 0 + 'deg)';
				clearInterval(rotateInterval)
				clearInterval(ownerInterval)
			}, 1450);
		}else{
			var rocket = document.getElementById('playerDiceRoll');
			var degrees = 0
			playerInterval = setInterval(() => {
				var randomText = Math.floor(Math.random() * randomArray.length);

				document.getElementById("playerDiceRoll").className = randomArray[randomText];
			}, 100);

			rotateInterval = setInterval(() => {
				degrees++;
				rocket.style.webkitTransform = 'rotate(' + degrees + 'deg)';
			}, 1);

			setTimeout(() => {
				rocket.style.webkitTransform = 'rotate(' + 0 + 'deg)';
				clearInterval(rotateInterval)
				clearInterval(playerInterval)
			}, 1450);
		}

		clearTimeout(generalTimeOut)

		setTimeout(() => {
			
			

			if (event.data.gameData.turn == "player"){
				document.getElementById("ownerDiceRoll").className = diceText;

				$('#ownerDices').append(`
				<div class="teamRoundDiceBox">
					R:${event.data.gameData.round}
					<div class="teamRoundDice">
						<i class="${diceText}"></i>
					</div>
				</div>
				`)
			}else{
				document.getElementById("playerDiceRoll").className = diceText;

				$('#playerDices').append(`
				<div class="teamRoundDiceBox">
					R:${event.data.gameData.round-1}
					<div class="teamRoundDice">
						<i class="${diceText}"></i>
					</div>
				</div>
				`)
			}
			if (event.data.continue){
				playGame(event.data.gameData, event.data.continue)
			}else{
				
				continuex = false
				playGame(event.data.gameData, event.data.continue)
				setTimeout(() => {
					document.getElementById("diceRollButton").className = "gameRollDiceButtonPassive"
				
					$('.fa-arrow-right-long').css("opacity", "0.12")
					$('.fa-arrow-left-long').css("opacity", "0.12")	
				}, 10);
				clearTimeout(generalTimeOut)
				if (event.data.winner == playerType){
					setTimeout(() => {
						element.style.strokeDashoffset = 100;
						generalTimer = 30
						$('.percentage').html("30Sec")
						clearTimeout(generalTimeOut)
					}, 150);
					setTimeout(() => {
						$('.gameCenterSide').css("display", "none")
						$('.gameBottomSide').css("display", "none")
						$('.gameLeaveConfirm').css("display", "none")
						$('#wonAmount').html(`$${event.data.gameData.bettingAmount * 2}`)
						$('.gameWonSide').css("display", "flex")
						var countDownText = 5
						$('.gameWonButton').html(`Close (${countDownText})`)
						closebuttonInterval = setInterval(() => {
							countDownText -= 1
							if (countDownText < 0) countDownText = 0
							$('.gameWonButton').html(`Close (${countDownText})`)
							if (countDownText == 0){
								clearInterval(closebuttonInterval)
								$.post("https://ak4y-dice/gameClose", JSON.stringify({force: false}));
							} 
						}, 1000);
					}, 3000);
				
					

				}else{
					if (event.data.winner == "berabere"){
						setTimeout(() => {
							element.style.strokeDashoffset = 100;
							generalTimer = 30
							$('.percentage').html("30Sec")
							clearTimeout(generalTimeOut)
						}, 150);
						setTimeout(() => {
							$('.gameCenterSide').css("display", "none")
							$('.gameBottomSide').css("display", "none")
							$('.gameLeaveConfirm').css("display", "none")
							$('.gameDrawSide').css("display", "flex")
							var countDownText = 5
							$('.gameDrawButton').html(`Close (${countDownText})`)
							closebuttonInterval = setInterval(() => {
								countDownText -= 1
								if (countDownText < 0) countDownText = 0
								$('.gameDrawButton').html(`Close (${countDownText})`)
								if (countDownText == 0){
									clearInterval(closebuttonInterval)
									$.post("https://ak4y-dice/gameClose", JSON.stringify({force: false}));
								} 							}, 1000);
						}, 3000);

						
					}else{
						setTimeout(() => {
							element.style.strokeDashoffset = 100;
							generalTimer = 30
							$('.percentage').html("30Sec")
							clearTimeout(generalTimeOut)
						}, 150);
						setTimeout(() => {
							$('.gameCenterSide').css("display", "none")
							$('.gameBottomSide').css("display", "none")
							$('.gameLeaveConfirm').css("display", "none")
							$('.gameLoseSide').css("display", "flex")

							var countDownText = 5
							$('.gameLoseButton').html(`Close (${countDownText})`)
							closebuttonInterval = setInterval(() => {
								countDownText -= 1
								if (countDownText < 0) countDownText = 0
								$('.gameLoseButton').html(`Close (${countDownText})`)
								if (countDownText == 0){
									clearInterval(closebuttonInterval)
									$.post("https://ak4y-dice/gameClose", JSON.stringify({force: false}));
								} 							}, 1000);
						}, 3000);
					}
	
				}
			}
		}, 1500);
	}
});



function playGame(data, continuexD){
	if (continuexD !== false){
		startTiming()
	}
		
	turnDice(data)
}

function turnDice(data){
	$('.roundSay').html("Round "+data.round)


	$(".progress.blueteam").css("width", (data.totalOwnerDice / (6*data.selectedConfigOption.optionRound)) * 100 + "%");
	$(".progress.redteam").css("width", (data.totalPlayerDice / (6*data.selectedConfigOption.optionRound)) * 100 + "%");

	$('.progress-text.blueteamx').html(data.totalOwnerDice)
	$('.progress-text.redteamx').html(data.totalPlayerDice)

	if (data.turn == "owner"){
			$('.fa-arrow-right-long').css("opacity", "0.12")
			$('.fa-arrow-left-long').css("opacity", "1")

	}else{
			$('.fa-arrow-right-long').css("opacity", "1")
			$('.fa-arrow-left-long').css("opacity", "0.12")
	}

	if (data.turn == playerType){
		yourTurn = true
		document.getElementById("diceRollButton").className = "gameRollDiceButton"
	}else{
		yourTurn = false
		document.getElementById("diceRollButton").className = "gameRollDiceButtonPassive"
	}
}

function startTiming(){
	clearTimeout(generalTimeOut)
	element.style.strokeDashoffset = 100;
	generalTimer = 30
	$('.percentage').html("30Sec")
	setTimeout(() => {
		animateRoute(element, pathLength);
	}, 1000);
}




$(document).on("keydown", function () {
	// EKLENECEK
	switch (event.keyCode) {
		case 27: // ESC
		if (onGamePage){
			$('.gameLeaveConfirm').css("display", "flex")
		}else{
			closeMenu();
			$.post("https://ak4y-dice/closeMenu", JSON.stringify());
		}
		break;
	}
});

$(document).on("click", ".gameRollDiceButton", function () {
	if (continuex){
		if (yourTurn){
			$.post(
				"https://ak4y-dice/rolled",
				JSON.stringify({})
			);
		}
	}
});


$(document).on("click", ".sendButton", function () {
	var selectDiv = document.getElementById("mySelectArea");
	var selectedIndex = selectDiv.options[selectDiv.selectedIndex].value;
	var bettingAmount = document.getElementById('bettingAmount').value
	if (bettingAmount.length > 0){
		$.post(
			"https://ak4y-dice/sendInvite",
			JSON.stringify({
				selectedOption: selectedIndex,
				bettingAmount: bettingAmount,
			})
		);
		$(".menuBox").css("display", "none");
		$(".invitationMenu").css("display", "none");
	}else{
		// console.log("BURAYA BETTİNG EKLENMEDİ UYARISI EKLENECEK")
	}
});

$(document).on("click", ".gameWonButton", function () {
	gameCloseButton()
});
$(document).on("click", ".gameDrawButton", function () {
	gameCloseButton()
});
$(document).on("click", ".gameLoseButton", function () {
	gameCloseButton()
});

function gameCloseButton(){
	$.post("https://ak4y-dice/gameClose", JSON.stringify({force: false}));
}

$(document).on("click", ".diceInvitedAcceptButton", function () {
	$.post(
		"https://ak4y-dice/inviteAccepted",JSON.stringify({})
	);
	$(".menuBox").css("display", "none");
	$(".invitationMenu").css("display", "none");
	$(".inviteAcceptMenu").css("display", "none");
});

$(document).on("click", ".gameLeaveButton", function () {
	$('.gameLeaveConfirm').css("display", "flex")
});

$(document).on("click", ".gameLeaveContinueButton", function () {
	$('.gameLeaveConfirm').css("display", "none")
});

$(document).on("click", ".gameLeaveAcceptButton", function () {
	closeMenu()
	continuex = false
	clearTimeout(generalTimeOut)
	$('.gameLeaveConfirm').css("display", "none")
	$(".menuBox").css("display", "none");
	$.post("https://ak4y-dice/gameClose", JSON.stringify({force: true}));
});

$(document).on("click", ".diceInvitedCancelButton", function () {

	$.post(
		"https://ak4y-dice/inviteDeclined",JSON.stringify({})
	);
	$(".menuBox").css("display", "none");
	$(".invitationMenu").css("display", "none");
	$(".inviteAcceptMenu").css("display", "none");
});

$(document).on("click", ".cancelButton", function () {
	closeMenu()
	$.post("https://ak4y-dice/closeMenu", JSON.stringify());
});

function closeMenu() {
	onGamePage = false
	$(".menuBox").css("display", "none");
	$(".invitationMenu").css("display", "none");
	$(".inviteAcceptMenu").css("display", "none");
}