// https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro
function deserialize_html(html) {
	let template = document.createElement('template');
	template.innerHTML = html;
	return template.content.children;
	// use .children instead of childNodes to avoid #text elements :
	// https://stackoverflow.com/questions/35199729/javascript-meaning-of-text-in-htmlnode-childnodesi-nodename
	//return template.content.childNodes;
}

function fill_content(new_content, old_content, target_name) {
	if (!old_content)
		return;
	let elements_with_class = find_elements_by_class(new_content, "content_html");
	let elements_to_fill = find_elements_by_data(elements_with_class, target_name, "path_target");
	elements_to_fill.forEach(el => el.outerHTML = old_content);
}

function find_elements_by_class(html_collection, class_to_find) {
	for (element of html_collection) {
		if (element.nodeName === "STYLE")
			continue;
		if (element.nodeName === "SCRIPT")
			continue;
		return element.getElementsByClassName(class_to_find);
	}
	return null;
}

function find_elements_by_data(html_collection, data_to_compare, dataset_name) {
	let matching_elements = [];
	if (!data_to_compare)
		return matching_elements;
	for (element of html_collection) {

		let data = [...element.querySelectorAll(`[data-${dataset_name}='${data_to_compare}']`)];
		//let data = element.dataset[dataset_name];

		//if (data_to_compare === data)
		matching_elements.push(...data);
	}
//	if (data_to_compare === "banner")
	return matching_elements;
}

function transfert_class(element, new_content) {
	let class_target = element.dataset.class_target;
	let new_class = element.dataset.new_class;
	if (!class_target)
		return;
	if (!new_class)
		return;
	let elements_with_class = find_elements_by_data(new_content, class_target, "class_target");
	elements_with_class.forEach(el => el.classList.add(new_class));
}

function replace_html(element_to_replace, content_to_load) {
	let old_content = element_to_replace.innerHTML;
	let new_content = deserialize_html(content_to_load);
	let target_name = element_to_replace.dataset.path_target;
	transfert_class(element_to_replace, new_content);
//	console.log("new_content: ", new_content);
	fill_content(new_content, old_content, target_name);
	element_to_replace.replaceWith(...new_content);
};

function load_html() {
	let elements = document.getElementsByClassName("load_html");
	for (let element_to_replace of elements) {
		let path = (element_to_replace.dataset.path);
		if (!path)
			continue;
		fetch(path)
			.then(response => response.text())
			.then(content_to_load => replace_html(element_to_replace, content_to_load))
			.catch(error => console.log('Error:', error));
	};
}

// create an observer on everytime some HTML is loaded on the whole page (heavy solution...)
const callback = (mutation_list, observer) => load_html();
const observer = new MutationObserver(callback);
const targetNode = document.body;
const config = { attributes: true, childList: true, subtree: true };
// Start observing the target node for configured mutations
observer.observe(targetNode, config);