const accordions = document.querySelectorAll(".accordion");

chrome.storage.sync.get(["selected"], (result) => {
	syncCategories(result.selected);
});

const syncCategories = function (selected) {
	for (const accordion of accordions) {
		let expandButton = accordion.querySelector('.more-info input[type="checkbox"]');
		let content = accordion.querySelector(".content");
		accordion.style.height = expandButton.addEventListener("change", (e) => {
			if (e.target.checked) {
				content.style.maxHeight = content.scrollHeight + "px";
				content.style.marginTop = "24px";
			} else {
				content.style.marginTop = 0;
				content.style.maxHeight = null;
			}
		});

		let checkbox = accordion.querySelector(".switch input");
		let category = checkbox.id;
		checkbox.checked = selected.includes(category);

		checkbox.addEventListener("change", () => {
			checkbox.checked
				? selected.push(category)
				: selected.splice(selected.indexOf(category), 1);
			chrome.storage.sync.set({ selected });
		});
	}
};

window.addEventListener("resize", (e) => {
	for (const accordion of accordions) {
		let content = accordion.querySelector(".content");
		if (accordion.querySelector('.more-info input[type="checkbox"]').checked) {
			content.style.maxHeight = content.scrollHeight + "px";
			content.style.marginTop = "24px";
		} else {
			content.style.marginTop = 0;
			content.style.maxHeight = null;
		}
	}
});