<script lang="ts">
  import Footer from "./components/Footer.svelte";
  import Header from "./components/Header.svelte";
  import Wrapper from "./components/Wrapper.svelte";
  import { SharkGame } from "./shark/SharkGame";

  import { Modals, closeAllModals } from "svelte-modals";
  import { onDestroy, onMount } from "svelte";
  import type { Unsubscriber } from "svelte/store";

  let root: HTMLElement;
  let unsubscribeSettings: Unsubscriber;

  onMount(() => {
    root = document.documentElement;

    SharkGame.Settings.settings.subscribe((settings) => {
      root.classList.toggle("no-theme", !settings.appearance.enableThemes.current);
      settings.appearance.theme.options.forEach((theme) => {
        root.classList.toggle(theme, theme === settings.appearance.theme.current);
      });
    });
  });

  onDestroy(() => {
    unsubscribeSettings();
  });

  function handleKeyUp(event: KeyboardEvent) {
    if (event.key === "Escape") {
      closeAllModals();
    }
  }

  function handleBeforeUnload(event: BeforeUnloadEvent) {
    console.debug(
      "beforeUnload",
      Date.now() - SharkGame.SaveHandler.lastSaved >= 60 * 1000,
      Date.now() - SharkGame.SaveHandler.lastSaved,
      60 * 1000
    );
    // If last save is over a minute old
    if (Date.now() - SharkGame.SaveHandler.lastSaved >= 60 * 1000) {
      // Annotyingly, the standardized way isn't supported, so both outdated ones will have to suffice
      event.preventDefault();
      return (event.returnValue = "Last save is over a minute old.");
    }
  }
</script>

<svelte:body on:keyup={handleKeyUp} />
<svelte:window on:beforeunload={handleBeforeUnload} />

<Modals>
  <div slot="backdrop" id="modal-backdrop" on:click={closeAllModals} />
</Modals>
{#await SharkGame.initialize()}
  Loading...
{:then}
  <Header game={SharkGame} title={SharkGame.title} />
  <Wrapper game={SharkGame} />
  <Footer />
{/await}
