const randomBetween = (min, max) => {
  return Math.random() * (max - min) + min;
}

document.querySelectorAll('.item input').forEach(($input) => {
	// @note: we listen on click because that happens *before* a change event
	$input.addEventListener('click', async (e) => {
		if (!document.startViewTransition) return;

		e.preventDefault();

		const t = document.startViewTransition(() => {
			e.target.setAttribute('checked', 'checked'); // Needed to trigger the Polyfill’s MutationObserver
			e.target.checked = true; // Needed to actually update the checked input
		});

		await t.finished;
		console.log('done');
	});
});

class SelectorMatcher {
	static watchers = new Map();
	static matchedElements = new Map();
	static observer;
		
	static register({selector, onMatch, onUnmatch}) {
		const watchers = this.watchers.has(selector) ? this.watchers.get(selector) : [];
		
		watchers.push({
			selector,
			onMatch,
			onUnmatch,
			currentMatches: [],
		});
		
		this.watchers.set(selector, watchers);
	}
	
	static processWatchers = (selector, watchers) => {
		const $newMatches = Array.from(document.querySelectorAll(selector));
		const $oldMatches = this.matchedElements.has(selector) ? this.matchedElements.get(selector) : [];

		// Process unmatches
		for (const $oldMatch of $oldMatches) {
			if (!$newMatches.includes($oldMatch)) {
				for (const watcher of watchers) {
					watcher.onUnmatch($oldMatch);
				}
			}
		}

		// Process matches
		for (const $newMatch of $newMatches) {
			if (!$oldMatches.includes($newMatch)) {
				for (const watcher of watchers) {
					watcher.onMatch($newMatch);
				}
			}
		}

		this.matchedElements.set(selector, $newMatches);
	};
	
	static watch() {
		this.observer = new MutationObserver((mutationList, observer) => {
			for (const mutation of mutationList) {
				// console.log(mutation);
				for (const [selector, watchersForSelector] of this.watchers.entries()) {
					this.processWatchers(selector, watchersForSelector);
				}
			}
		});
		
		this.observer.observe(document.documentElement, { attributes: true, childList: true, subtree: true });
		
		// @TODO: Watch clicks, hovers, focus, etc.
	}
	
	static unwatch() {
		this.observer?.disconnect();
	}
};

class StyleSheetProcessor {
	static properties = [];
	static valueRewriter = null;

	static process = (styleSheets, properties, valueRewriter) => {
		this.properties = properties;
		this.valueRewriter = valueRewriter;
		for (const styleSheet of styleSheets) {
			this.processStyleSheet(styleSheet);
		}
	}
	
	static processStyleSheet = (styleSheet) => {
		this.processCSSRules(styleSheet.cssRules);
	};

	static processCSSRules = (cssRules) => {
		if (cssRules) {
			for (const cssRule of cssRules) {
				this.processCSSRule(cssRule);
			}
		}
	};

	static processCSSRule = (cssRule) => {
		// Process Style Decelaration
		this.processCSSStyle(cssRule.styleMap, cssRule.style);

		// Process Nested Rules
		this.processCSSRules(cssRule.cssRules);
	};
	
	static processCSSStyle = (stylePropertyMap, styleDeclaration) => {
		if (stylePropertyMap) {
			for (const [prop, val] of stylePropertyMap) {
				if (this.properties.includes(prop)) {
										
					// Extract (flattened) selector from rule
					const selector = this.resolveSelector(styleDeclaration.parentRule);
					
					const createMatcher = (property, value) => {
						return ($element) => {
							$element.style.setProperty(
								property,
								this.valueRewriter(
									value,
									$element
								)
							);
						}
					};
					
					const createUnmatcher = (property) => {
						return ($element) => {
							$element.style.setProperty(property, '');
						}
					};
					
					// Register a SelectorMatcher watcher
					SelectorMatcher.register({
						selector,
						onMatch: createMatcher(prop, styleDeclaration.getPropertyValue(prop)),
						onUnmatch: createUnmatcher(prop),
					});
										
					// Remove the original declaration from the stylePropertyMap
					stylePropertyMap.delete(prop);
				}
			}
		}
	};
	
	static resolveSelector = (cssRule) => {
		let selector = '';
		
		const selectorTexts = [];
		do {
			if (cssRule.selectorText) {
				selectorTexts.unshift(cssRule.selectorText);
			}
			cssRule = cssRule.parentRule;
		} while (cssRule);

		for (let selectorText of selectorTexts) {
			// This is not needed, as CSSOM already prepends the & for nested selectors
			// if (!selectorText.includes('&')) {
			// 	selectorText = `& ${selectorText}`;
			// }
			selector = selectorText.replaceAll('&', `:is(${selector})`);
		}
		
		return selector;
	};
}
console.clear();
const polyfill = () => {
	// Properties to check
	const properties = ['--id', 'view-transition-name'];
	
	// Core of the polyfill that can rewrite CSS property values
	// @TODO: This needs proper value parsing, but hey … it’s a POC
	const valueRewriter = (value, $element) => {
		
		// auto
		const isAuto = value.trim() === '_auto';
		if (isAuto) {
			const ident = `vt-${randomBetween(0, 32768).toFixed()}-${randomBetween(0, 32768).toFixed()}`;
			return ident;
		}

		// attr()
		const isAttr = /attr\((.*)\)/gm;
		if (value.match(isAttr)) {
			const attribute = isAttr.exec(value)[1];
			if (['nonce'].includes(attribute)) {
				throw new Error(`Reading the attribute “${attribute}” using attr() is not allowed`);
			}
			return $element.getAttribute(attribute);
		}
		
		// ident()
		const isIdent = /ident\((.*)\)/gm;
		if (value.match(isIdent)) {
			let ident = isIdent.exec(value)[1];
			
			// Replace all Custom Props first
			const customProps = Array.from(ident.matchAll(/var\((.*?)\)/g));
			for (const customProp of customProps) {			
				ident = ident.replaceAll(customProp[0], getComputedStyle($element).getPropertyValue(customProp[1]));
			}
			
			// TODO: One can use attr() here as well
			
			// Glue it all together by removing quotes and whitespace
			ident = ident.replaceAll(' ', '').replaceAll('"', '').replaceAll('\'', '');

			return ident;
		}
		
		// Any other value
		return value;
	};
	
	StyleSheetProcessor.process(document.styleSheets, properties, valueRewriter);
	SelectorMatcher.watch();
}

console.clear();
polyfill();