// 1.- que al cargar la página todos los checkbox esten es su modo uncheck y las tarjetas esten en modo display none

let checkBox = document.querySelectorAll("input.form-check-input");

function btn_checkBox(keySelector) {

	let btn = document.getElementById(`${keySelector}`);
	let lst_cards = document.querySelectorAll(`div.${keySelector}`);

	btn.addEventListener("click", () => {
		if (btn.checked) {
			lst_cards.forEach(card => {
				card.style.display = "inline";
				new_posts_localStorage(keySelector, "checked")
			});
		} else {
			lst_cards.forEach(card => {
				card.style.display = "none";
				new_posts_localStorage(keySelector, "unchecked")
			});
		}
	});
}

for (let i = 0; i < checkBox.length; i++) {
	btn_checkBox(checkBox[i].id);
}

function new_posts_localStorage(id, status) {
	if (localStorage != null) {
		localStorage.setItem(id, status);
	}
}

// autoseleccionado o deseleccionado de los elementos
(() => {
	if (localStorage != null) {
		// deseleccionar los checkbox
		for (let i = 0; i < localStorage.length; i++) {
			let key = localStorage.key(i);
			let value = localStorage.getItem(key);
			let chkbox = document.getElementById(key);
			if (value == 'unchecked') {
				chkbox.checked = false;
				let lst_cards = document.querySelectorAll(`div.${key}`);
				lst_cards.forEach(card => {
					card.style.display = "none";
				});
			} else if (value == "checked") {
				chkbox.checked = true;
				let lst_cards = document.querySelectorAll(`div.${key}`);
				lst_cards.forEach(card => {
					card.style.display = "inline";
				});
			}
		}
	}
})();