import {html} from 'htm/preact';
import {Component, render} from 'preact';

import {Settings} from '../settings/settings.js';
import {initializeMessaging, sendMessage} from '../utilities/messaging.js';
import {History} from '../utilities/history.js';
import {PageFooter, PageHeader, PageMain} from './components/components.js';

window.addEventListener('DOMContentLoaded', async () => {
  initializeMessaging();
  await sendMessage('queue update badge');

  const history = await History.fromLocalStorage();
  const settings = await Settings.fromSyncStorage();

  render(
    html`<${OptionsPage} history=${history} settings=${settings} />`,
    document.body,
  );
});

type Props = {
  history: Queue.Item[];
  settings: Settings;
};

class OptionsPage extends Component<Props> {
  render() {
    const {history, settings} = this.props;

    return html`
      <${PageHeader} />
      <${PageMain} history=${history} settings=${settings} />
      <${PageFooter} settings=${settings} />
    `;
  }
}