<html>
    <head>
      <title>{{ title }} - Archivy</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
	  <link rel="stylesheet" href="{{ url_for('static', filename='mvp.css') }}">
	  <style>

	  </style>
    </head>
    <body>
		<span class="toggle" style="font-size: 40px;
		position: absolute;
		right: 25px;
		top: 10px;">
		🌓</span>

		{% set path = [] %}
		{% set i = namespace(value=0) %}
		{% macro draw_dir(dir, depth, extra) -%}
			{% 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">
				<h3>
					{{ dir.name }} 
				</h3>
				<button class="expand-btn" onclick="createInteractive(this, {{i.value}}, '{{SEP.join(path)}}', {{ extra }});">Expand</button>

				<ul class="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, extra) }}
				{% endfor %}
			</div>
			{% if depth %}
				{% do path.pop() %}
			{% endif %}
		{%- endmacro %}

		<div class="sidebar">
			{% if current_user.is_authenticated %}
				<a href="/user/edit">
					<img src="{{ url_for('static', filename='profile.svg') }}" alt="edit profile" id="pfp">
				</a>
				{{ draw_dir(dataobjs, 0, 0) }}
			{% endif %}
		</div>
        <main class="content">
            <div><a href="/index">Home</a></div>
            <h1>Archivy</h1>
            {% with messages = get_flashed_messages() %}
                {% if messages %}
                    <ul>
                        {% for message in messages %}
                            <li>{{ message }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}
            {% endwith %}
            {% block content %}{% endblock %}
        </main>
		

		<script>
		  /*-----------------------------------------------------*/
		  /* Different color themes toggle
		  ------------------------------------------------------ */
		  const currentTheme = localStorage.getItem("theme");
		  if (currentTheme == "dark")
		  {
			document.body.classList.toggle("dark-theme");
		  }

		  const tog = document.querySelector(".toggle");
		  tog.addEventListener("click", function () {
			let theme = "dark";
			if (document.body.classList.contains("dark-theme"))
			{
			  theme = "light";
			}
			localStorage.setItem("theme", theme);
			document.body.classList.toggle("dark-theme");
		  });
			
		</script>

		<script>
		  const SCRIPT_ROOT = {{ request.script_root|tojson|safe }} + "/api";
		  let max_folder_id = document.querySelectorAll(".folder-cont").length;
		  function createInteractive(prevElem, id, path, extra_funct) 
		  {
			// expand
			let parentDiv = prevElem.parentNode;
			let childNotes = document.querySelector(".items-" + id);
			// check if expanded
			let expanded = window.getComputedStyle(childNotes).getPropertyValue("display") === "block";
			if (!expanded) {
			  // insert delete btn
			  // make sure root dir is not deleted in ui
			  if (extra_funct && 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>
				  `
				)
			  }
			  // add form for new dir
			  if (extra_funct)
			  {
				prevElem.insertAdjacentHTML("afterend",
				  `
					<p id="p-${id}">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">
					  <div>
						<input type="submit">
					  </div>
					</form>
				  `
				)
				document.getElementById("form-" + id).addEventListener("submit", function (e) {
				  e.preventDefault();
				  createFolder(id);
				})
			  }
			  childNotes.style.display = "block";
			  prevElem.innerHTML = 'Collapse'
			}
			// collapse
			else {
			  prevElem.innerHTML = 'Expand'
			  let p = parentDiv.querySelector(`#p-${id}`);
			  // differentiate with full view with extra functionality where we remove everything and simple view with only items
			  if (p)
			  {
				p.remove();
				document.querySelector("#form-" + id).remove()
				document.querySelector(`#delete-btn-${id}`).remove()
			  }
			  childNotes.style.display = "none";
			}

		  }
		  async function createFolder(id)
		  {
			max_folder_id++;
			let input = document.getElementById(`form-input-${id}`);
			let basePath = document.getElementById(`form-path-${id}`).textContent; 
			let totalPath = basePath;
			totalPath += (totalPath === "") ? "" : "{{SEP}}";
			totalPath += input.value;
			let result = await fetch(`${SCRIPT_ROOT}/folders/new`, {
			  method: "POST",
			  body: JSON.stringify({
				"path": totalPath
			  }),
			  headers: {"content-type": "application/json"}
			})
			input.value = "";
			if (result.status === 401)
			{
			  input.placeholder = "Directory already exists";
			}
			else {
			  totalPath = await result.text();
			  // get last element of totalPath
			  let sanitizedDirname = totalPath.split("{{SEP}}").slice(-1).pop();
			  let currentFolderDiv = document.getElementById("cont-" + id);
			  currentFolderDiv.insertAdjacentHTML("beforeend", 
				`
				  <div style="margin-left: 15px" id="cont-${max_folder_id}" class="folder-cont">
					<h2>
					  ${sanitizedDirname}    
					</h2>
					<button class="expand-btn" onclick="createInteractive(this, ${max_folder_id}, '${totalPath}', 1);">Expand</button>
					<ul class="items-${max_folder_id}">
					</ul>
				  </div>
				`
			  )
			  document.getElementById("cont-" + max_folder_id).scrollIntoView();
			}
		  }

		  function deleteFolder(path, id)
		  {  
			fetch(`${SCRIPT_ROOT}/folders/delete`, {
			  method: "DELETE",
			  body: JSON.stringify({
				"path": 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>
    </body>
</html>
