const updatesContainer = document.getElementById("updates-container");
let updates = [];

// Fetc the updates from the array in updates.json
// Each element of the array is structured like this:
//
// {
//     "date": "October the 21st, 2021",
//     "title": "2nd hand lifeboat script",
//     "text": "Labore eiusmod labore pariatur elit nostrud ut magna cupidatat minim amet deserunt cillum id. Lorem consectetur incididunt anim sit do eu minim nisi id.",
//     "media": {
//         "type": "video",
//         "src": "./assets/test-js.mp4",
//         "alt": "An excerpt from 'When did software gone wrong?' highlighted progressively as in karaoke",
//         "caption": "In every karaoke there are at least 2 voices: a text and a choir"
//     }
// }
//
// Title, Text and Media are not mandatory.
// If some are not present, the createUpdate function will skip them
//
// Note that the Date is required, but its format is up to the user
//
// All the media elements require an alt description.
// This is for accessibility. It's a really good practice to provide quality alt text
// and we must pay attention to this.

fetch("./updates.json")
	.then((response) => response.json())
	.then((data) => {
		updates = [...data.updates.reverse()];
		populateContents();
	});

function populateContents() {
	updates.forEach((update) => createUpdate(update));
}

function createUpdate(update) {
	let card = document.createElement("div");
	card.classList.add("update");

	// DATE
	let date = document.createElement("div");
	date.classList.add("date");
	date.innerHTML = update.date;
	card.appendChild(date);

	// TITLE, if present
	if (update.title) {
		let title = document.createElement("h3");
		title.classList.add("title");
		title.innerHTML = update.title;
		card.appendChild(title);
	}

	// MEDIA CONTENTS, if present
	if (update.media) {
		let media;
		// IMAGE
		if (update.media.type == "img") {
			media = document.createElement("media");
			media.classList.add("media");

			let img = document.createElement("img");
			img.src = update.media.src;
			img.alt = update.media.alt;
			media.appendChild(img);

			if (update.media.caption) {
				let caption = document.createElement("figcaption");
				caption.innerHTML = update.media.caption;
				media.appendChild(caption);
			}
		}
		// VIDEO
		if (update.media.type == "video") {
			media = document.createElement("div");
			media.classList.add("media");

			let video = document.createElement("video");
			video.src = update.media.src;
			video.alt = update.media.alt;
			video.setAttribute("autoplay", true);
			video.setAttribute("loop", true);
			media.appendChild(video);

			if (update.media.caption) {
				let caption = document.createElement("p");
				caption.classList.add("caption");
				caption.innerHTML = update.media.caption;
				media.appendChild(caption);
			}
		}
		card.appendChild(media);
	}

	// TEXT, if present
	if (update.text) {
		let text = document.createElement("p");
		text.classList.add("text");
		text.innerHTML = update.text;
		card.appendChild(text);
	}

	updatesContainer.appendChild(card);
}