// 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) {
                                                            // new_content :
                                                            //     <div class="banner_container">
                                                            //       <div class="content_html" data-path_target="banner"></div>
                                                            //       </div>
                                                            //     </div>
                                                            // old_content :
                                                            //     <pre class="banner" data-class_target="banner">
                                                            //     </pre>
                                                            // target_name :
                                                            //     banner
	if (!old_content)
		return;
	let elements_with_class = find_elements_by_class(new_content, "content_html");
                                                            // elements_with_class :
                                                            //     <div class="content_html" data-path_target="banner"></div>
                                                            //     </div>
	let elements_to_fill = find_elements_by_data(elements_with_class, target_name, "path_target");
                                                            // elements_to_fill :
	elements_to_fill.forEach(el => el.outerHTML = old_content);
}

function find_elements_by_class(html_collection, class_to_find) {
                                                            // html_collection :
                                                            //     <div class="banner_container">
                                                            //       <div class="content_html" data-path_target="banner"></div>
                                                            //       </div>
                                                            //     </div>
                                                            // class_to_find :
                                                            //     content_html
	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) {
                                                            // html_collection :
                                                            //     <div class="content_html" data-path_target="banner"></div>
                                                            //     </div>
                                                            // data_to_compare :
                                                            //     banner
                                                            // dataset_name :
                                                            //     path_target
	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) {
                                                    // element     : 
																										//               <div class="load_html" data-path="ascii_elements/banner_container.html" data-path_target="banner">
																										//                 <pre class="banner" data-class_target="banner">
																										//                 </pre>
																										//               </div>
                                                    // new_content : 
                                                    //               <div class="banner_container">
                                                    //                 <div class="content_html" data-path_target="banner"></div>
                                                    //                 </div>
                                                    //               </div>
	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));
}

// element_to_replace : <div class="load_html" data-path="ascii_elements/banner_1.html" data-new_class="reverse" data-class_target="banner"></div>
// content_to_load    : <div class="load_html" data-path="ascii_elements/banner_container.html" data-path_target="banner">
//                        <pre class="banner" data-class_target="banner">
//                        </pre>
//                      </div>
//
//
// element_to_replace : <div class="load_html" data-path="ascii_elements/banner_container.html" data-path_target="banner">
//                        <pre class="banner" data-class_target="banner">
//                        </pre>
//                      </div>
// content_to_load    : <div class="banner_container">
//                        <div class="content_html" data-path_target="banner"></div>
//                        </div>
//                      </div>
//
//
function replace_html(element_to_replace, content_to_load) {
	let old_content = element_to_replace.innerHTML;
                                                            // old_content :
                                                            //     <pre class="banner" data-class_target="banner">
                                                            //     </pre>
	let new_content = deserialize_html(content_to_load);
                                                            // new_content :
                                                            //     <div class="banner_container">
                                                            //       <div class="content_html" data-path_target="banner"></div>
                                                            //       </div>
                                                            //     </div>
	let target_name = element_to_replace.dataset.path_target;
                                                            // target_name :
                                                            //     banner
	transfert_class(element_to_replace, new_content);
                                                            // element_to_replace : 
																									          //     <div class="load_html" data-path="ascii_elements/banner_container.html" data-path_target="banner">
																									          //       <pre class="banner" data-class_target="banner">
																									          //       </pre>
																									          //     </div>
                                                            // new_content : 
                                                            //     <div class="banner_container">
                                                            //       <div class="content_html" data-path_target="banner"></div>
                                                            //       </div>
                                                            //     </div>
//	console.log("new_content: ", new_content);
	fill_content(new_content, old_content, target_name);
                                                            // 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);