var evaluatedTags = "";
const clamp = (val, min, max) => Math.min(Math.max(val, min), max)

function postList(n = 0) {
	fetch("/data/posts.json")
		.then((response) => response.json())
		.then((data) => {
			n = clamp(n, 0, data.posts.length);
			if (n < 1) {
				n = data.posts.length;
			}

			// i ❤ for loops
			for (var i = n - 1; i >= 0; i--) {
				console.log("dkfjlaafjsdk" + i)
				postCard(data.posts[i]);
			}
		});
}

function postCard(post) {
	var blogContainer = document.getElementById("blog-container");
	
	var title = post.title;
	var date = post.date;
	var author = post.author;
	var tags = post.tags;
	var thumbnail = post.thumbnail;
	var id = post.id;

	evaluatedTags = "";
	tags.forEach(createTags)

	var template = `
					<div class="card" tabindex="9999">
						<img src="${thumbnail}"
							alt="">
						<div>
							<div class="flex-container-normal chip-container"> 
								${evaluatedTags}
							</div>
							<a href="/blog/post.html?post=${id}" class="link">${title}</a>
							<p>${date}</p>
						</div>
					</div>
		`

	blogContainer.innerHTML += template;
}

function createTags(tag) {
	evaluatedTags += `<span class="chip">${tag}</span>`
}

function getUrlVars() {
	var vars = [], hash;
	var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
	for (var i = 0; i < hashes.length; i++) {
		hash = hashes[i].split('=');
		vars.push(hash[0]);
		vars[hash[0]] = hash[1];
	}
	return vars;
}

// DEPENDENCIES
// * /scripts/scroll.js
function loadPost(n) {
	const md = markdownit({
		'html': true
	})

	fetch("/data/posts.json")
		.then((response) => response.json())
		.then((data) => {
			var post = data.posts[n];
			
			var banner = document.getElementById("banner");
			var title = document.getElementById("title");
			var date = document.getElementById("date");
			var author = document.getElementById("author");
			var tags = document.getElementById("tag-container");
			var content = document.getElementById("content");

			banner.src = post.banner;
			title.innerHTML = post.title;
			date.innerHTML = post.date;
			author.innerHTML = post.author;
			post.tags.forEach(createTags);
			tags.innerHTML = evaluatedTags;

			document.title = `Blog / ${post.title} • altaf-creator`;

			fetch(post.path)
				.then((response) => response.text())
				.then((data) => {
					data = data.replaceAll("-+-+-+", `
<section class="normal-section">
<div class="center-grid">
<div class="div-sizing" id="content">
`)
					data = data.replaceAll("+-+-+-", `
</div>
</div>
</section>
`)

					console.log(data);


					var result = md.render(data);
					result = result.replaceAll("<a", `<a class="link"`);
					result = result.replaceAll("<img", `<img style="max-width: 100%;"`);
					content.innerHTML = result;
				}).then(() => addNodes());
		});
}