$(() => {
  document.getElementById("menu-login").addEventListener("click", (e) => {
    e.preventDefault();
    document.body.classList.add("login-visible");
    document.body.classList.add("overlay-visible");
    document.Title.pushTitle("Login");
  });

  function closeLoginPopin() {
    if (!document.body.classList.contains("login-visible")) return;
    document.Title.pop();
    document.body.classList.remove("login-visible");
    document.body.classList.remove("overlay-visible");
    let inputFields = document.querySelectorAll(".login-wrapper .input-group input");
    for (let i = 0; i < inputFields.length; ++i)
      if (inputFields[i].type !== "submit") inputFields[i].value = "";
    $(".login-wrapper .error").addClass("hidden");
    document.querySelector("#login-email input[name='code']").classList.add("hidden");
  }

  document.onClosePopinRequested(() => {
    closeLoginPopin();
  });

  document
    .querySelector(".login-wrapper .modal-footer button")
    .addEventListener("click", () => closeLoginPopin());

  (() => {
    let loginUserPass = document.getElementById("login-userpass");
    loginUserPass.parentElement.addEventListener("submit", (e) => {
      e.preventDefault();
      let user = loginUserPass.querySelector("input[type='text']").value;
      let pass = loginUserPass.querySelector("input[type='password']").value;
      LoadingTasks.push(async () => {
        try {
          await AccessManager.LoginUserPass(user, pass);
        } catch (err) {
          let errDiv = loginUserPass.parentElement.querySelector(".error");
          errDiv.textContent = err;
          errDiv.classList.remove("hidden");
          return;
        }
        await MediaStorage.Instance.rebuildMetaList();
        closeLoginPopin();
      });
    });
  })();

  (() => {
    let loginMailTotp = document.getElementById("login-email");
    loginMailTotp.parentElement.addEventListener("submit", (e) => {
      e.preventDefault();
      let email = loginMailTotp.querySelector("input[type='email']").value;
      let code = loginMailTotp.querySelector("input[type='text']");
      if (code.classList.contains("hidden")) {
        LoadingTasks.push(async () => {
          await AccessManager.SendTotpCodeToEmail(email);
          code.classList.remove("hidden");
        });
      } else {
        LoadingTasks.push(async () => {
          try {
            await AccessManager.LoginUserEmailAndTotp(email, code.value);
          } catch (err) {
            let errDiv = loginMailTotp.parentElement.parentElement.querySelector(".error");
            errDiv.textContent = err;
            errDiv.classList.remove("hidden");
            return;
          }
          await MediaStorage.Instance.rebuildMetaList();
          closeLoginPopin();
        });
      }
    });
  })();

  (() => {
    let loginCode = document.getElementById("login-code");
    loginCode.querySelector("button").addEventListener("click", () => {
      let code = loginCode.querySelector("input").value;
      if (!code) return;
      LoadingTasks.push(async () => {
        await AccessManager.LinkLogin(new Set([code]));
        await MediaStorage.Instance.rebuildMetaList();
        closeLoginPopin();
      });
    });
  })();

  async function logout(accessId) {
    await AccessManager.Logout(accessId);
    await MediaStorage.Instance.rebuildMetaList();
    closeLoginPopin();
  }

  window.ReloadAccessList = function (accessList) {
    if (accessList.isAdmin) {
      document
        .getElementById("menu-dbAdmin-container")
        .classList.remove("hidden");
      document.getElementById("pch-navbar-share").classList.remove("hidden");
      document.getElementById("pch-navbar-autotags").classList.remove("hidden");
    } else {
      document.getElementById("menu-dbAdmin-container").classList.add("hidden");
      document.getElementById("pch-navbar-share").classList.add("hidden");
      document.getElementById("pch-navbar-autotags").classList.add("hidden");
    }

    let getIconForType = (type) => {
      if (!!type.ldapDn) return "bi-database";
      if (!!type.linkId) return "bi-link-45deg";
      if (!!type.email) return "bi-envelope-at";
      if (!!type.userName) return "bi-person";
      return "bi-question-octagon";
    };

    let rootNode = document.getElementById("accessListMenu");
    let items = rootNode.querySelectorAll("li.accessItem");
    for (let i = 0; i < items.length; ++i) items[i].remove();
    delete accessList.isAdmin;
    delete accessList.isAdmin_;
    if (Object.keys(accessList || {}).length) {
      let li = document.createElement("li");
      li.classList.add("accessItem");
      li.classList.add("divider");
      let hr = document.createElement("hr");
      hr.classList.add("dropdown-divider");
      li.appendChild(hr);
      rootNode.appendChild(li);
    }
    for (let i in accessList) {
        const access = accessList[i];
      const accessTextValue = access.linkLabel || access.linkId || access.ldapDn || access.email;

      let li = document.createElement("li");
      li.classList.add("accessItem");
      li.classList.add("dropdown-item");
      let a = document.createElement("a");
      let typeIcon = document.createElement("span");
      typeIcon.innerHTML = "&nbsp;";
      typeIcon.classList = "type bi " + getIconForType(access);
      let accessText = document.createElement("span");
      accessText.innerText = accessTextValue;
      let logoutIcon = document.createElement("span");
      logoutIcon.innerHTML = "&nbsp;";
      logoutIcon.classList = "logout bi bi-box-arrow-right";
      a.appendChild(typeIcon);
      a.appendChild(accessText);
      a.appendChild(logoutIcon);
      li.appendChild(a);
      rootNode.appendChild(li);
      a.addEventListener("click", async (e) => {
        e.preventDefault();
        if (!(await window.confirm("Logout account " + accessTextValue + " ?")))
          return;
        logout(i);
      });
    }
  };
});