// 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 find_class_in_htmlcollection(elements) {
	let content_elements = [];
	for (element of elements) {
		if (element.nodeName === "STYLE")
			continue;
		if (element.nodeName === "SCRIPT")
			continue;
		let result = element.getElementsByClassName("content_html");
		if (result.length > 0) {
			// for the moment only deal with 1 :
			return result[0];
			content_elements = content_elements.concat(Array.from(result));
		}
	}
	//return content_elements;
	return "";
}

function replace_html(element, content) {
//	console.log("element: ", element);
//	console.log("element.childNodes: ", element.childNodes);
//	console.log("element.getElementsByClassName('content'): ", element.getElementsByClassName('content'));

	let old_content = element.innerHTML;
	let new_elements = deserialize_html(content);
	//console.log("new_elements: ", new_elements);
	let content_elements = find_class_in_htmlcollection(new_elements);
	if (content_elements) {
		console.log("new_elements1: ", new_elements[0].outerHTML);
		console.log("content_elements: ", content_elements);
		console.log("old_content: ", old_content);
		content_elements.outerHTML = old_content;
		console.log("new_elements2: ", new_elements[0].outerHTML);
	}

//	let previous_content = element.innerHTML;
//	console.log("previous_content: ", previous_content);
//	console.log("element: ", element);
//	element.outerHTML = content;
	element.replaceWith(...new_elements);

//	console.log("temp_element: ", temp_element);
//	tmp_element.insertAdjacentText('beforeend', previous_content);
//	console.log("temp_element: ", temp_element);

//	element.insertAdjacentHTML('beforebegin', data)
//	element.innerHTML = data
//	element.outerHTML = data
};

function insert_html() {
	let elements = document.getElementsByClassName("insert_html");
	for (let element of elements) {
		let path = (element.dataset.path);
		fetch(path)
			.then(response => response.text())
			.then(data => replace_html(element, data))
			.catch(error => console.log('Error:', error));
		//element.classList.replace("insert_html", "inserted_html");
	};
}

// create an observer on everytime some HTML is loaded on the whole page (heavy solution...)
const callback = (mutation_list, observer) => insert_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);