<script lang="ts">
  import { welcome } from '$lib/stores/welcome';
  import { fade } from 'svelte/transition';
  import { version } from '$lib/stores/version';

  let pageNum: number = 0;

  function pageUp() {
    pageNum++;
    console.log(`Welcome page: ${pageNum}`);
  }

  function pageDn() {
    pageNum--;
    console.log(`Welcome page: ${pageNum}`);
  }

  function close() {
    welcome.set(version);
  }

  const pageText: string[] = [
    '<h3>Staff LDB Updated</h3>' +
    '<p>An upgrade to the Staff Departure Boards may mean that they are temporarily unavailable while your device updates the app<p>' +
    '<p>Once the update is complete, staff departure board will load faster and more reliably over slow connections</p>',
  ];
</script>

<div id="popup" in:fade={{ delay: 500, duration: 300 }} out:fade={{ duration: 300 }}>
  <h2>What's new in OwlBoard {version}</h2>
  {#key pageNum}
    <div in:fade={{ delay: 300 }} out:fade={{ duration: 200 }}>
      {@html pageText[pageNum] || "You won't see this welcome message again"}
    </div>
  {/key}
  {#if pageNum >= pageText.length - 1}
    <button in:fade={{ delay: 350, duration: 250 }} out:fade={{ duration: 250 }} class="navButton" id="buttonCentre" type="button" on:click={close}>X</button>
  {/if}
  {#if pageNum > 0 && pageNum < pageText.length}
    <button in:fade={{ delay: 350, duration: 250 }} out:fade={{ duration: 250 }} class="navButton" id="buttonLeft" type="button" on:click={pageDn}>&lt;</button>
  {/if}
  {#if pageNum < pageText.length - 1}
    <button in:fade={{ delay: 350, duration: 250 }} out:fade={{ duration: 250 }} class="navButton" id="buttonRight" type="button" on:click={pageUp}>&gt;</button>
  {/if}
</div>

<style>
  #popup {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: 75vh;
    max-height: 600px;
    overflow-y: auto;
    max-width: 400px;
    margin: auto;
    margin-top: 25px;
    padding: 10px;
    background-color: var(--island-bg-solid);
    border-radius: 10px;
    z-index: 2500;
    box-shadow: 5px 5px 10px var(--box-shadow-color);
  } 

  .navButton {
    border-radius: 50px;
    border: none;
    color: var(--island-link-color);
    background-color: var(--island-button-color);
    width: 50px;
    height: 50px;
    font-size: 20px;
    font-weight: 600;
    bottom: 50px;
  }

  #buttonLeft {
    position: absolute;
    margin: auto;
    left: 50px;
  }

  #buttonCentre {
    position: absolute;
    margin: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  #buttonRight {
    position: absolute;
    margin: auto;
    right: 50px;
  }

  div {
    color: var(--island-text-color);
  }
</style>
