import {html, render} from 'htm/preact';
import browser from 'webextension-polyfill';

import {backgroundHandler, getManifest} from './utilities/browser';
import {debug} from './utilities/log';
import {PageFooter, PageHeader, PageMain} from './utilities/components';
import Settings from './utilities/settings';

window.addEventListener('DOMContentLoaded', async () => {
  window.HollloQueue = {
    clearHistory: async () => {
      debug('Clearing history');
      await browser.storage.local.remove('history');
    },
    dumpBackup: async () => {
      debug(JSON.stringify(await browser.storage.local.get(), null, 2));
    },
    dumpSettings: async () => {
      debug(JSON.stringify(await Settings.get(), null, 2));
    },
  };

  backgroundHandler();
  await browser.runtime.sendMessage({action: 'queue update badge'});

  const manifest = getManifest();
  const settings = await Settings.get();

  const showVersionUpdated = settings.versionGotUpdated;
  if (showVersionUpdated) {
    settings.versionGotUpdated = false;
    await settings.save();
  }

  const history = await browser.storage.local.get({history: []});

  render(
    html`
      <${PageHeader} />
      <${PageMain} history=${history.history} settings=${settings} />
      <${PageFooter}
        manifest=${manifest}
        showVersionUpdated=${showVersionUpdated}
      />
    `,
    document.body,
  );
});