const reference = document.getElementById("reference");
const contributionsList = document.getElementById("contributions");
const trackList = document.getElementById("trackList");

const pagedjs = document.createElement("script");
pagedjs.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js";
pagedjs.id = "printview";

const printLib = document.getElementById("btn-print");

window.addEventListener("load", () => {
	fetchContents();
	atlasLink();
});

printLib.addEventListener("click", () => {
	document.getElementsByTagName("head")[0].appendChild(pagedjs);

	// pardon for this is really stupid but it works
	setTimeout(() => {
		let sections = [".libretto", ".container", ".content", ".contribution", ".contributions"];

		for (const section of sections) {
			for (const el of document.querySelectorAll(section)) {
				el.classList.add("full-height");
			}
		}
	}, 1000);
});

function fetchContents() {
	fetch("https://hub.xpub.nl/soupboat/atlas-api/contributions")
		.then((response) => response.json())
		.then((data) => populateContributions(data));
}

function populateContributions(contributions) {
	contributions.sort((a, b) => a.order - b.order);
	contributions.forEach((contribution) => {
		contributionsList.appendChild(createSection(contribution));
		createIndexSection(contribution);
	});
}

function createSection(contribution) {
	let section = reference.cloneNode(true);
	section.id = contribution.moment;
	section.querySelector(".moment").innerHTML = contribution.moment;
	section.querySelector(".title").innerHTML = contribution.title;
	section.querySelector(".author").innerHTML = contribution.author;
	section.querySelector(".description").innerHTML = contribution.description;
	section.querySelector(".content").innerHTML = contribution.content_html;
	return section;
}

function atlasLink() {
	let atlas = document.getElementById("atlas-map");
	let groups = atlas.querySelectorAll("g");
	for (const group of groups) {
		let link = document.createElementNS("http://www.w3.org/2000/svg", "a");
		link.setAttribute("href", "#" + group.id);
		link.innerHTML = group.innerHTML;
		group.innerHTML = "";
		group.appendChild(link);
	}
}

function createIndexSection(contribution) {
	if (contribution.audio) {
		let table = document.createElement("table");
		let title = document.createElement("div");
		title.classList.add("index-title");
		title.innerHTML = contribution.title;
		let tracks = contribution.audio;
		tracks.forEach((track) => {
			let row = document.createElement("tr");
			let col1 = document.createElement("td");
			let col2 = document.createElement("td");
			col1.setAttribute("class", "symbol");
			col2.setAttribute("class", "filename");
			col2.innerHTML = track;
			row.appendChild(col1);
			row.appendChild(col2);
			table.appendChild(row);
		});
		trackList.appendChild(title);
		trackList.appendChild(table);
	}
	
	
}

function printViewToggle() {
	var printview = document.getElementById("printview");
	if (!printview) {
		document.getElementsByTagName("head")[0].appendChild(pagedjs);
		//----------------------- 
		//sto provando sta porcata qui, ma non funzia uguale. quando la pagina si trasforma in pagedjs la variabile del btn non è più definita (????)
		// var btnPrint = document.getElementById("btn-print");
		// console.log(btnPrint);
		//-------------------------
		createBackToWebBtn();
	} else {
		//document.getElementsByTagName("head")[0].removeChild(printview);
		pagedjs.remove();
		console.log("aooooo che cazzo");
	}
}