// ==UserScript==
// @name         YouTube Grid Row Controller
// @namespace    https://github.com/HageFX-78
// @version      0.3
// @description  Adds simple buttons to control items per row on Youtube's home feed, works for shorts and news sections too. Buttons can be hidden if needed.
// @author       HageFX78
// @license      MIT
// @match        *://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        GM_setValue
// @grant        GM_getValue
// @downloadURL none
// ==/UserScript==

(function () {
	"use strict";

	// Configurable options
	const embedInChips = true; // Only applies to the one that is attached to the categories bar, set false if you have another script that removes the bar
	const hideControls = false; // set true to hide UI controls, it will use the default values instead

	const transparentButtons = false; // set true to make the buttons transparent and less intrusive, only applies if hideControls is false

	const defaultCounts = {
		// Default values mainly used when if you want to hide the buttons, change the values to your liking
		content: 4,
		news: 5,
		shorts: 6,
	};

	let currentCounts = {
		content: GM_getValue("itemPerRow", defaultCounts.content),
		news: GM_getValue("newsPerRow", defaultCounts.news),
		shorts: GM_getValue("shortsPerRow", defaultCounts.shorts),
	};

	// Styles
	const style = (css) => {
		const el = document.createElement("style");
		el.textContent = css;
		document.head.appendChild(el);
		return el;
	};

	style(`
		${
			hideControls
				? ""
				: "#right-arrow {right: 10% !important;} #chips-wrapper {justify-content: left !important;}#chips-content{width: 90% !important;}"
		}

		.justify-left-custom {
			justify-content: left !important;
		}

        ytd-rich-item-renderer[rendered-from-rich-grid][is-in-first-column] {
            margin-left: calc(var(--ytd-rich-grid-item-margin) / 2) !important;
        }
		
		ytd-rich-item-renderer[hidden][is-responsive-grid], [is-slim-media]{
			display: block !important;
		}

		ytd-rich-item-renderer{
			margin-bottom: var(--ytd-rich-grid-row-margin) !important;
		}

		.button-container.ytd-rich-shelf-renderer {
			display: none !important;
		}
		
		#dismissible.ytd-rich-shelf-renderer {
			padding-bottom: 0 !important;
			border-bottom: none !important;
		}
		.itemPerRowControl {
            display: flex;
            justify-content: right;
            align-items: center;

            flex: 1;         
            gap: 10px;
            box-sizing: border-box;
            user-select: none;
			${embedInChips ? "" : "width: 100%;"};
        }

        .itemPerRowControl button {

            border: none;
            color: white;
            background-color:${
				transparentButtons
					? "transparent"
					: "var(--yt-spec-badge-chip-background)"
			};
            font-size: 24px;
            
            text-align: center;
            display: inline-block;


            height: 30px;
            aspect-ratio: 1/1;
            border-radius: 50%;
        }

        .itemPerRowControl button:hover {
            background-color: var(--yt-spec-button-chip-background-hover);
            cursor: pointer;
        }
	`);

	const dynamicStyle = style("");

	function applyCounts() {
		dynamicStyle.textContent = `
			ytd-rich-grid-renderer {
				--ytd-rich-grid-items-per-row: ${
					hideControls ? defaultCounts.content : currentCounts.content
				} !important;
			}
			ytd-rich-shelf-renderer {
				--ytd-rich-grid-items-per-row: ${
					hideControls ? defaultCounts.news : currentCounts.news
				} !important;
			}
			ytd-rich-shelf-renderer[is-shorts] {
				--ytd-rich-grid-slim-items-per-row: ${
					hideControls ? defaultCounts.shorts : currentCounts.shorts
				} !important;
			}
		`;
	}

	function saveCounts() {
		GM_setValue("itemPerRow", currentCounts.content);
		GM_setValue("newsPerRow", currentCounts.news);
		GM_setValue("shortsPerRow", currentCounts.shorts);
	}

	function updateAndSave() {
		applyCounts();
		saveCounts();
	}

	function waitForElement(baseQuery, selector) {
		return new Promise((resolve) => {
			const observer = new MutationObserver(() => {
				const el = baseQuery.querySelector(selector);
				if (el) {
					observer.disconnect();
					resolve(el);
				}
			});
			observer.observe(baseQuery, {
				childList: true,
				subtree: true,
			});
		});
	}

	function watchMainContent(container) {
		const observer = new MutationObserver((mutations) => {
			mutations.forEach(({ addedNodes }) => {
				addedNodes.forEach((node) => {
					if (
						node.nodeType === 1 &&
						node.matches("ytd-rich-section-renderer")
					) {
						const ref = node.querySelector("#menu-container");
						const isShorts =
							node.querySelector("[is-shorts]") !== null;

						createControlDiv(
							ref,
							isShorts ? "shorts" : "news",
							true
						);
					}
				});
			});
		});
		observer.observe(container, { childList: true, subtree: true });
	}

	function createControlDiv(target, type, insertBefore = false) {
		const controlDiv = document.createElement("div");
		controlDiv.classList.add(
			"style-scope",
			"ytd-rich-grid-renderer",
			"itemPerRowControl"
		);

		["-", "+"].forEach((symbol) => {
			const btn = document.createElement("button");
			btn.innerText = symbol;
			btn.addEventListener("click", () => {
				if (symbol === "+") {
					currentCounts[type]++;
					console.log(currentCounts[type]);
				} else if (currentCounts[type] > 1) {
					currentCounts[type]--;
				}
				updateAndSave();
			});
			controlDiv.appendChild(btn);
		});

		if (insertBefore) target.parentNode.insertBefore(controlDiv, target);
		else target.appendChild(controlDiv);
		if (!insertBefore) controlDiv.classList.add("justify-left-custom");
	}

	function init(queryStartLocation) {
		applyCounts();

		if (hideControls) {
			return;
		}

		if (embedInChips) {
			waitForElement(queryStartLocation, "#chips-wrapper").then((el) =>
				createControlDiv(el, "content")
			);
		} else {
			waitForElement(
				queryStartLocation,
				"#contents.ytd-rich-grid-renderer"
			).then((el) => createControlDiv(el, "content", true));
		}

		// Start watching for newly loaded sections
		waitForElement(
			queryStartLocation,
			"#contents.ytd-rich-grid-renderer"
		).then(watchMainContent);

		// Cleanup after init
		window.removeEventListener(
			"yt-navigate-finish",
			handlePageContentChanged
		);
	}

	// Workaround when reloaded on creator's home page and going back to main page will hide the buttons
	let firstLoad = true;
	function handlePageContentChanged() {
		if (location.href.endsWith("youtube.com/")) {
			let browseElements = document.querySelectorAll("ytd-browse");

			if (firstLoad) {
				init(browseElements[0]);
			} else {
				// If reloaded on creator's home page, second ytd-browse will be the main page
				init(browseElements[1]);
			}
		}
		firstLoad = false;
	}

	// ----------------------------------- Main Execution -----------------------------------

	window.addEventListener("yt-navigate-finish", handlePageContentChanged);
})();