import config from "@/utils/config.json";
import { preferences, cache } 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());