<script lang="ts">
    import {t} from "$lib/i18n";
    import {getCurrentLocale, locales} from "$lib/i18n";
    import {locale} from "$lib/stores/LocaleStore";
    import {theme} from "$lib/stores/ThemeStore";
    import {devmode} from "$lib/stores/DevmodeStore";
    import {getCookie} from "$lib/cookie";
    import {setCookie} from "$lib/cookie";
    import {get_user_info, renderDevMenu} from "$lib/auth";
    import {browser} from "$app/environment";

    let loggedin;
    if (browser) { loggedin = getCookie("authToken") !== "" } else { loggedin = false };

    function toggleTheme() {
        if ($theme === "dark") {
            theme.set("light");
        } else {
            theme.set("dark");
        }
    }

    function setLocale(newLocale: string) {
        locale.set(newLocale);
        window.location.reload();
    }

    let langDropdownOpen = false;

    function toggleLangDropdown() {
        langDropdownOpen = !langDropdownOpen;
    }

    function closeLangIfOpen() {
        if (langDropdownOpen) {
            langDropdownOpen = !langDropdownOpen;
        }
    }

    let devDropdownOpen = false;

    function toggleDevDropdown() {
        devDropdownOpen = !devDropdownOpen;
    }

    function closeDevIfOpen() {
        if (devDropdownOpen) {
            devDropdownOpen = !devDropdownOpen;
        }
    }

    let enableConfirm = false;
</script>

<header>
    <nav class="flex items-center justify-between flex-wrap slate-300 dark:bg-slate-800 p-6 shadow-md">
        <div>
            <span class="font-semibold text-xl tracking-tight">{t("common.appName")}</span>
            {#if loggedin}
                <a class="text-md ml-5 decoration-none hover:underline" href="/admin">Organizations</a>
                <a class="text-md ml-5 decoration-none hover:underline" href="/settings">Settings</a>
            {/if}
        </div>

        <div class="inline-block text-sm leading-none lg:m-0">
            <div class="relative inline-block">
                <div>
                    <button on:click={toggleLangDropdown} type="button"
                            class="inline-flex w-full justify-center rounded-md px-4 py-2" id="lang-menu-button"
                            aria-expanded="true" aria-haspopup="true" title="{t('header.changeLang')}">
                        <i class="fa-solid fa-language"></i>
                    </button>
                </div>

                <div class:hidden={!langDropdownOpen}
                     class="transition absolute right-0 z-10 w-min mt-2 origin-top-right rounded-md bg-slate-100 dark:bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                     role="menu" aria-orientation="vertical" aria-labelledby="lang-menu-button" tabindex="-1"
                     on:mouseleave={closeLangIfOpen}>
                    <div class="p-2" role="none">

                        <div class="whitespace-nowrap rounded p-2 bg-slate-200 dark:bg-slate-600" role="menuitem"
                             tabindex="-1">
                            <div>
                                <span class="mr-3 fi fi-{t('common.flag')}"></span>
                                <span class="mt-0.2 mr-0.5">{t("common.localeName")} <span
                                        class="text-slate-400">- {t("common.selected")}</span></span>
                            </div>
                        </div>

                        {#each Object.keys(locales) as locale, i}
                            {#if getCurrentLocale() !== locale}
                                <div class="rounded p-2 mt-2 hover:bg-slate-300 hover:dark:bg-slate-800 transition"
                                     role="menuitem" tabindex="-1" on:click={() => {setLocale(locale)}}>
                                    <div>
                                        <span class="mr-3 fi fi-{t('common.flag', locale)}"></span>
                                        <span class="mt-0.2">{t("common.localeName", locale)}</span>
                                    </div>
                                </div>
                            {/if}
                        {/each}

                    </div>
                </div>

            </div>

            {#if $theme === 'dark'}
                <button title="{t('header.lightMode')}" class="inline-block text-sm px-4 leading-none mt-4 lg:mt-0"
                        on:click={toggleTheme}>
                    <i class="fa-solid fa-sun"></i>
                </button>
            {:else}
                <button title="{t('header.darkMode')}" class="inline-block text-sm px-4 leading-none mt-4 lg:mt-0"
                        on:click={toggleTheme}>
                    <i class="fa-solid fa-moon"></i>
                </button>
            {/if}

            {#if renderDevMenu()}

                <button title="Developer menu" class="inline-block text-sm px-4 leading-none mt-4 lg:mt-0"
                        id="dev-menu-button" aria-expanded="true" aria-haspopup="true"
                        on:click={toggleDevDropdown}>
                    <i class="fa-solid fa-wrench"></i>
                </button>

                <div class:hidden={!devDropdownOpen}
                     class="transition absolute right-0 z-10 mr-10 w-max mt-2 origin-top-right rounded-md bg-slate-100 dark:bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                     role="menu" aria-orientation="vertical" aria-labelledby="dev-menu-button" tabindex="-1"
                     on:mouseleave={closeDevIfOpen}>

                    {#if $devmode === "false"}
                        {#if !enableConfirm}
                            <div class="p-2" role="none">
                                <div class="rounded p-2 hover:bg-slate-300 hover:dark:bg-slate-800 transition"
                                     role="menuitem" tabindex="-1" on:click={() => {enableConfirm = true}}>
                                    <div>
                                        <span class="mt-0.2">Enable developer mode</span>
                                    </div>
                                </div>
                            </div>
                        {:else}
                            <div class="p-2" role="none">
                                <div class="rounded p-2 hover:bg-slate-300 hover:dark:bg-slate-800 transition"
                                     role="menuitem" tabindex="-1" on:click={() => {devmode.set(true)}}>
                                    <div>
                                        <span class="mt-0.2">Are you sure?</span>
                                    </div>
                                </div>
                            </div>
                        {/if}
                    {:else}
                        <div class="p-2" role="none">
                            <div class="rounded p-2 hover:bg-slate-300 hover:dark:bg-slate-800 transition"
                                 role="menuitem" tabindex="-1"
                                 on:click={() => {navigator.clipboard.writeText(getCookie("sessionToken"))}}>
                                <div>
                                    <span class="mt-0.2">Copy session token</span>
                                </div>
                            </div>

                            <div class="rounded p-2 mt-2 hover:bg-slate-300 hover:dark:bg-slate-800 transition"
                                 role="menuitem" tabindex="-1"
                                 on:click={() => {navigator.clipboard.writeText(getCookie("authToken"))}}>
                                <div>
                                    <span class="mt-0.2">Copy mfa token</span>
                                </div>
                            </div>

                            <div class="rounded p-2 mt-2 hover:bg-slate-300 hover:dark:bg-slate-800 transition"
                                 role="menuitem" tabindex="-1"
                                 on:click={() => {navigator.clipboard.writeText(getCookie("sessionToken") + " " + getCookie("authToken"))}}>
                                <div>
                                    <span class="mt-0.2">Copy API key</span>
                                </div>
                            </div>

                            <div class="rounded p-2 mt-2 hover:bg-slate-300 hover:dark:bg-slate-800 transition"
                                 role="menuitem" tabindex="-1"
                                 on:click={() => {setCookie("authToken", "", -1); window.location.reload()}}>
                                <div>
                                    <span class="mt-0.2">Clear MFA state</span>
                                </div>
                            </div>

                            <div class="rounded p-2 mt-2 hover:bg-slate-300 hover:dark:bg-slate-800 transition"
                                 role="menuitem" tabindex="-1"
                                 on:click={() => {setCookie("authToken", "", -1); setCookie("sessionToken", "", -1); window.location.reload()}}>
                                <div>
                                    <span class="mt-0.2">Clear login state</span>
                                </div>
                            </div>

                            <div class="rounded p-2 mt-2 hover:bg-slate-300 hover:dark:bg-slate-800 transition"
                                 role="menuitem" tabindex="-1"
                                 on:click={async () => {await navigator.clipboard.writeText(JSON.stringify(await get_user_info(getCookie("sessionToken") + " " + getCookie("authToken"))))}}>
                                <div>
                                    <span class="mt-0.2">Copy user profile</span>
                                </div>
                            </div>

                            <div class="rounded p-2 mt-2 hover:bg-slate-300 hover:dark:bg-slate-800 transition"
                                 role="menuitem" tabindex="-1" on:click={() => {devmode.set("false")}}>
                                <div>
                                    <span class="mt-0.2">Disable developer mode</span>
                                </div>
                            </div>
                        </div>
                    {/if}
                </div>
            {/if}

        </div>


    </nav>
</header>