<script lang="ts">
    import Search from "./Search.svelte"
    import {
        aniListLoggedIn,
        aniListUser,
        loginToAniList,
        loginToMAL,
        loginToSimkl,
        malLoggedIn,
        malUser,
        simklLoggedIn,
        simklUser,
    } from "./GlobalVariablesAndHelperFunctions.svelte"
    import type {AniListUser} from "../anilist/types/AniListTypes";
    import type {SimklUser} from "../simkl/types/simklTypes";
    import type {MyAnimeListUser} from "../mal/types/MALTypes";
    import AvatarMenu from "./AvatarMenu.svelte";
    import logo from "../assets/images/AniTrackLogo.svg"
    import {location, pop} from "svelte-spa-router";

    let isAniListLoggedIn: boolean
    let isSimklLoggedIn: boolean
    let isMALLoggedIn: boolean
    let currentAniListUser: AniListUser
    let currentSimklUser: SimklUser
    let currentMALUser: MyAnimeListUser

    aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
    simklLoggedIn.subscribe((value) => isSimklLoggedIn = value)
    malLoggedIn.subscribe((value) => isMALLoggedIn = value)
    aniListUser.subscribe((value) => currentAniListUser = value)
    simklUser.subscribe((value) => currentSimklUser = value)
    malUser.subscribe((value) => currentMALUser = value)

    let currentLocation: any
    location.subscribe(value => currentLocation = value)
    console.log(currentLocation)
</script>

<nav class="bg-white border-gray-200 dark:bg-gray-900">
    <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
        <div class="flex items-center space-x-3 rtl:space-x-reverse">
            {#if currentLocation === "/"}
                <a href="/"><img src={logo} class="h-8" alt="AniTrack Logo"/></a>
            {:else}
                <button on:click={() => pop()}><img src={logo} class="h-8" alt="AniTrack Logo"/></button>
            {/if}
        </div>
        <div class="flex items-center min-[950px]:order-2 space-x-3 min-[950px]:space-x-0 rtl:space-x-reverse">
            <div class="min-[950px]:block min-[950px]:mr-4">
                <Search />
            </div>
            <AvatarMenu/>
            <button on:click={() => {
                let menu = document.querySelector("#navbar-user")
                menu.classList.toggle("hidden")
            }} type="button"
                    class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg min-[950px]:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
                    aria-controls="navbar-user" aria-expanded="false">
                <span class="sr-only">Open main menu</span>
                <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                     viewBox="0 0 17 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M1 1h15M1 7h15M1 13h15"/>
                </svg>
            </button>
        </div>
        <div class="hidden items-center justify-between w-full pb-4 min-[950px]:pb-0 min-[950px]:flex min-[950px]:w-auto min-[950px]:order-1 border border-gray-100 dark:border-gray-700 min-[950px]:border-0 bg-gray-50 dark:bg-gray-800 min-[950px]:bg-transparent min-[950px]:dark:bg-transparent rounded-lg" id="navbar-user">
            <ul class="flex flex-col font-medium pb-6 min-[950px]:p-0 mt-4 min-[950px]:space-x-8 rtl:space-x-reverse min-[950px]:flex-row min-[950px]:mt-0">
                <li>
                    {#if isAniListLoggedIn}
                        <div class="flex justify-center py-2 px-3 rounded bg-transparent min-[950px]:p-0">
                            <span class="w-48 min-[950px]:w-auto bg-green-100 text-green-800 text-sm font-medium me-2 px-3 py-2 rounded dark:bg-green-800 dark:text-green-200 cursor-default">AniList: {currentAniListUser.data.Viewer.name}</span>
                        </div>
                    {:else}
                        <button on:click={loginToAniList}
                                class="block py-2 px-3 text-gray-900 w-full min-[950px]:w-auto rounded hover:bg-gray-100 min-[950px]:hover:bg-transparent min-[950px]:hover:text-blue-700 min-[950px]:p-0 dark:text-white min-[950px]:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white min-[950px]:dark:hover:bg-transparent dark:border-gray-700">
                            AniList Login
                        </button>
                    {/if}
                </li>
                <li>
                    {#if isMALLoggedIn}
                        <div class="flex justify-center py-2 px-3 rounded bg-transparent min-[950px]:p-0">
                            <span class="w-48 min-[950px]:w-auto bg-blue-100 text-blue-800 text-sm font-medium me-2 px-3 py-2 rounded dark:bg-blue-800 dark:text-blue-200 cursor-default">MyAnimeList: {currentMALUser.name}</span>
                        </div>
                    {:else}
                        <button on:click={loginToMAL}
                                class="block py-2 px-3 text-gray-900 w-full min-[950px]:w-auto rounded hover:bg-gray-100 min-[950px]:hover:bg-transparent min-[950px]:hover:text-blue-700 min-[950px]:p-0 dark:text-white min-[950px]:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white min-[950px]:dark:hover:bg-transparent dark:border-gray-700">
                            MyAnimeList Login
                        </button>
                    {/if}
                </li>
                <li>
                    {#if isSimklLoggedIn}
                        <div class="flex justify-center py-2 px-3 rounded bg-transparent min-[950px]:p-0">
                            <span class="w-48 min-[950px]:w-auto bg-indigo-100 text-indigo-800 text-sm font-medium me-2 px-3 py-2 rounded dark:bg-indigo-800 dark:text-indigo-200 cursor-default">Simkl: {currentSimklUser.user.name}</span>
                        </div>
                    {:else}
                        <button on:click={loginToSimkl}
                                class="block py-2 px-3 text-gray-900 w-full min-[950px]:w-auto rounded hover:bg-gray-100 min-[950px]:hover:bg-transparent min-[950px]:hover:text-blue-700 min-[950px]:p-0 dark:text-white min-[950px]:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white min-[950px]:dark:hover:bg-transparent dark:border-gray-700">
                            Simkl Login
                        </button>
                    {/if}
                </li>
            </ul>
            <div class="flex justify-center min-[950px]:hidden">
                <Search/>
            </div>
        </div>
    </div>
</nav>
