// cookie parser function
function getCookies () {
	return Object.fromEntries(document.cookie.split(/\s{0,};\s{0,}/gmiu).map(i => i.split(/\s{0,}=\s{0,}/gmiu)));
}

// translate function
function translate (page) {
    [...document.getElementsByClassName("translate")].forEach(translateEl => {
		// console.log(translateEl.id);
        const result = tr(page, translateEl.id);
        // console.log(result);
        if (result)
            translateEl.innerHTML = result;
	});
	
	[...document.getElementsByClassName("linked-btn")].forEach(el => {
		el.style.cursor = "pointer";
	});
}

// load styles
document.head.innerHTML += '\\n		<link href="/bootstrap/bootstrap.min.css" rel="stylesheet">';
document.head.innerHTML += '\\n		<link href="/css/main.css" rel="stylesheet">';
document.head.innerHTML += '\\n		<link href="/font-awesome/css/all.css" rel="stylesheet">';
document.head.innerHTML += '\\n		<link rel="icon" href="/favicon.png">'

// load main page
document.body.innerHTML = `<nav id="navbar-main" class="navbar navbar-expand-lg navbar-dark bg-dark"><div class="container-fluid">
	<a class="navbar-brand linked-btn" onclick="fl.go('/');">
		Adventure AI Labs
	</a>
	<div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav">
		<div class="vr"></div>
		<li class="nav-item">
			<a class="nav-link translate linked-btn" aria-current="page" onclick="fl.go('/');" id="nav-home-btn"><i class="fas fa-home"></i> Home</a>
		</li>
		<li class="nav-item">
			<a class="nav-link translate linked-btn" aria-current="page" onclick="fl.go('/connect');" id="nav-connect-btn"><i class="fas fa-network-wired"></i> Connect</a>
		</li>
		<li class="nav-item">
			<a class="nav-link translate linked-btn" aria-current="page" onclick="fl.go('/documentation');" id="nav-docs-btn"><i class="fas fa-book"></i> Documentation</a>
		</li>
	</ul></div>
</div></nav>
<div id="fl.area">

</div>`;

function checkContentWarning (successfulHandler) {
	const warnModal = new bootstrap.Modal(document.getElementById('warningModal'), {});
	document.getElementById('accept-denial-btn').onclick = () => {
		document.cookie = "cw=1";
		successfulHandler?.();
	};
	
	const cookies = getCookies();
	if (!cookies.cw) {
		warnModal.show();
	} else {
		successfulHandler?.();
	}
}

// Fl Handlers
fl.bindLoad("/connect", () => {
	translate("/connect");
	
	function connectServers () {
		document.getElementById("loading-servers").innerHTML = `<center><p>${tr("/connect", "loading") ?? "Loading..."}</p></center>`;
		
		const xhr = new XMLHttpRequest();
		xhr.open("GET", "/api/active-servers.json", true);
		
		xhr.onerror = () => {
			document.getElementById("loading-servers").innerHTML = `<center>
			<h3>${tr("/connect", "connection-failed") ?? "Connection failed"}</h3><hr>
			<button type="button" class="btn btn-primary translate" id="retry-connecting">${tr("/connect", "retry-connecting") ?? "Retry"}</button>
			</center>`;
			document.getElementById("retry-connecting").onclick = () => connectServers();
		}
		
		xhr.onload = async () => {
			if (xhr.status === 200) {
				const servers = JSON.parse(xhr.response).result;
				const items = [];
				const itemIDs = [];
				const mp = servers.map(async serverItem => {
					const promise = new Promise((resolve, reject) => {
						console.log("serverItem:", serverItem);
						const socket = new WebSocket(`ws://${serverItem.address}:${serverItem.port}`);
						let ping = new Date();
						socket.onopen = () => {
							ping = (new Date()) - ping;
							socket.onmessage = (ev) => {
								const data = JSON.parse(ev.data).result;
								itemIDs.push({
									...data,
									itemID: `con-btn-to:${data.tag}:${serverItem.address}:${serverItem.port}`
								});
								resolve(items.push(`<tr${!data.secureMode ? ' style="background-color: #7F6003"' : ""}>
									<td${!data.secureMode ? ' style="background-color: #7F6003"' : ""}>${data.name}</td>
									<td${!data.secureMode ? ' style="background-color: #7F6003"' : ""}>${serverItem.address}:${serverItem.port}</td>
									<td${!data.secureMode ? ' style="background-color: #7F6003"' : ""}>${!data.secureMode ? '<font color="red"><i class="fas fa-exclamation-triangle"></i></font>' : '<font color="green"><i class="fas fa-lock"></i></font>'}</td>
									<td${!data.secureMode ? ' style="background-color: #7F6003"' : ""}>${ping}</td>
									<td${!data.secureMode ? ' style="background-color: #7F6003"' : ""}><button class="btn btn-secondary" id="con-btn-to:${data.tag}:${serverItem.address}:${serverItem.port}">${tr("/connect", "connect-to-server-btn") ?? "Connect"}</button></td>
								</tr>`));
							};
							socket.send(JSON.stringify({
								method: "info"
							}));
						};
						socket.onerror = (err) => {
							console.error(err);
							resolve(items.push(`<tr>
								<td style="background-color: #7F0000"><font color="red">${tr("/connect", "offline-server") ?? "Offline"}</font></td>
								<td style="background-color: #7F0000">${serverItem.address}:${serverItem.port}</td>
								<td style="background-color: #7F0000"><font color="red"><i class="fas fa-exclamation-triangle"></i></font></td>
								<td style="background-color: #7F0000"><font color="red">${tr("/connect", "offline-server") ?? "Offline"}</font></td>
								<td style="background-color: #7F0000"><button class="btn btn-danger" disabled>${tr("/connect", "offline-server") ?? "Offline"}</button></td>
							</tr>`));
						};
					});
					return await promise;
				});
				
				await Promise.all(mp);
				items.push(`<tr><td colspan="5"><center><button class="btn btn-primary">${tr("/connect", "add-custon-server") ?? "Connect to custom server"}</button></center></td></tr>`);
				document.getElementById("loading-servers").innerHTML = `<table class="table table-dark">
					<thead>
						<th scope="col">${tr("/connect", "server-name-tbl") ?? "Name"}</th>
						<th scope="col">${tr("/connect", "server-address") ?? "Address"}</th>
						<th scope="col">${tr("/connect", "server-encryption") ?? "Encrypted"}</th>
						<th scope="col">${tr("/connect", "server-ping") ?? "Ping"}</th>
						<th scope="col">${tr("/connect", "server-action") ?? "Action"}</th>
					</thead>
					<tbody>
						${items.join("\n")}
					</tbody>
				</table>`;
				
				itemIDs.forEach(btn => {
					document.getElementById(btn.itemID).onclick = () => {
						checkContentWarning();
					};
				});
			}
		};
		
		xhr.send();
	}
	
	const cookies = getCookies();
	console.log(cookies);
	const cookiesModal = new bootstrap.Modal(document.getElementById('cookiesModal'), {});
	
	if (!cookies.accept_cookies) {
		cookiesModal.show();
	} else {
		connectServers();
	}
	
	document.getElementById("accept-cookie-btn").onclick = () => {
		document.cookie = "accept_cookies=1";
		connectServers();
	};
	
	/*document.getElementById("enable-cookie-cnt").onclick = () => {
		cookiesModal.show();
	};*/
});

fl.bindLoad("", () => {
    translate("/");
	// carousel

	function onMouse (condition) {
		return;
		[...document.getElementsByClassName("card-img")].forEach(img => {
			img.style.filter = `blur(${!condition ? 5 : 0}px)`;
		});
	}

	onMouse(false);

	[...document.getElementsByClassName("carousel-item")].forEach(item => {
		item.onmouseout = () => onMouse(false);
		item.onmouseover = () => onMouse(true);
	});

	[...document.getElementsByClassName("btn-card")].forEach(item => {
		item.onmouseout = () => onMouse(true);
		item.onmouseover = () => onMouse(false);
	});

	const interval = setInterval(() => {
		const navbarHeight = +(document.getElementById("navbar-main")?.offsetHeight);
		/*if (document.getElementById('main_img1')?.src) {
			document.getElementById('main_img1').src = window.screen.availWidth / window.screen.availHeight > 1.45 ? "/assets/hello/1.png" : "/assets/hello/m/1.png";
			document.getElementById('main_img2').src = window.screen.availWidth / window.screen.availHeight > 1.45 ? "/assets/hello/2.png" : "/assets/hello/m/2.png";
			document.getElementById('main_img3').src = window.screen.availWidth / window.screen.availHeight > 1.45 ? "/assets/hello/3.png" : "/assets/hello/m/3.png";
		}*/
		const selectedCSS = Object.entries(document.styleSheets).filter(([key, cssFileObject]) => cssFileObject.href === `${location.origin}/css/main.css`)[0][1];
		Object.entries(selectedCSS.rules).filter(([key, rule]) => rule.selectorText == '.carousel > .carousel-inner > .carousel-item > img')[0][1].style.height = `calc(100vh - ${navbarHeight}px)`;
		// console.log('ok');
	}, 1);

	fl.bindUnload("/", () => {
		clearInterval(interval);
	});
});

// Go to current page
fl.goJust(window.location.pathname);