/* SPDX-License-Identifier: MPL-2.0
 *
 * Copyright (C) 2022 Sasi Olin <hel@lcp.world>
 */

var textfield = document.getElementById("entry");
textfield.setAttribute("placeholder", "o awen");

function toggle_visible() {
	if (this.classList.contains("text")) {
		this.classList.remove("text");
	}
	else {
		var elements = document.getElementsByClassName("item-indicator");
		Array.from(elements).forEach(function(element) {
			element.classList.remove("text");
		});
		this.classList.add("text");
	}
}

function set_results(entry, tp_en, en_tp) {
	var selected = document.querySelector("input[type='radio'][name='lang']:checked").value;
	var out = {};
	if (selected == "en")
		out = en_tp;
	else if (selected == "tp")
		out = tp_en;
	else {
		if (en_tp[entry] && tp_en[entry]) {
			return;
		}
		else if (en_tp[entry]) {
			selected = "en";
			out = en_tp;
		}
		else if (tp_en[entry]) {
			selected = "tp";
			out = tp_en;
		}
	}
	output = "";
	if (out[entry]) {
		var card = document.createElement("ul");
		card.setAttribute("class", "card");
		var title = document.createElement("h3");
		title.setAttribute("class", "title");
		title.innerHTML = "Translations of ";
		var translated = document.createElement("span");
		translated.innerHTML = entry;
		title.appendChild(translated);
		card.appendChild(title);
		var legend = document.createElement("div");
		legend.setAttribute("class", "legend");
		var word = document.createElement("span");
		word.innerHTML = "Word ";
		word.setAttribute("class", "word");
		legend.appendChild(word);
		var frequency = document.createElement("span");
		frequency.innerHTML = "Frequency";
		frequency.setAttribute("class", "frequency");
		frequency.setAttribute("title", "Based on the data collected by Sonja Lang");
		legend.appendChild(frequency);
		card.appendChild(legend);
		for (const key in out[entry]) {
			var element = document.createElement("li");
			element.setAttribute("class", "card-item");
			var span = document.createElement("span");
			span.innerHTML = key;
			span.innerHTML += " ";
			span.setAttribute("class", "item-title");
			element.appendChild(span);
			var backtrans = document.createElement("span");
			backtrans.setAttribute("class", "item-backtrans");
			if (selected == "en") {
				for (const back in tp_en[key]) {
					if (backtrans.innerHTML != "")
						backtrans.innerHTML += ", ";
					var backlink = document.createElement("a");
					backlink.setAttribute("class", "item-backlink");
					backlink.setAttribute("href", "#en:" + back);
					backlink.innerHTML = back;
					backtrans.appendChild(backlink);
				}
			}
			else if (selected == "tp") {
				for (const back in en_tp[key]) {
					if (backtrans.innerHTML != "")
						backtrans.innerHTML += ", ";
					var backlink = document.createElement("a");
					backlink.setAttribute("class", "item-backlink");
					backlink.setAttribute("href", "#tp:" + back);
					backlink.innerHTML = back;
					backtrans.appendChild(backlink);
				}
			}
			span.appendChild(backtrans);
			var val = document.createElement("span");
			val.innerHTML = out[entry][key];
			val.setAttribute("title", out[entry][key]);
			val.setAttribute("tabindex", 0);
			indicator = Math.ceil(out[entry][key] / 20);
			if (out[entry][key] <= 20)
				indicator = Math.ceil((out[entry][key] - 10) / 20);
			if (indicator < 0)
				indicator = 0;
			val.setAttribute("class", "item-indicator indicator-" + indicator );
			element.appendChild(val);
			card.appendChild(element);
		}
		var source = document.createElement("div");
		source.setAttribute("class", "source");
		var link = document.createElement("a");
		link.setAttribute("href", "https://tokipona.org/nimi_pu.txt");
		link.innerHTML = "nimi_pu.txt";
		source.appendChild(link);
		source.innerHTML += ", ";
		link.setAttribute("href", "https://tokipona.org/nimi_pi_pu_ala.txt");
		link.innerHTML = "nimi_pi_pu_ala.txt";
		source.appendChild(link);
		source.innerHTML += ", ";
		link.setAttribute("href", "https://tokipona.org/compounds.txt");
		link.innerHTML = "compounds.txt";
		source.appendChild(link);
		source.innerHTML = "Source: " + source.innerHTML;
		card.appendChild(source);
		output = card;
	}
	document.getElementById("results").innerHTML = "";
	document.getElementById("result").innerHTML = "";
	var langs = document.getElementsByClassName("output-lang");
	Array.from(langs).forEach(function(element) {
		element.classList.remove("selected");
	});
	document.getElementById("auto-label").innerHTML = "Detect Language";
	if (output) {
		document.getElementById("results").appendChild(output);
		document.getElementById("result").innerHTML = Object.keys(out[entry])[0];
		if (document.querySelector("input[type='radio'][name='lang']:checked").value == "auto") {
			history.replaceState(null, null, document.location.pathname + "#" + entry);
			if (selected == "en")
				document.getElementById("auto-label").innerHTML = "English - Detected";
			else if (selected == "tp")
				document.getElementById("auto-label").innerHTML = "toki pona - Detected";
		}
		else
			history.replaceState(null, null, document.location.pathname + "#" + selected + ":" + entry);
		if (selected == "en") {
			document.getElementById("out-tp").classList.add("selected");
		}
		else if (selected == "tp") {
			document.getElementById("out-en").classList.add("selected");
		}
		var elements = document.getElementsByClassName("item-indicator");
		Array.from(elements).forEach(function(element) {
			element.onclick = toggle_visible;
			element.onkeyup = toggle_visible;
		});
	}
	else
		history.replaceState(null, null, document.location.pathname);
}

function get_suggestions(entry, tp_en, en_tp) {
	var selected = document.querySelector("input[type='radio'][name='lang']:checked").value;
	var out = {};
	if (selected == "en")
		out = en_tp;
	else if (selected == "tp")
		out = tp_en;
	else {
		return;
	}
	output = "";
	if (!out[entry] && entry != "") {
		var card = document.createElement("div");
		card.setAttribute("class", "card");
		keys = Object.keys(out).filter(function(item, index) {
			return RegExp(`^${entry}`).test(item);
		});

		Array.from(keys).forEach(function(key) {
			var element = document.createElement("li");
			element.setAttribute("class", "card-item");
			var link = document.createElement("a");
			link.setAttribute("href", "#" + selected + ":" + key);
			link.innerHTML = key;
			element.appendChild(link);
			card.appendChild(element);
		});
		if (keys.length != 0)
			output = card;
	}
	document.getElementById("suggestions").innerHTML = "";
	if (output)
		document.getElementById("suggestions").appendChild(output);
}

Promise.all([
    fetch('tp-en.json')
    .then(res => res.json()),
    fetch('en-tp.json')
    .then(res=>res.json())
])
.then(([tp_en, en_tp]) => {
		var lang = document.querySelector("input[type='radio'][name='lang']:checked").value;
		window.addEventListener('hashchange', function(e) {
			var entry = "";
			if (decodeURIComponent(window.location.hash.substring(1)).includes(":")) {
				lang = decodeURIComponent(window.location.hash.substring(1)).split(":")[0];
				entry = decodeURIComponent(window.location.hash.substring(1)).split(":")[1];
			}
			else
				entry = decodeURIComponent(window.location.hash.substring(1));
			document.getElementById("entry").value = entry;
			document.getElementById("suggestions").innerHTML = "";
			document.querySelector(`input[type='radio'][name='lang']#${lang}`).checked = true;
			set_results(entry, tp_en, en_tp);
		});
		document.getElementById("entry").addEventListener('input', function(e) {
			var entry = e.target.value;
			get_suggestions(entry, tp_en, en_tp);
			set_results(entry, tp_en, en_tp);
		});
		var rad = document.getElementsByName("lang");
		var prev = null;
		for (var i = 0; i < rad.length; i++) {
			rad[i].addEventListener('change', function() {
				if (this !== prev) {
					prev = this;
				}
				var entry = document.getElementById("entry").value;
				get_suggestions(entry, tp_en, en_tp);
				set_results(entry, tp_en, en_tp);
			});
		}
		if (window.location.hash) {
			var entry = "";
			if (decodeURIComponent(window.location.hash.substring(1)).includes(":")) {
				lang = decodeURIComponent(window.location.hash.substring(1)).split(":")[0];
				entry = decodeURIComponent(window.location.hash.substring(1)).split(":")[1];
			}
			else
				entry = decodeURIComponent(window.location.hash.substring(1));
			document.getElementById("entry").value = entry;
			document.querySelector(`input[type='radio'][name='lang']#${lang}`).checked = true;
			set_results(entry, tp_en, en_tp);
		}
		textfield.removeAttribute("disabled");
		textfield.setAttribute("placeholder", "o alasa e nimi");
		textfield.focus();
}).catch(err => {
	textfield.setAttribute("placeholder", err);
	console.log(err)
});