let TheHref = document.location.href;
let TheTimeout = null;
let SettingsStay = false;

const StringArray = ["What was the video about? Can you give an in-depth explaination of what you did?", 
					"START - What are some things that you can do to improve this video? What can you start doing? List the sections you want improved WITH TIMESTAMPS.", 
					"STOP - What are things that shouldn't be done or should not have began in the first place?", 
					"CONTINUE - What can you keep doing to make the same effect happen? These are things that don't need to be changed.",
					"You did it! No Further typing is needed."];

// Observe changes to the Href and do things accordingly.
const observer = new MutationObserver(mutations => {
	if (TheHref !== document.location.href) {
		TheHref = document.location.href;
		clearTimeout(TheTimeout);
		TheTimeout = setTimeout(() => VideoOrChannel(), 1500);
	}
});
observer.observe(document.body, { childList: true, subtree: true });

// Do some things on load.
window.onload = function() {
	setTimeout(() => {
		VideoOrChannel();
	}, 2000);
	document.getElementsByTagName("ytcp-send-feedback-button")[0].remove();
	if (document.location.href.includes("channel")) {
		document.getElementsByTagName("ytcp-ve")[9].parentElement.remove();
		SettingsStay = true;
	}
};

// Simple function to not have stuff die.
function VideoOrChannel(){
	if (TheHref.includes("channel") && SettingsStay == false) {
		document.getElementsByTagName("ytcp-ve")[9].parentElement.remove();
		SettingsStay = true;
	}
	
	if (document.location.href.includes("channel")) {
		ModifyChannelElements();
	}
	else {
		ModifyVideoElements();
	}
}

// Remove and add elements in the video area.
function ModifyVideoElements() {
	SettingsStay = false;
	if (document.location.href.includes("analytics")) {
		if (document.location.href.includes("tab-overview")) {
			console.log("Do nothing here");
		}
		if (document.location.href.includes("tab-reach_viewers")) {
			console.log("Do nothing here");
		}
		if (document.location.href.includes("tab-interest_viewers")) {
			console.log("Do nothing here");
		}
		if (document.location.href.includes("tab-build_audience")) {
			console.log("Do nothing here");
		}
		console.log("You are in analytics!");
		return;
	}
	
	if (document.location.href.includes("editor")) {
		console.log("You are in the editor!");
		return;
	}
	
	if (document.location.href.includes("comments")) {
		console.log("You are in comments!");
		return;
	}
	
	if (document.location.href.includes("translations")) {
		console.log("You are in the translations!");
		return;
	}
	
	if (document.location.href.includes("copyright")) {
		console.log("You are in copyright!");
		return;
	}
	
	// Livestream is seperated? Why?
	if (document.location.href.includes("livestreaming")) {
		console.log("You are streemin!");
		return;
	}
	console.log("You are in the overview!");
}

// Remove and add elements in the channel area.
function ModifyChannelElements() {
	if (document.location.href.includes("videos") || document.location.href.includes("content")) {
		if (document.getElementsByTagName("ytcp-primary-action-bar")[0].classList.contains("PersistentElements") == false) {
			document.getElementsByTagName("ytcp-primary-action-bar")[0].classList.add("PersistentElements");
			document.getElementsByTagName("tp-yt-paper-tab")[7].remove();
		}
		console.log("Content elements have been altered!");
		return;
	}
	
	if (document.location.href.includes("analytics")) {
		if (document.location.href.includes("tab-overview")) {
			let Items = document.getElementsByTagName("yta-personalized-overview-bottom-card");
			Items[0].remove();
			if (document.getElementsByTagName("yta-section")[0].classList.contains("PersistentElements") == false) {
				document.getElementsByTagName("yta-section")[0].classList.add("PersistentElements");
				Items = document.getElementsByTagName("yta-entity-snapshot-carousel");
				Items[0].remove();
			}
			
			// Create Topic Buttons.
			browser.storage.local.get("TopicList").then(
				(List) => {
					let Card = document.createElement("tp-yt-paper-card");
					Card.classList.add("staple-card");
					Card.classList.add("style-scope");
					Card.classList.add("yta-card-container");
					Card.style.marginTop = "24px";
					let Text = document.createElement("div");
					Text.classList.add("style-scope");
					Text.style.margin = "24px";
					Text.style.fontSize = "18px";
					Text.style.fontWeight = "bold";
					Text.innerHTML = "Interesting topics from the week!";
					Card.appendChild(Text);
					document.getElementsByTagName("yta-key-metric-card")[0].appendChild(Card);
					// Yes, if there is nothing in storage, this errors.
					// This is my fix: ignore it. Also fuck off.
					for (let i of Object.values(List)[0]) {
						// Style elements
						let Button = document.createElement("button");
						Button.style.width = "45%";
						Button.style.height = "50px";
						Button.style.border = "25%";
						Button.style.margin = "12px";
						Button.style.background = "rgba(255, 255, 255, 0.1)";
						Button.style.color = "white";
						Button.style.border = "0px solid";
						Button.style.borderRadius = "20px";
						Button.style.fontSize = "20px";
						Button.style.fontWeight = "bold";
						// Events to behave like a button
						Button.addEventListener("mouseenter", (event) => {
							Button.style.background = "rgba(255, 255, 255, 0.2)";
						});
						Button.addEventListener("mouseleave", (event) => {
							Button.style.background = "rgba(255, 255, 255, 0.1)";
						});
						Button.addEventListener("mousedown", (event) => {
							Button.style.background = "rgba(255, 255, 255, 0.15)";
						});
						Button.addEventListener("mouseup", (event) => {
							Button.style.background = "rgba(255, 255, 255, 0.2)";
						});
						Button.innerHTML = i;
						i = i.replaceAll(" ", "+");
						Button.addEventListener("click", (event) => {
							document.location.href = "https://www.google.com/search?q=" + i + "&udm=7&tbs=qdr:w";
						});
						Card.appendChild(Button);
					}
				}
			);
		}
		if (document.location.href.includes("tab-content")) {
			console.log("Do nothing here");
		}
		if (document.location.href.includes("tab-build_audience")) {
			console.log("Do nothing here");
		}
		if (document.location.href.includes("tab-research")) {
			console.log("Do nothing here");
		}
		console.log("Analytic elements have been altered!");
		return;
	}
	
	if (document.location.href.includes("comments")) {
		console.log("You are in comments!");
		return;
	}
	
	if (document.location.href.includes("translations")) {
		console.log("You are in translations!");
		return;
	}
	
	if (document.location.href.includes("copyright")) {
		console.log("you are in copyright!");
		return;
	}
	
	if (document.location.href.includes("monetization")) {
		console.log("You are in monitization");
		return;
	}
	
	if (document.location.href.includes("editing")) {
		console.log("You are in customization!");
		return;
	}
	
	// Dashboard
	// Remove the quick actions (they are useless)
	if (document.getElementsByTagName("ytcp-quick-actions").length > 0) {
		document.getElementsByTagName("ytcp-quick-actions")[0].remove();
	}
	
	// Adjust the cards in certain columns.
	for (let Element of document.getElementsByTagName("ytcd-card")) {
		// remove cards
		if (Element.getAttribute("test-id") == "channel-dashboard-snapshot-card") {
			Element.remove();
		}
	}
	
	// Livestream is seperated? Why?
	if (document.location.href.includes("livestreaming")) {
		console.log("You are streemin!");
		return;
	}
	
	// Past this point is the dashboard.
	// Alter all of the columns to suit the needs of me.
	let Counter = 0;
	while (Counter <= 2) {
		switch (Counter) {
			case 0:
				document.getElementsByTagName("ytcd-card-column")[Counter].setAttribute("style", "width: calc(50% - var(--card-margin));");
			case 1:
				document.getElementsByTagName("ytcd-card-column")[Counter].setAttribute("style", "width: calc(50% - var(--card-margin));");
				break;
			case 2:
				document.getElementsByTagName("ytcd-card-column")[Counter].remove();
				break;
		}
		Counter++;
	}
	
	// Create objects in the Dashboard.
	// This if statement is for elements that don't go away once deleted.
	const Dashboard = document.getElementsByTagName("ytcd-channel-dashboard")
	if (document.getElementsByClassName("PersistentObject").length == 0) {
		// Create the progress bar.
		let Progress = document.createElement("div");
		Progress.classList.add("PersistentObject");
		// Style elements.
		Progress.style.height = "50px";
		Progress.style.width = "100% - 24px";
		Progress.style.margin = "24px";
		Progress.style.border = "1px solid rgba(255, 255, 255, 0.1";
		// Create the inside of the progress bar.
		let Meter = document.createElement("div");
		// Style elements.
		Meter.style.background = "rgb(255, 0, 0)";
		Meter.classList.add("liquid");
		Meter.style.width = "0%";
		Meter.style.height = "100%";
		Progress.appendChild(Meter);
		// Place the progress bar on top.
		Dashboard[0].parentElement.insertBefore(Progress, Dashboard[0]);
		// Create the text box.
		let Textbox = document.createElement("textarea");
		// Style elements.
		Textbox.style.marginLeft = "24px";
		Textbox.style.marginRight = "24px";
		Textbox.style.height = "200px";
		Textbox.style.background = "rgba(0, 0, 0, 0.2)";
		Textbox.style.border = "1px solid rgba(255, 255, 255, 0.1";
		Textbox.style.color = "white";
		Textbox.placeholder = StringArray[0];
		Textbox.style.resize = "none";
		Dashboard[0].parentElement.insertBefore(Textbox, Dashboard[0]);
		// Create the continue button.
		let Button = document.createElement("button");
		// Style elements.
		Button.style.width = "250px";
		Button.style.height = "40px";
		Button.style.border = "25%";
		Button.style.margin = "24px";
		Button.style.marginBottom = "0";
		Button.innerHTML = "Continue";
		Button.style.background = "rgba(255, 255, 255, 0.1)";
		Button.style.color = "white";
		Button.style.border = "0px solid";
		Button.style.borderRadius = "20px";
		Button.style.fontSize = "18px";
		Button.style.fontWeight = "bold";
		// Change style like a button
		Button.addEventListener("mouseenter", (event) => {
			Button.style.background = "rgba(255, 255, 255, 0.2)";
		});
		Button.addEventListener("mouseleave", (event) => {
			Button.style.background = "rgba(255, 255, 255, 0.1)";
		});
		Button.addEventListener("mousedown", (event) => {
			Button.style.background = "rgba(255, 255, 255, 0.15)";
		});
		Button.addEventListener("mouseup", (event) => {
			Button.style.background = "rgba(255, 255, 255, 0.2)";
		});
		Button.addEventListener("click", (event) => {
			// Button to not only progress the bar, but to also clear the textbox!
			const Liquid = document.getElementsByClassName("liquid")[0];
			if (Liquid.clientWidth != Liquid.parentElement.clientWidth) {
				// If the thing is full, don't do anything
				if (Liquid.clientWidth - 1 == Liquid.parentElement.clientWidth) {
					Textbox.disabled = true;
				}
				else {
					let BigAssCalc = (Liquid.clientWidth + (Liquid.parentElement.clientWidth / 4)) / Liquid.parentElement.clientWidth;
					document.cookie = "ProgressAmount=" + (BigAssCalc * 100).toString() + ";max-age=28800";
					Liquid.style.width = (BigAssCalc * 100) + "%";
					Textbox.value = "";
					Textbox.placeholder = StringArray[parseInt(Liquid.style.width) / 25];
				}
			}
		});
		Dashboard[0].parentElement.insertBefore(Button, Dashboard[0]);
		// Check for cookies.
		if (document.cookie.split("; ").find((row) => row.startsWith("ProgressAmount="))?.split("=")[1] != undefined) {
			const Liquid = document.getElementsByClassName("liquid")[0];
			document.getElementsByClassName("liquid")[0].style.width = document.cookie.split("; ").find((row) => row.startsWith("ProgressAmount="))?.split("=")[1] + "%";
			Textbox.placeholder = StringArray[parseInt(Liquid.style.width) / 25];
			if (Liquid.clientWidth - 1 == Liquid.parentElement.clientWidth) {
				Textbox.disabled = true;
			}
		}
	}
	
	// Elements that go away go here.
	// Create Channel Buttons.
	browser.storage.local.get("ChannelList").then(
		(List) => {
			let Card = document.createElement("ytcd-card");
			Card.classList.add("card");
			Card.classList.add("style-scope");
			Card.classList.add("ytcd-card");
			let Text = document.createElement("div");
			Text.classList.add("title-text");
			Text.classList.add("style-scope");
			Text.classList.add("ytcd-list-card");
			Text.classList.add("card-title");
			Text.innerHTML = "Cool channels on YouYube!";
			Text.style.fontSize = "18px";
			Text.style.margin = "24px 24px 0px 24px";
			Card.appendChild(Text);
			Dashboard[0].getElementsByTagName("ytcd-card-column")[0].appendChild(Card);
			// Yes, if there is nothing in storage, this errors.
			// This is my fix: ignore it. Also fuck off.
			for (let i of Object.values(List)[0]) {
				// Style elements
				let Button = document.createElement("button");
				Button.style.minWidth = "300px";
				Button.style.height = "30px";
				Button.style.border = "25%";
				Button.style.margin = "12px";
				Button.style.background = "rgba(255, 255, 255, 0.1)";
				Button.style.color = "white";
				Button.style.border = "0px solid";
				Button.style.borderRadius = "20px";
				Button.style.fontSize = "13px";
				Button.style.fontWeight = "bold";
				// Change style like a button.
				Button.addEventListener("mouseenter", (event) => {
					Button.style.background = "rgba(255, 255, 255, 0.2)";
				});
				Button.addEventListener("mouseleave", (event) => {
					Button.style.background = "rgba(255, 255, 255, 0.1)";
				});
				Button.addEventListener("mousedown", (event) => {
					Button.style.background = "rgba(255, 255, 255, 0.15)";
				});
				Button.addEventListener("mouseup", (event) => {
					Button.style.background = "rgba(255, 255, 255, 0.2)";
				});
				// Different cases for what the user wants to do.
				if (i.indexOf("http://") == 0) {
					i = i.slice(7);
				}
				if (i.indexOf("https://") == 0) {
					i = i.slice(8);
				}
				if (i.indexOf("@") == 0) {
					i = "www.youtube.com/" + i;
				}
				if (i.indexOf("http://") != 0 && i.indexOf("https://") != 0 && i.indexOf("@") != 0 && i.indexOf("www.youtube.com")) {
					console.warn("The extension has no idea what to do with this string. Please consider removing it.");
					console.warn(i);
				}
				Button.innerHTML = i;
				Button.addEventListener("click", (event) => {
					document.location.href = "https://" + i;
				});
				Card.appendChild(Button);
			}
		}
	);
	console.log("Home elements have been altered!");
}