{% extends "base.html" %}
{% block content %}
<input type="text" id="searchBar">
<ul id="searchHits">
</ul>

<a href="/bookmarks/new">New Bookmark</a>
<a href="/notes/new">New Note</a>

<p>
    Sync with <a href="/pocket">Pocket</a>
</p>
{% set path = [] %}
{% set i = namespace(value=0) %}
{% macro draw_dir(dir, depth) -%}
	{% set i.value = i.value + 1 %}
	{% if depth %}
		{% do path.append(dir.name) %}
	{% endif %}
	<div style="margin-left: 15px" id="cont-{{i.value}}" class="folder-cont">
		<h2>
			{{ dir.name }} 
		</h2>
		<button class="expand-btn" onclick="createInteractive(this, {{i.value}}, '{{"/".join(path)}}'); this.classList.add('hidden')">Expand</button>

		<ul id="items-{{i.value}}">
			{% for dataobj in dir.child_files %}
				<li>
					<a href="/dataobj/{{ dataobj["id"] }}">
						{{ dataobj["title"] }}
					</a>
				</li>
			{% endfor %}
		</ul>
		{% for child_dir in dir.child_dirs.values() %}
			{{ draw_dir(child_dir, depth + 1) }}
		{% endfor %}
	</div>
	{% if depth %}
		{% do path.pop() %}
	{% endif %}
{%- endmacro %}

{{ draw_dir(dataobjs, 0) }}

<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/11.0.0/markdown-it.min.js">
</script>
<script>
	const SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
	// search functionality
	var md = window.markdownit();
	function appendHit(hit, hidden, query) {
		let hitsDiv = document.getElementById("searchHits");
		let hitLi = document.createElement("li");
		let p = document.createElement("p"), a = document.createElement("a"), hitText = '';
		// match certain semantic elements
		// refactor to instead ignore <img>
		let paragraphs = md.render(hit['_source']['content']).replace(/(\r\n\t|\n|\r\t)/gm,"").match(/(<(p|li|blockquote|strong|b).*>.*<\/(p|li|blockquote|strong|b)>)/mg);
		for(let i = 0; paragraphs && i < paragraphs.length; i++)
		{
			if (paragraphs[i].toUpperCase().includes(query.toUpperCase())) {
				hitText += `${paragraphs[i]}`;
			}
		}
		hitText = hitText.replace(query, "<span style='background-color: #f6efa6'>" + query + "</span>");
		p.innerHTML = hitText, a.textContent = hit['_source']['title'], a.href = `/dataobj/${hit['_id']}`;
		hitLi.append(a);
		hitLi.append(p);
		if (hidden)
		{
			hitLi.classList = "hidden";
		}
		hitsDiv.appendChild(hitLi);
	}
	let input = document.getElementById("searchBar");
	input.addEventListener('input', async function(e) {
		if (input.value !== "")
		{
			let searchQuery = await fetch(`${SCRIPT_ROOT}/search?query=${input.value}`, {
				"method": "GET"
			});
			if (searchQuery.ok) {	
				let data = await searchQuery.json(), i = 0;
				console.log(data);
				document.getElementById("searchHits").innerHTML = "";
				data.forEach(function(hit)
				{
					let hidden = i > 4;
					appendHit(hit, hidden, input.value);
					i++;
				})
			}
		}
	});
	function createInteractive(prevElem, id, path) 
	{
		// insert delete
		// make sure root dir is not deleted in ui
		if (id != 1) {
			prevElem.insertAdjacentHTML("afterend",
				`
					<button id="delete-btn-${id}" class="delete-btn" onclick="deleteFolder('${path}', ${id})">
						<img src="/static/delete.png" alt="delete icon">
					</button>
				`
			)
		}
		// insert new folder section
		prevElem.insertAdjacentHTML("afterend",
			`
				<p>Create a new folder</p>
				<form id="form-${id}" class="new-folder fadein">
					<span id="form-path-${id}">${path}</span>
					<input type="text" id="form-input-${id}" class="folder-inputs">
					<input type="submit">
				</form>
			`
		)
		document.getElementById("form-" + id).addEventListener("submit", function(e) {
			e.preventDefault();
			createFolder(id);
		})
		document.getElementById("items-" + id).style.display = "block";
	}
	function createFolder(id)
	{
		let input = document.getElementById(`form-input-${id}`);
		let totalPath = document.getElementById(`form-path-${id}`).textContent + "/" + input.value;
		fetch(`${SCRIPT_ROOT}/folders/new`, {
			method: "POST",
			body: JSON.stringify({
				"name": totalPath
			}),
			headers: {"content-type": "application/json"}
		})
		let currentFolderDiv = document.getElementById("cont-" + id);
		currentFolderDiv.insertAdjacentHTML("beforeend", 
			`
				<div style="margin-left: 30px" id="cont-${id + 1}" class="folder-cont">
					<h2>
						${input.value}		
					</h2>
					<button class="expand-btn" onclick="createInteractive(this, ${id + 1}, '${totalPath}'); this.classList.add('hidden')">Expand</button>
			`
		)
		input.value = "";
		document.getElementById("cont-" + (id + 1)).scrollIntoView();
	}

	function deleteFolder(path, id)
	{	
		fetch(`${SCRIPT_ROOT}/folders/delete`, {
			method: "DELETE",
			body: JSON.stringify({
				"name": path
			}),
			headers: {"content-type": "application/json"}
		})
		document.getElementById(`cont-${id}`).classList.add("hidden");
	}
	// new folders with ajax
	window.onload = function() {
		let newFolderBtns = document.querySelectorAll(".folder-btns")
		newFolderBtns.forEach(function(btn) {
			btn.addEventListener("click", function(e) {
				let btnId = btn.id.split("-")[2];
				createFolder(btnId);
			})
		})
		let deleteBtns = document.querySelectorAll(".delete-btn");
		deleteBtns.forEach(function(btn) {
			btn.addEventListener("click", function(e) {
				let id = btn.id.split("-")[2];
				deleteFolder(id);
			})
		})
	}
</script>
{% endblock %}
