// ==UserScript==
// @name        Arras.io Chat
// @match	    *://arras.io/*
// @match       *://arras.netlify.app/*
// @match       *://arrax.io/*
// @match       *://arras.cx/*
// @author      Inellok
// @description Use Right Shift button to enable/disable chat
// @namespace   Inellok Labs.
// @version     1.4
// @run-at      document-start
// @license     MIT
// @downloadURL none
// ==/UserScript==


(function() {
	let canvas = document.getElementById("canvas");
	canvas.style.zIndex = 1;
	canvas.style.position = "absolute";

	let name = "unnamed";
	let item = window.localStorage.getItem("arras.io");
	let lockhash = "";

	if (item != null) {
		name = JSON.parse(window.localStorage.getItem("arras.io")).name;
	}

	let info_container = document.createElement("div");
	info_container.innerText = "Arras.io Chat (by Inellok)";
	info_container.style.marginLeft = "40%";
	info_container.style.color = "white";
	info_container.style.opacity = "1";


	let chat_container = document.createElement("div");
	chat_container.style.marginLeft = "2%";
	chat_container.style.color = "red";
	chat_container.style.opacity = "1";
	chat_container.style.height = "88%";
	chat_container.fontSize = "100%";

	let msg_container = document.createElement("input");

	msg_container.placeholder = "message";
	msg_container.style.marginLeft = "2%";
	msg_container.style.color = "black";
	msg_container.style.opacity = "1";
	msg_container.style.height = "5%";
	msg_container.style.width = "70%";
	msg_container.style.fontSize = "110%";


	let send_container = document.createElement("button");

	send_container.innerText = "SEND / UPDATE";
	send_container.style.marginLeft = "2%";
	send_container.style.color = "black";
	send_container.style.opacity = "1";
	send_container.style.height = "5%";
	send_container.style.width = "25%";
	send_container.style.fontSize = "60%";

	send_container.onclick = function() {
		sendEverything();

		return false;
	}

	let mainContainer = document.createElement("div");
	mainContainer.style = `
    width:50%;
    height:85%;
    background:#000000;
    opacity: 90%;
    margin: auto;
    font-size: 150%;
    visibility:hidden;
    z-index:2;
    position:absolute;
    margin-left: 20%`;

	msg_container.addEventListener("keydown", (e) => {
		e.stopPropagation();
		if (e.code === "Enter" && document.activeElement === msg_container) {
			sendEverything();
			msg_container.value = "";
		}

		if (e.code === "ShiftRight") {
			if (mainContainer.style.visibility === "hidden") {
				mainContainer.style.visibility = "visible";
			} else {
				mainContainer.style.visibility = "hidden";
			}
		}
	});

	mainContainer.appendChild(info_container);
	mainContainer.appendChild(chat_container);
	mainContainer.appendChild(msg_container);
	mainContainer.appendChild(send_container);
	document.body.appendChild(mainContainer);

	window.addEventListener("keydown", (e) => {
		if (e.code === "ShiftRight") {
			if (mainContainer.style.visibility === "hidden") {
				mainContainer.style.visibility = "visible";
			} else {
				mainContainer.style.visibility = "hidden";
			}
		}


	});

	function sendEverything() {
		let xhr = new XMLHttpRequest();
		xhr.open("POST", "https://arrasio-chat.glitch.me/");
		xhr.setRequestHeader("Accept", "plain/text");
		xhr.setRequestHeader("Content-Type", "plain/text");
		xhr.onreadystatechange = function() {
			if (xhr.readyState === 4) {
				chat_container.innerText = "";
				let msgs = JSON.parse(xhr.responseText);
				for (let i = 0; i < msgs.length; ++i) {
					if (lockhash === msgs[i].srv) {
						let msg = msgs[i].nick + ": " + msgs[i].message;
						chat_container.innerText += (msg + '\n');
					}
				}
			}
		};

		lockhash = "";
		let started = false;
		for (let i = 0; i < location.hash.length; i++) {
			if (location.hash[i] === '#') {
				started = true;
				continue
			}
			if (started) {
				lockhash += location.hash[i];
			}
		}

		let data = JSON.stringify({
			srv: lockhash,
			nick: name,
			message: msg_container.value
		});
		xhr.send(data);
	}
})();