import { format } from "https://esm.sh/@projectwallace/format-css@1";
import Specificity from "https://esm.sh/@bramus/specificity@2";

// Show warning when there is no `CSSNestedDeclarations` support.
if (!("CSSNestedDeclarations" in self && "style" in CSSNestedDeclarations.prototype)) {
	document.querySelector('.warning').style.display = 'block';
}

const examples = [
	`
	.foo {
		width: fit-content;

		@media screen {
			background-color: red;
		}

		background-color: green;
	}
	`,
	`
	#foo,
	.foo,
	.foo::before {
		width: fit-content;
		background-color: red;

		@media screen {
			background-color: green;
		}
	}
	.foo::before {
	  content: '(before)';
		margin-right: 1ch;
	}
	`,
	`
	.foo {
  	width: fit-content;
		background-color: green;

		@starting-style {
			opacity: 0;
			scale: 0.5;
		}
			
		transition: all 0.5s ease;
		opacity: 1;
		scale: 1;
	}
	`
];

const go = (exampleIndex = 0) => {
	console.clear();
	
	// Use the CSS in the document.
	// Use @projectwallace/format-css for the formatting.
	const $input = document.querySelector('style[block]');
	$input.innerText = format(examples[exampleIndex]);
		
	process();
};

const process = () => {
	// The CSSRule to process
	const cssRule = document.styleSheets[1].cssRules[0];
	console.log(cssRule);
	
	// Re-insert .foo to make sure things like starting-style are visible
	const $newFoo = document.createElement('div');
	$newFoo.classList.add('foo');
	$newFoo.innerText = 'I am foo';
	document.querySelector('.foo').replaceWith($newFoo);

	// Get the parsed CSS from the cssRule’s cssText.
	// Use @projectwallace/format-css for the formatting.
	const $parsed = document.querySelector('pre#parsed');
	$parsed.innerText = format(cssRule?.cssText ?? '');

	// Manually build the structure of the cssRule
	const $serialized = document.querySelector('pre#serialized');
	$serialized.innerText = serialize(cssRule);
}

const ruleTypes = {
	1: 'STYLE_RULE',
  2: 'CHARSET_RULE',
  3: 'IMPORT_RULE',
  4: 'MEDIA_RULE',
  5: 'FONT_FACE_RULE',
  6: 'PAGE_RULE',
  9: 'MARGIN_RULE',
  10: 'NAMESPACE_RULE',
};

const extractDeclarationsFromStyle = (style) => {
	return Array.from(style)
		.map(p => `${p}: ${style[p]}`)
};

// Polyfill for https://github.com/w3c/csswg-drafts/issues/10246
const resolveSelector = (cssRule) => {
	let selector = '';

	const selectorTexts = [];
	do {
		if (cssRule.selectorText) {
			selectorTexts.unshift(cssRule.selectorText);
		}
		cssRule = cssRule.parentRule;
	} while (cssRule);

	for (let selectorText of selectorTexts) {
		selector = selectorText.replaceAll('&', `:is(${selector})`);
	}

	return selector;
};

const padLines = (text, level = 0) => {
	if (level == 0) return text;
	return text.split('\n').map(l => ' '.repeat((level) * 2) + l).join('\n');
};

const serialize = (cssRule, level = 0) => {
	if (!cssRule) return null;
	
	const { type, selectorText, style, cssRules } = cssRule;

  let toReturn = `↳ ${cssRule.constructor.name}\n`;
	
	if (type) {
		toReturn += `  .type = ${ruleTypes[type]}\n`;
	}

	if (selectorText) {
		const resolvedSelectorText = resolveSelector(cssRule);
		const specificity = Specificity.calculate(resolvedSelectorText);
  	toReturn += `  .selectorText = "${selectorText}"\n`;
  	toReturn += `  .resolvedSelectorText = "${resolvedSelectorText}"\n`;
		toReturn += `  .specificity = ${specificity}\n`;
  }
	
	if (style && style.length) {
		toReturn += `  .style (CSSStyleDeclaration, ${style.length}) =\n`;
		const declarations = extractDeclarationsFromStyle(style);
		for (let declaration of declarations) {
			toReturn += `    - ${declaration}\n`;
		}
		// toReturn += `  \n`;
	}
	
	if (cssRules && cssRules.length) {
		toReturn += `  .cssRules (CSSRuleList, ${cssRules.length}) =\n`;
		for (let childCssRule of cssRules) {
			toReturn += `    ${serialize(childCssRule, level + 1)}\n`;
		}
		toReturn += `  \n`;
	}
	
	return padLines(toReturn, level).trim('\n');
}

const $buttons = document.querySelectorAll('button');
$buttons.forEach($button => {
	$button.addEventListener('click', (e) => {
		e.preventDefault();
		go(parseInt($button.dataset.id, 10));
	});
});

go(new URL(window.location).searchParams.get('demo') ?? 0);

// Allow live editing of the CSS
// The logic is explained in https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting/
const codeBlock = document.querySelector('style[block]');

// Allow only plaintext editing
// Firefox doesn’t do 'plaintext-only', but does do 'true'
codeBlock.setAttribute('contenteditable', 'plaintext-only');
if (codeBlock.contentEditable != 'plaintext-only') {
	codeBlock.setAttribute('contenteditable', 'true');
}

codeBlock.addEventListener('keyup', () => {
	process();
});

codeBlock.addEventListener('keydown', e => {
	// The tab key should insert a tab character
	if (e.keyCode == 9) {
		document.execCommand('insertHTML', false, '	');
		e.preventDefault();
	}
});