const loadingDialog = {
  dialog: document.querySelector("dialog#loading-dialog"),
  init() {
    this.dialog.addEventListener("cancel", (ev) => {
      ev.preventDefault();
    });
  },
  show() {
    this.dialog.showModal();
  },
  close() {
    this.dialog.close();
  },
};

const errorDialog = {
  dialog: document.querySelector("dialog#error-dialog"),
  error: document.querySelector("textarea#error"),
  reload: document.querySelector("button#error-reload"),
  init() {
    this.dialog.addEventListener("close", (ev) => {
      window.location.reload();
    });

    this.reload.addEventListener("click", (ev) => {
      window.location.href = "/";
    });
  },
  show(err) {
    this.error.value = err;
    console.error(err);
    this.dialog.showModal();
  },
};

const urlDialog = {
  dialog: document.querySelector("dialog#url-dialog"),
  url: document.querySelector("input#url"),
  urlCopy: document.querySelector("button#url-copy"),
  close: document.querySelector("button#url-close"),
  init() {
    this.dialog.addEventListener("close", (ev) => {});

    this.urlCopy.addEventListener("click", (ev) => {
      this.url.select();
      this.url.setSelectionRange(0, 99999);
      navigator.clipboard.writeText(this.url.value);
    });

    this.close.addEventListener("click", (ev) => {
      this.dialog.close();
    });
  },
  show(url) {
    this.url.value = url;
    this.dialog.showModal();
  },
};

const notFoundDialog = {
  dialog: document.querySelector("dialog#not-found"),
  close: document.querySelector("button#not-found-close"),
  init() {
    this.dialog.addEventListener("close", (ev) => {
      window.location.search = "";
    });

    this.close.addEventListener("click", (ev) => {
      window.location.search = "";
    });
  },
  show() {
    this.dialog.showModal();
  },
};

const viewDialog = {
  dialog: document.querySelector("dialog#view-dialog"),
  password: document.querySelector("textarea#view-password"),
  close: document.querySelector("button#view-close"),
  init() {
    this.dialog.addEventListener("close", (ev) => {
      window.location.search = "";
    });

    this.close.addEventListener("click", (ev) => {
      this.dialog.close();
    });
  },
  show(password) {
    this.password.value = password;
    this.dialog.showModal();
  },
};

const confirmViewDialog = {
  dialog: document.querySelector("dialog#confirm-view-dialog"),
  cancel: document.querySelector("button#view-cancel"),
  confirm: document.querySelector("button#view-confirm"),
  resolve: null,
  reject: null,
  init() {
    this.dialog.addEventListener("cancel", (ev) => {
      this.dialog.close();
      this.resolve(false);
    });

    this.cancel.addEventListener("click", (ev) => {
      this.dialog.close();
      this.resolve(false);
    });

    this.confirm.addEventListener("click", (ev) => {
      this.dialog.close();
      this.resolve(true);
    });
  },
  show() {
    return new Promise((resolve, reject) => {
      this.resolve = resolve;
      this.reject = reject;
      this.dialog.showModal();
    });
  },
};

async function viewPassword() {
  try {
    loadingDialog.show();

    const params = new URLSearchParams(window.location.search);
    const id = params.get("id");
    const key = params.get("key");
    const iv = params.get("iv");

    const exists = await hasPassword(id);
    if (!exists) {
      notFoundDialog.show();
      return;
    }

    const shouldView = await confirmViewDialog.show();
    if (!shouldView) {
      // This is needed for the redirect, otherwise the user won't get redirected
      setTimeout(() => (window.location.search = ""), 0);
      return;
    }

    const encrypted = await getPassword(id);
    const password = await decryptPassword(encrypted, key, iv);

    viewDialog.show(password);
  } catch (error) {
    errorDialog.show(error);
  } finally {
    loadingDialog.close();
  }
}

const enterPassword = document.querySelector("form#enter-password");

enterPassword.addEventListener("submit", async (ev) => {
  try {
    loadingDialog.show();
    ev.preventDefault();
    const data = new FormData(ev.target);

    const password = await encryptPassword(data.get("password"));
    const id = await uploadPassword(
      password.password,
      parseInt(data.get("expires-in")),
    );

    const params = new URLSearchParams();
    params.set("id", id);
    params.set("key", password.key);
    params.set("iv", password.iv);

    const url = new URL(window.location);
    url.search = params.toString();
    urlDialog.show(url.toString());
  } catch (error) {
    errorDialog.show(error);
  } finally {
    loadingDialog.close();
  }
});

loadingDialog.init();
errorDialog.init();
urlDialog.init();
notFoundDialog.init();
viewDialog.init();
confirmViewDialog.init();

const query = window.location.search;
if (query.trim() != "") {
  viewPassword();
}