<script lang="ts">
    import Header from "$lib/navigation/header.svelte";
    import Nav from "$lib/navigation/nav.svelte";
    import InputIsland from "$lib/islands/input-island-form.svelte";
    import QuickLinkIsland from "$lib/islands/quick-link-island.svelte";
    import Welcome from "$lib/overlays/welcome.svelte";
    import { welcome } from "$lib/stores/welcome";
    import { version, showWelcome } from "$lib/stores/version";
    import { featureDetect } from "$lib/scripts/featureDetect";
    import { onMount } from "svelte";
    import toast from "svelte-french-toast";

    const title = "OwlBoard";
    const inputIslands = [
        {
            title: "Live Departure Boards",
            action: "/ldb",
            placeholder: "Enter CRS/TIPLOC",
            queryName: "station",
        },
        {
            title: "Train Details & PIS",
            action: "/train",
            placeholder: "Enter Headcode",
            queryName: "headcode",
        },
    ];

    onMount(async () => {
        const featureSupport = featureDetect();
        console.log(featureSupport);

        if (!featureSupport.critical) {
            toast.error("Your browser is missing critical features, OwlBoard might not work properly.  See `Menu > Statistics` for more information.");
        } else if (!featureSupport.nice) {
            toast.error("Your browser is missing some features, see `Menu > Statistics` for more information.");
        }
    });
</script>

{#if showWelcome && ($welcome === "null" || !$welcome || parseInt($welcome.replace(/\./g, "")) < parseInt(version.replace(/\./g, "")))}
    <Welcome />
{/if}
<Header {title} />

{#each inputIslands as variables}
    <InputIsland {variables} />
{/each}

<QuickLinkIsland />

<Nav />
