import "./style.scss";
import { KeyManager } from "./template/keyManager.ts";
import { Header } from "./template/header.ts";
import { html } from "uhtml";
import { effect } from "uhtml/preactive";
import { reactive } from "uhtml/reactive";
import { Footer } from "./template/footer.ts";
import { HowItWorks } from "./template/howitworks.ts";
import { FAQ } from "./template/faq.ts";
import { page } from "./utils/store.ts";
import { routeToPage, hashChange } from "./router.ts";
import { UpdateModal, checkForUpdates } from "./template/update.ts";

const render = reactive(effect);
checkForUpdates();
const template = () => html` ${KeyManager()} ${UpdateModal()}
  <main class="container">
    <section>${routeToPage(page.value)}</section>
    <div>${HowItWorks}</div>
    <div>${FAQ}</div>
  </main>
  ${Footer}`;

// Listen for changes in the hash and update the state accordingly
window.addEventListener("hashchange", hashChange);

// Initialize the app
hashChange();

const headerElement = document.getElementById("header");
render(headerElement, Header);

const appElement = document.getElementById("page");
render(appElement, template);