if (!localStorage.getItem("SessionID")) {
  window.location.href = "/login.html";
}

const Q = (selector) => document.querySelector(selector);

window.addEventListener("load", async () => {
  await refreshFolder();
});

function mapFolder(folder, element) {
  element.innerHTML = "";
  if (folder.Folder.Name != "root") {
    document.getElementById("title").textContent = folder.Folder.Name;
    const uplevel = {
      id: folder.Folder.ParentID,
      Name: "Go back",
      Persistent: true,
    };
    const clone = createFolderElement(uplevel);
    element.appendChild(clone);
  } else {
    document.getElementById("title").textContent = "Dashboard Prototype";
  }
  for (let f of folder.ChildFolders) {
    const clone = createFolderElement(f);
    element.appendChild(clone);
  }
  for (let b of folder.ChildBookmarks) {
    const clone = createBookmarkElement(b);
    element.appendChild(clone);
  }
  element.appendChild(newFolderItem(folder));
  element.appendChild(newBookmarkItem(folder));
  feather.replace();
}

function createFolderElement(folder) {
  const template = Q("#folder");
  const clone = template.content.firstElementChild.cloneNode(true);
  clone.querySelector("#folder_name").textContent = folder.Name;
  clone.addEventListener("click", async () => {
    console.log(folder);
    const newFolder = await getFolder(folder.id);
    mapFolder(newFolder.folder, document.getElementById("bookmarks"));
  });
  for (let el of clone.querySelectorAll("[data-feather-t]")) {
    el.setAttribute("data-feather", el.getAttribute("data-feather-t"));
  }
  if (folder.Persistent) {
    clone.querySelector(".xmark").remove();
  } else {
    clone.querySelector(".xmark").addEventListener("click", async (e) => {
      e.stopPropagation();
      await delFolder(folder);
    });
  }
  return clone;
}

function createBookmarkElement(bookmark) {
  const template = Q("#bookmark");
  const tagtempl = Q("#booktag");
  const clone = template.content.firstElementChild.cloneNode(true);
  clone.querySelector("#bookmark_name").textContent = bookmark.Name;
  const link = clone.querySelector("#bookmark_link");
  link.setAttribute("href", bookmark.Url);
  link.textContent = bookmark.Url;
  clone.addEventListener("click", async () => {
    window.location.href = bookmark.Url;
  });
  for (let tag of bookmark.Tags) {
    const t = tagtempl.content.cloneNode(true);
    const el = t.querySelector("span");
    el.addEventListener("onclick", () => alert(tag));
    el.textContent = "#" + tag;
    clone.querySelector("#bookmark_tags").appendChild(t);
  }
  for (let el of clone.querySelectorAll("[data-feather-t]")) {
    el.setAttribute("data-feather", el.getAttribute("data-feather-t"));
  }
  clone.querySelector(".xmark").addEventListener("click", async (e) => {
    e.stopPropagation();
    await delBookmark(bookmark);
  });
  return clone;
}

function newFolderItem(folder) {
  const template = document.getElementById("newFolder");
  const clone = template.content.firstElementChild.cloneNode(true);
  clone.addEventListener("click", () => {
    const folderForm = document.getElementById("folder_form");
    const el = folderForm.content.firstElementChild.cloneNode(true);
    el.querySelector("form").setAttribute("folderid", folder.Folder.id);
    const m = Q("#modal");
    m.appendChild(el);
    m.classList.add("show");

    // console.log("New folder called for " + folder.Folder.Name);
  });
  for (let el of clone.querySelectorAll("[data-feather-t]")) {
    el.setAttribute("data-feather", el.getAttribute("data-feather-t"));
  }
  return clone;
}

function newBookmarkItem(folder) {
  const template = document.getElementById("newBookmark");
  const clone = template.content.firstElementChild.cloneNode(true);
  clone.addEventListener("click", () => {
    const bookmarkForm = document.getElementById("bookmark_form");
    const el = bookmarkForm.content.firstElementChild.cloneNode(true);
    el.querySelector("form").setAttribute("folderid", folder.Folder.id);
    const m = Q("#modal");
    m.appendChild(el);
    m.classList.add("show");
  });
  for (let el of clone.querySelectorAll("[data-feather-t]")) {
    el.setAttribute("data-feather", el.getAttribute("data-feather-t"));
  }
  return clone;
}

function closeModal(event) {
  const m = Q("#modal");
  if (event) if (event.target != m) return;
  m.classList.remove("show");
  m.innerHTML = "";
}

async function newFolder(event) {
  event.preventDefault();
  const form = event.target;
  const parentID = form.getAttribute("folderid");
  const name = form.querySelector("#folder_name").value;
  console.log(name);
  const result = await createFolder(parentID, name);
  if (result.success) {
    await refreshFolder(parentID);
    closeModal();
  }
}

async function newBookmark(event) {
  event.preventDefault();
  const form = event.target;
  const parentID = form.getAttribute("folderid");
  const name = form.querySelector("#bookmark_name").value;
  const url = form.querySelector("#bookmark_url").value;
  const tags = form.querySelector("#bookmark_tags").value.split(",");
  console.log(name);
  const result = await createBookmark(parentID, {
    Name: name,
    Url: url,
    FolderID: parentID,
    Tags: tags,
  });
  if (result.success) {
    await refreshFolder(parentID);
    closeModal();
  }
}

async function refreshFolder(id) {
  const folder = await getFolder(id);
  const bm = document.getElementById("bookmarks");
  if (!folder.success) {
    bm.textContent = "Нет закладок";
    return;
  }
  mapFolder(folder.folder, bm);
}

async function delFolder(folder) {
  if (!confirm(`Delete folder "${folder.Name}"?`)) return;
  const result = await deleteFolder(folder.id);
  if (result.success) {
    await refreshFolder(folder.ParentID);
  }
}

async function delBookmark(bookmark) {
  if (!confirm(`Delete bookmark "${bookmark.Name}"?`)) return;
  const result = await deleteBookmark(bookmark.id);
  if (result.success) {
    await refreshFolder(bookmark.FolderID);
  }
}