document.addEventListener("DOMContentLoaded",function() {
	document.getElementById("serverurl").addEventListener("input",updateServer);
	document.getElementById("apikey").addEventListener("input",updateAPIKey);

	document.getElementById("serverurl").addEventListener("change",checkServer);
	document.getElementById("apikey").addEventListener("change",checkServer);

	document.getElementById("serverurl").addEventListener("focusout",checkServer);
	document.getElementById("apikey").addEventListener("focusout",checkServer);


	chrome.runtime.onMessage.addListener(onInternalMessage);


	chrome.storage.local.get({"serverurl":"http://localhost:42010"},function(result) {
		document.getElementById("serverurl").value = result["serverurl"]
		checkServerMaybe()
	});
	chrome.storage.local.get({"apikey":"BlackPinkInYourArea"},function(result) {
		document.getElementById("apikey").value = result["apikey"]
		checkServerMaybe()
	});

	chrome.runtime.sendMessage({"type":"query"})



});


//this makes sure only the second call actually makes a request (the first request is pointless
//when the other element isn't filled yet and might actually overwrite the correct result because
//of a race condition)
var done = 0
function checkServerMaybe() {
	done++;
	if (done == 2) {
		checkServer()
	}
}

function onInternalMessage(request,sender) {
	if (request.type == "response") {
		players = request.content
		html = "";
		for (var i=0;i<players.length;i++) {
			if (players[i][1]) {
				html += "<li>" + players[i][0] + ": " + players[i][1] + " - " + players[i][2]
			}
			else {
				html += "<li>" + players[i][0] + ": Playing nothing"
			}
		}
		document.getElementById("playinglist").innerHTML = html;
	}
}



function updateServer() {

	text = document.getElementById("serverurl").value


	chrome.storage.local.set({"serverurl":text})
}

function updateAPIKey() {
	text = document.getElementById("apikey").value
	chrome.storage.local.set({"apikey":text})
}

function checkServer() {
	url = document.getElementById("serverurl").value + "/api/test?key=" + document.getElementById("apikey").value

	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = createCheckmarks;
	try {
		xhttp.open("GET",url,true);
		xhttp.send();
	}
	catch (e) {
		//document.getElementById("checkmark_url").innerHTML = "❌"
		//document.getElementById("checkmark_key").innerHTML = "❌"
		document.getElementById("serverurl").style.backgroundColor = "red"
		document.getElementById("apikey").style.backgroundColor = "red"
	}

}

function createCheckmarks() {
	if (this.readyState == 4) {
		if ((this.status == 204) || (this.status == 205)) {
			//document.getElementById("checkmark_url").innerHTML = "✔️"
			//document.getElementById("checkmark_key").innerHTML = "✔️"
			document.getElementById("serverurl").style.backgroundColor = "lawngreen"
			document.getElementById("apikey").style.backgroundColor = "lawngreen"
		}
		else if (this.status == 403) {
			//document.getElementById("checkmark_url").innerHTML = "✔️"
			//document.getElementById("checkmark_key").innerHTML = "❌"
			document.getElementById("serverurl").style.backgroundColor = "lawngreen"
			document.getElementById("apikey").style.backgroundColor = "red"
		}
		else {
			//document.getElementById("checkmark_url").innerHTML = "❌"
			//document.getElementById("checkmark_key").innerHTML = "❌"
			document.getElementById("serverurl").style.backgroundColor = "red"
			document.getElementById("apikey").style.backgroundColor = "red"
		}
	}
}