<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>Sign-up Fixed</h3>' +
      "<p>An issue present since 28/07/2023 has meant that new users or users with expired logins are unable to register.</p>" +
      '<p>This issue has now been fixed and new users will be able to register for Rail Staff Access</p>',
    '<h3>Always Improving</h3>' +
      '<p>OwlBoard is always improving, the current focus is to improve performance when you have low mobile signal by reducing the amount of data being sent.</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: grey;
    border-radius: 10px;
    z-index: 2500;
  }

  .navButton {
    border-radius: 50px;
    border: none;
    color: white;
    background-color: var(--overlay-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: white;
  }
</style>
