<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>PIS Codes</h3>" +
            "<p>An effort has been made to support PIS codes accross the GWR network</p>" +
            "<p>The vast majority of codes across West, LTV, HEx and Sleeper services are now available.</p>" +
            "<p>The easiest way to find a PIS code is to type your headcode into the homepage, then select your service</p>",
        "<h3>Resgistration Update</h3>" +
            "<p>The registration issue has been fixed and registrations are now open.</p>" +
            "<p>Headcode and PIS Lookups will still be possible without registering but only for a limited time.</p>" +
            "<p>You will receive further warning before mandatory registration is re-enabled.</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>
