import config from "@/utils/config.json";
import { cache, preferences } from "@/utils/storage";
browser.devtools.panels.create("Poly+", "icon/128.png", "devtools.html");

for (
  const src of [
    "/css/polytoria.css",
    "/css/preferences.css",
  ]
) {
  const css = browser.runtime.getURL(src as any);
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = css;
  document.head.appendChild(link);
}

const modal: HTMLDialogElement = document.getElementsByTagName("dialog")[0]!;
const openModal = (
  title: string,
  description: string,
  body: any,
  json: boolean,
) => {
  if (json) {
    body = `
    <div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;">
      ${
      JSON.stringify(body || [], null, 2)
        .replaceAll("\n", "<br>")
        .replaceAll(" ", "&nbsp;")
        .replaceAll("\t", "&nbsp;&nbsp;&nbsp;&nbsp;")
    }
    </div>
    `;
  }

  modal.getElementsByTagName("h5")[0]!.textContent = title;
  modal.getElementsByTagName("span")[0]!.textContent = description;
  modal.getElementsByClassName("modal-body")[0]!.innerHTML = body;

  modal.showModal();
};

document.getElementById("view-preferences")!.addEventListener(
  "click",
  async () => {
    openModal(
      "Preferences",
      "The following values are the user's preferences.",
      await preferences.getPreferences(),
      true,
    );
  },
);

document.getElementById("view-cache")!.addEventListener("click", async () => {
  openModal(
    "Cache",
    'The following values are saved for a certain period of time, before being "replenished" when next requested.',
    await cache.getValue(),
    true,
  );
});

document.getElementById("expose-config")!.addEventListener(
  "click",
  () =>
    openModal(
      "Configuration",
      "The defining values for several features of the extension.",
      config,
      true,
    ),
);

document.getElementById("modal-close")!.addEventListener(
  "click",
  () => modal.close(),
);