const markAllArticles = (feedId, el, read) => {
	const basePath = window.BASE_PATH;
	const apiUrl = `${basePath}/api/feeds/${feedId}/${read ? "read" : "unread"}`;
	fetch(apiUrl, { method: "PUT" })
		.then((_data) => {
			el.parentNode.nextElementSibling.remove();
			el.parentNode.remove();
		})
		.catch((error) => {
			alert(error);
		});
};

const markOneArticle = (articleId, el, read) => {
	const basePath = window.BASE_PATH;
	const apiUrl = `${basePath}/api/articles/${articleId}/${read ? "read" : "unread"}`;
	fetch(apiUrl, { method: "PUT" })
		.then((_data) => {
			el.parentNode.remove();
		})
		.catch((error) => {
			alert(error);
		});
};

document.addEventListener("DOMContentLoaded", () => {
	document.querySelectorAll(".js-unread-feed").forEach((el) => {
		el.addEventListener("click", () => {
			markAllArticles(el.dataset.feedId, el, false);
		});
	});
	document.querySelectorAll(".js-unread-article").forEach((el) => {
		el.addEventListener("click", () => {
			markOneArticle(el.dataset.articleId, el, false);
		});
	});
	document.querySelectorAll(".js-read-feed").forEach((el) => {
		el.addEventListener("click", () => {
			markAllArticles(el.dataset.feedId, el, true);
		});
	});
	document.querySelectorAll(".js-read-article").forEach((el) => {
		el.addEventListener("click", () => {
			markOneArticle(el.dataset.articleId, el, true);
		});
	});
});