import { setIcon } from "./util.js";

let pageSaveState;
let pageMetadata;

function updatePageDescription() {
  const pageTitle = document.getElementById("pageTitle");
  const pageUrl = document.getElementById("pageUrl");
  const pageDescription = document.getElementById("pageDescription");

  const { title, url, description } = pageMetadata;

  pageTitle.textContent = title;
  pageUrl.textContent = url;
  pageDescription.textContent = description;
}

function enablePageButtons(kind) {
  Array.from(document.getElementsByTagName("button"))
    .filter((element) => element.dataset.kind !== kind)
    .forEach((element) => element.removeAttribute("disabled"));
}

function disablePageButtons() {
  Array.from(document.getElementsByTagName("button"))
    .filter((element) => element.classList.contains("control"))
    .forEach((element) => element.setAttribute("disabled", "disabled"));
}

function loadSaveState(tabId) {
  setIcon(tabId, "wait");

  return browser.storage.local
    .get(["apiUrl", "authToken"])
    .then(({ apiUrl, authToken }) => {
      if (!apiUrl) {
        document.getElementById("status").textContent =
          "API URL not configured";
        return;
      }

      fetch(`${apiUrl}/entry`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: authToken ? `Bearer ${authToken}` : undefined,
        },
        body: JSON.stringify({ url: pageMetadata.url }),
      })
        .then((response) => response.json())
        .then((data) => {
          document.getElementById("status").textContent = "";
          if (data.code === 200) {
            pageSaveState = data.data;
            enablePageButtons(data.data["kind_name"]);
            setIcon(tabId, "saved");
          } else {
            enablePageButtons();
            setIcon(tabId, "ready");
          }
        })
        .catch((error) => {
          console.log(error);
          document.getElementById("status").textContent =
            error.status === 404 ? "" : "Request failed";
        });
    });
}

function savePage(kind) {
  disablePageButtons()

  browser.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    const tab = tabs[0];
    
    setIcon(tab.id, "wait");

    return browser.storage.local
      .get(["apiUrl", "authToken"])
      .then(({ apiUrl, authToken }) => {
        if (!apiUrl) {
          document.getElementById("status").textContent =
            "API URL not configured";
          return;
        }

        let request = pageSaveState === undefined ? {
          method: "POST",
          body: JSON.stringify({ kind, ...pageMetadata })
        } : {
          method: "PUT",
          body: JSON.stringify({ id: pageSaveState.id, kind })
        }
        request.headers = {
            "Content-Type": "application/json",
            Authorization: authToken ? `Bearer ${authToken}` : undefined,
        };

        fetch(`${apiUrl}/record`, request)
          .then((response) => response.json())
          .then((data) => {
            document.getElementById("status").textContent = "";
            if (data.code === 200 || data.code === 201) {
              pageSaveState = data.data;
              enablePageButtons(kind);
              setIcon(tab.id, "saved");
            } else {
              enablePageButtons();
              setIcon(tab.id, "ready");
            }
            browser.runtime.sendMessage({ action: "addSavedUrl", data: { url: pageMetadata.url } });
          })
          .catch((error) => {
            console.log(error);
            document.getElementById("status").textContent =
              error.status === 404 ? "" : "Request failed";
          });
    });
  });
}

function clearPage() {
  disablePageButtons()

  browser.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    const tab = tabs[0];
    
    setIcon(tab.id, "wait");

    return browser.storage.local
      .get(["apiUrl", "authToken"])
      .then(({ apiUrl, authToken }) => {
        if (!apiUrl) {
          document.getElementById("status").textContent =
            "API URL not configured";
          return;
        }

        fetch(`${apiUrl}/record`, {
          method: "DELETE",
          headers: {
            "Content-Type": "application/json",
            Authorization: authToken ? `Bearer ${authToken}` : undefined,
          },
          body: JSON.stringify({ id: pageSaveState.id })
        })
          .then((response) => response.json())
          .then(() => {
            pageSaveState = undefined;
            enablePageButtons();
            setIcon(tab.id, "ready");
            browser.runtime.sendMessage({ action: "removeSavedUrl", data: { url: pageMetadata.url } });
          })
          .catch((error) => {
            console.log(error);
            document.getElementById("status").textContent = "Request failed";
          });
    });
  });
}

document.addEventListener("DOMContentLoaded", () => {
  Array.from(document.getElementsByTagName("button"))
    .filter((element) => element.dataset.kind !== undefined)
    .forEach((element) => element.addEventListener('click', () => savePage(element.dataset.kind)));
  document.getElementById("clear").addEventListener('click', () => clearPage());
  document.getElementById("saved").addEventListener('click', () => {
    browser.storage.local
      .get(["apiUrl"])
      .then(({ apiUrl }) => {
        if (!apiUrl) {
          document.getElementById("status").textContent =
            "API URL not configured";
          return;
        }

        window.open(apiUrl + "/html", "_blank").focus();
        window.close();
      });
  });

  browser.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    const tab = tabs[0];

    browser.tabs.sendMessage(
      tab.id,
      { action: "getMetadata" },
      function (metadata) {
        if (!metadata) {
          document.getElementById("status").textContent =
            "Error extracting metadata";
          return;
        }

        pageMetadata = metadata;

        updatePageDescription();
        loadSaveState(tab.id);
      }
    );
  });
});