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

function listAllCategories(categories, selected) {
	const list = document.querySelector("#categories");
	let reference = list.querySelector(".reference");
	for (const category in categories) {
		let item = reference.cloneNode(true);
		item.classList.remove("reference");

		let label = item.querySelector("label");

		label.innerHTML = categories[category].title;
		label.setAttribute("for", category);

		let checkbox = item.querySelector("input");
		checkbox.checked = selected.includes(category);
		checkbox.setAttribute("name", category);

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

		list.appendChild(item);
	}
}

function addOrRemove(array, value) {
	var index = array.indexOf(value);

	if (index === -1) {
		array.push(value);
	} else {
		array.splice(index, 1);
	}
}