<script lang="ts">
    import {
        aniListLoggedIn,
        aniListAnime,
        GetAniListSingleItem,
    } from "./helperModules/GlobalVariablesAndHelperFunctions.svelte";
    import {onMount} from "svelte";
    import Router from "svelte-spa-router"
    import Home from "./routes/Home.svelte";
    import {wrap} from "svelte-spa-router/wrap";
    import Spinner from "./helperComponents/Spinner.svelte";
    import Header from "./helperComponents/Header.svelte";
    import {CheckIfAniListLoggedInAndLoadWatchList} from "./helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
    import { CheckIfMALLoggedInAndSetUser } from "./helperModules/CheckIfMyAnimeListLoggedIn.svelte";
    import {CheckIfSimklLoggedInAndSetUser} from "./helperModules/CheckIsSimklLoggedIn.svelte"

    onMount(async () => {
        await CheckIfAniListLoggedInAndLoadWatchList()
        await CheckIfMALLoggedInAndSetUser()
        await CheckIfSimklLoggedInAndSetUser()
    })
</script>

<Header />
<Router routes={{
    '/': Home,
    '/anime/:id': wrap({
        asyncComponent: () => import('./routes/Anime.svelte'),
        conditions: [
            () => $aniListLoggedIn,
            async (detail) => {
                await GetAniListSingleItem(Number(detail.params.id), true)
                return Object.keys($aniListAnime).length!==0
            },
        ],
        loadingComponent: Spinner
    }),
    // '*': "Not Found"
}} />
