// Sync the selected categories in the popup

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

const listCategories = function (categories, selected) {
	let selectedList = document.getElementById("selected-list");
	for (const category of selected) {
		item = document.createElement("li");
		item.innerHTML = categories[category].title;
		selectedList.appendChild(item);
	}
};

const preferences = document.getElementById("preferences");
preferences.addEventListener("click", () => {
	chrome.runtime.openOptionsPage();
});

const activate = document.getElementById("activate");
activate.addEventListener("click", async () => {
	let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

	chrome.scripting.executeScript({
		target: { tabId: tab.id },
		function: highlightSelected,
	});
});

function highlightSelected() {
	chrome.storage.sync.get(["categories", "selected"], (result) => {
		for (category of result.selected) {
			result.categories[category].keywords.forEach((keyword) => {
				let findings = contains("p, span, li, h1, h2, h3, h4, h5, h6", keyword);

				if (findings.length) {
					findings.forEach((finding) => (finding.style.color = "red"));
				}
			});
		}
	});

	function contains(selector, text) {
		var elements = document.querySelectorAll(selector);
		return Array.prototype.filter.call(elements, function (element) {
			return RegExp(text).test(element.textContent.toLowerCase());
		});
	}
}