let nicknameInput = document.getElementById("nicknameInput");
let lobbyIdInput = document.getElementById("lobbyIdInput");
let joinLobbyForm = document.getElementById("joinLobbyForm");
let joinLobbyButton = document.getElementById("joinLobbyButton");

nicknameInput.oninput = lobbyIdInput.oninput = function(e) {
	e.target.setCustomValidity("");
}

joinLobbyForm.onsubmit = function(e) {
	let nickname = nicknameInput.value;
	let lobbyId = lobbyIdInput.value;

	let request = new XMLHttpRequest();
	request.addEventListener("load", function (e) {
		let response = JSON.parse(request.responseText);
		if(response.canJoin)
		{
			joinLobbyForm.action = "/lobby/" + lobbyId;
			joinLobbyForm.submit();
		}
		else
		{
			let badField = document.getElementsByName(response.badField)[0];
			badField.setCustomValidity(response.reason);
			badField.reportValidity();
		}
	});
	request.open("GET", "/lobby/" + lobbyId + "/joinability?nickname=" + encodeURIComponent(nickname));
	request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	request.send();

	return false;
}

joinLobbyButton.onclick = function(e) {
	joinLobbyForm.submit
}