import { browser } from "webextension-polyfill-ts";
declare interface Window {
	hasRun: boolean;
}

(async () => {
	if (window.location.host != "translate.google.com" || window.hasRun) return;
	window.hasRun = true;

	const conn = browser.runtime.connect(<any>{
		name: "gtranslate_scraper_conn",
	});

	const src = <HTMLTextAreaElement>document.querySelector("textarea#source");

	const result = <HTMLDivElement>(
		document.querySelector("div.results-container")
	);

	const isTranslating = () => result.classList.contains("translating");

	const observer = new MutationObserver((mutations) => {
		console.log(mutations);
		const wasTranslating = mutations.some((m) =>
			m.oldValue!.split(" ").some((c) => c == "translating")
		);
		if (wasTranslating && !isTranslating()) {
			sendTranslation();
		}
	});
	observer.observe(result, {
		attributes: true,
		attributeOldValue: true,
		attributeFilter: ["class"],
	});

	const sendTranslation = () => {
		conn.postMessage({ src: src.value, result: result.innerText.trim() });
	};

	conn.onMessage.addListener((to_translate: string) => {
		if (src.value == to_translate && !isTranslating()) sendTranslation();
		else src.value = to_translate;
	});
})();