import { passwordHash } from "./scripts.js";
import { clearData, createBookShelf, importBookShelf } from "./storage.js";
import {
  loadTemplate,
  storeFilesToServer,
  checkForStoredDataOnServer,
  delStoredDataOnServer,
} from "./web.js";

function showMenu() {
  var x = document.getElementById("navMob");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else {
    x.className = x.className.replace(" w3-show", "");
  }

  if (screen.width < 993) {
    let sidebar = document.getElementById("sidebar");
    sidebar.style.display = "none";
  }
}
function showSidebar() {
  let sidebar = document.getElementById("sidebar");
  if (getComputedStyle(sidebar).display === "none") {
    sidebar.style.display = "block";
    sidebar.style.marginTop = "35px";
  } else {
    sidebar.style.display = "none";
  }

  if (screen.width < 993) {
    let navBar = document.getElementById("navMob");
    navBar.className = navBar.className.replace(" w3-show", "");
  }
}

function showTextBlocks() {
  var x = document.getElementById("navTb");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else {
    x.className = x.className.replace(" w3-show", "");
  }

  if (screen.width < 993) {
    let sidebar = document.getElementById("sidebar");
    sidebar.style.display = "none";
  }
}

function insertTextBlocks(t) {
  let insert = "!" + t.innerText.split(":")[0] + " ";
  let id = activeState.lastElement;
  let element = document.getElementById(id);
  if (element === null) {
    return;
  }
  element.value += " " + insert;
  let tB = document.getElementById("navTb");
  tB.className.replace(" w3-show", "");

  if (element.parentElement != undefined) {
    if (
      element.parentElement.getElementsByClassName("pell-content")[0] !=
      undefined
    ) {
      element.parentElement.getElementsByClassName(
        "pell-content"
      )[0].innerHTML = element.value;
      element = element.parentElement.getElementsByClassName("pell-content")[0];
    }
  }

  element.focus();
}

function handleOnBlur(t) {
  activeState.lastElement = t.id;
  //createStorageObj();
}

function clickClearForm() {
  //document.activeElement.blur();
  //document.getElementById("sidebar").focus();
  clearData("userInput");
  let lT = activeState.loadedTemplate;
  loadTemplate(lT);
}

function hideMenus(evt) {
  if (evt === undefined) return;
  if (evt != "force" && evt.target.parentElement != null) {
    if (evt.target.parentElement.id == "navMob") return;
    if (evt.target.parentElement.id == "navReg") return;
    if (evt.target.parentElement.parentElement != null) {
      if (evt.target.parentElement.parentElement.id == "navMob") return;
      if (evt.target.parentElement.parentElement.id == "navReg") return;
    }
  }
  let sidebar = document.getElementById("sidebar");
  sidebar.style.display = "none";
  let navBar = document.getElementById("navMob");
  navBar.className = navBar.className.replace(" w3-show", "");
  let tbBar = document.getElementById("navTb");
  tbBar.className = tbBar.className.replace(" w3-show", "");
}

function modalNotifier(msg, timeout = 3, closeable = true) {
  let modalElement = document.getElementById("modalNotifier");
  let modalElementCloseBtn = document.getElementById("modalNotifierClose");
  let msgElement = document.getElementById("modalMsg");

  modalElement.style.display = "block";

  if (!closeable) modalElementCloseBtn.style.display = "none";

  msgElement.innerHTML = msg;
  if (timeout >= 1) {
    const run = setTimeout(
      () => (modalElement.style.display = "none"),
      timeout * 1000
    );
  }
}

function printVersion(msg = "") {
  const scripts = document.getElementsByTagName("script");
  const versionSpan = document.getElementById("currentVersion").lastChild;

  for (var i = 0; i < scripts.length; i++) {
    if (scripts[i].src) {
      let source = scripts[i].src;
      // js/version/main.js
      let pathVersion = source.split("/");
      pathVersion = pathVersion[pathVersion.length - 2];
      //add it to document footer currentVersion
      versionSpan.textContent = msg + " version: " + pathVersion;
    }
  }
}

function clickImportFiles() {
  if (activeState.settings.localOnly == "true") {
    createBookShelfDownload();
    return;
  }
  checkForStoredDataOnServer();
  document.getElementById("modalMsg").addEventListener("click", (e) => {
    if (e.target && e.target.tagName === "BUTTON") {
      let modal = document.getElementById("modalNotifier");
      switch (e.target.innerHTML) {
        case "Import":
          modal.replaceWith(modal.cloneNode(true));
          document.getElementById("modalMsg").addEventListener("click", (e) => {
            if (e.target && e.target.tagName === "BUTTON") {
              let modal = document.getElementById("modalNotifier");

              switch (e.target.innerHTML) {
                case "Yes":
                  importBookShelf();
                  modal.replaceWith(modal.cloneNode(true));
                  modalNotifier(
                    "Imported!",
                    activeState.settings.notifierPause
                  );
                  break;
                case "Cancel":
                  modal.replaceWith(modal.cloneNode(true));
                  document.getElementById("modalNotifier").style.display =
                    "none";
                  break;
                default:
                  e.preventDefault;
              }
            }
          });
          modalNotifier(
            "<div class='w3-container'> \
            Would you like to import the backup created on: " +
              activeState.serverFilesTs.replace("_", " - ") +
              "<br><br> \
            <button class='w3-button w3-border w3-flat-wet-asphalt' >Yes</button> \
            <button class='w3-button w3-border w3-flat-wet-asphalt' >Cancel</button></div>",
            0
          );
          break;
        case "Save":
          storeFilesToServer(createBookShelf());
          modal.replaceWith(modal.cloneNode(true));
          modalNotifier(
            "Files saved to server <br><br> would you like to <a href='/storage/" +
              activeState.userId +
              ".txt' style='text-decoration: underline;' download>download</a> them?",
            0
          );
          break;
        case "Delete":
          delStoredDataOnServer();
          break;

        default:
          e.preventDefault;
      }
    }
  });
  modalNotifier(
    "Here you can manage if your files should be saved on the server \
    <br> If there are stored files already on the server you can inport them \
    It will overwrite any saved documents <br><br> \
    <div class='w3-container'> \
    <button style='display: none;' id='importModalBtn' class='w3-button w3-border w3-flat-wet-asphalt' >Import</button> \
    <button class='w3-button w3-border w3-flat-wet-asphalt' >Save</button> \
    <button class='w3-button w3-border w3-flat-pomegranate' >Delete</button></div>",
    0
  );
}

function createBookShelfDownload() {
  let data = createBookShelf();
  let filename = data[0]["data"] + ".txt";
  document.getElementById("modalMsg").addEventListener("click", (e) => {
    if (e.target && e.target.tagName === "BUTTON") {
      var element = document.createElement("a");
      element.setAttribute(
        "href",
        "data:text/plain;charset=utf-8," +
          encodeURIComponent(JSON.stringify(data))
      );
      element.setAttribute("download", filename);
      element.style.display = "none";
      document.body.appendChild(element);
      element.click();
      document.body.removeChild(element);
    }
  });
  modalNotifier(
    "Since you are in local only mode you can only export a backup of your files \
    <br><br> \
    <div class='w3-container'> \
    <button class='w3-button w3-border w3-flat-wet-asphalt' >Export</button></div>",
    0
  );
}

function resetNavBar() {
  //enable toggleFiles Button
  let target = document.getElementById("toggleFilesMenu");
  target.innerHTML = "";
  let i = document.createElement("i");
  i.classList.add("fa", "fa-file");
  //target.classList.add("w3-disabled");
  target.appendChild(i);
  target.style.cssText = "";

  //enable toggleTestBlocksMenu
  document.getElementById("toggleTestBlocksMenu").style.display = "block";
}

function resetPage() {
  return;
  //set current page value in activeState object
  activeState.activePage = "landing";

  if (screen.width > 992) {
    document.getElementById("siteTitle").innerHTML = "Template Gen";
  } else {
    document.getElementById("siteTitle").innerHTML = "TG";
  }

  //sessionVerfication check
  if (!passwordHash.verify()) {
    modalNotifier("Error: Session is not authenticated...", 0, false);
  }

  //reset navbar if files was used
  resetNavBar();

  //disable toggleTestBlocksMenu
  document.getElementById("toggleTestBlocksMenu").style.display = "none";

  //reset page and event listeners

  hideMenus("force");

  let mainFormDiv = document.getElementById("mainForm");
  let outputDiv = document.getElementById("output");
  let submitContainerDiv = document.getElementById("submitContainer");
  let sidebarDiv = document.getElementById("sidebar");

  mainFormDiv.innerHTML = "";
  mainFormDiv.replaceWith(activeState.orgPage.main);
  outputDiv.innerHTML = "";
  outputDiv.replaceWith(outputDiv.cloneNode(true));
  submitContainerDiv.innerHTML = "";
  submitContainerDiv.replaceWith(submitContainerDiv.cloneNode(true));
  sidebarDiv.innerHTML = "";
  sidebarDiv.replaceWith(activeState.orgPage.sidebar);
}

export {
  hideMenus,
  showMenu,
  showSidebar,
  showTextBlocks,
  insertTextBlocks,
  handleOnBlur,
  clickClearForm,
  modalNotifier,
  clickImportFiles,
  resetNavBar,
  printVersion,
  resetPage,
};