const style = window.getComputedStyle(document.body);

const props = Object.keys(style).filter((key) => Number.isNaN(Number(key)));

let values = props.reduce((result, prop) => {
    result[prop] = style[prop];
    return result;
}, {});

function inherits(prop, value) {
	const parent = window['test-parent'];
	const child = window['test-child'];
	let hasMatch = false;

	if (value === '') {
		// Empty
		// ¯\_(ツ)_/¯
	} else if (value.match(/^rgb\(.+\)$/)) {
		// Color: RGB
		hasMatch = true;
		parent.style[prop] = 'rgb(1, 2, 3)';
	} else if (value.match(/^rgba\(.+\)$/)) {
		// Color: RGBA
		hasMatch = true;
		parent.style[prop] = 'rgba(1, 2, 3, 4)';
	} else if (!Number.isNaN(Number(value))) {
		// Number: Unitless
		hasMatch = true;
		
		let possibleValues = new Set(['0', '0.5', '1', '2', '123']);
		possibleValues.delete(value);
		possibleValues = Array.from(possibleValues);
		
		for (let val of possibleValues) {
			parent.style[prop] = val;
			if (window.getComputedStyle(parent)[prop] === val) {
				break;
			}
		}
	} else if (value.match(/^([\d.]+px ?)+$/)) {
		// Number: Pixels
		hasMatch = true;
		parent.style[prop] = value.replace(/[\d.]+px/, '123px');
	} else if (value.match(/^([\d.]+% ?)+$/)) {
		// Number: Percentages
		hasMatch = true;
		parent.style[prop] = value.replace(/[\d.]+%/, '123%');
		// DEBUG
		// console.log(parent.style[prop]);
	}
	
	if (hasMatch) {
		const parentStyle = window.getComputedStyle(parent)[prop];
		const childStyle = window.getComputedStyle(child)[prop];
		const result = parentStyle === childStyle;

		// DEBUG:
		// console.log({
		// 	prop,
		// 	value,
		// 	parentStyle,
		// 	childStyle,
		// 	inherits: result,
		// });

		parent.style[prop] = '';

		return result ? 1 : 0;
	}
	
	return -1;
}

function inheritsText(inherits) {
	return inherits === -1 ? '❓ Unknown' : (inherits ? '✅ Yes' : '❌ No');
}

values = Object.entries(values).map(([prop, value]) => ({
	prop,
	value,
	inherits: inherits(prop, value),
}));

function updateTable() {
	// Values
	const filter = form.elements.filter.value;
	const sort = form.elements.sort.value;
	let [sortProp, sortDir] = sort.split('-');
	sortDir = sortDir === 'asc' ? 1 : -1;
	
	let result = values.filter(({ prop, value, inherits }) => (
		`${prop} ${value} ${inheritsText(inherits)}`.toLowerCase()
			.includes(filter.toLowerCase())
	));

	result = result.sort((a, b) => {
		let _a = a[sortProp];
		let _b = b[sortProp];

		if (_a < _b) { return -1 * sortDir; }
		if (_a > _b) { return 1 * sortDir; }

		return 0;
	});

	result = result.map(({ prop, value, inherits }) => `
		<tr>
			<td>${prop}</td>
			<td>${value}</td>
			<td>${inheritsText(inherits)}</td>
		</tr>
	`);

	window['table-body'].innerHTML = result.join('');
	total.innerHTML = result.length;

	// Save
	localStorage.setItem('form-filter', filter);
	localStorage.setItem('form-sort', sort);
}

const initialFormFilterValue = localStorage.getItem('form-filter');
const initialFormSortValue = localStorage.getItem('form-sort');

if (initialFormFilterValue) {
	window['form-filter'].value = initialFormFilterValue;
}
if (initialFormSortValue) {
	window['form-sort'].value = initialFormSortValue;
}

updateTable();

form.addEventListener('input', updateTable);
form.addEventListener('submit', (event) => {
	event.preventDefault();
	updateTable();
});