<script lang="ts">
    import {t} from "../scripts/i18n";
    import {theme} from "../stores/ThemeStore.js";
    import {get} from "svelte/store";
    import {onMount} from "svelte";
    import {getCurrentLocale, locales} from "../scripts/i18n.js";
    import {locale} from "../stores/LocaleStore";

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

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

    let dropdownOpen = false;

    function toggleDropdown() {
        dropdownOpen = !dropdownOpen;
    }

    function closeIfOpen() {
        if (dropdownOpen) {
            dropdownOpen = !dropdownOpen;
        }
    }
</script>

<header>
    <nav class="flex items-center justify-between flex-wrap slate-300 dark:bg-slate-800 p-6 shadow-md">
        <span class="font-semibold text-xl tracking-tight">{t("common.appName")}</span>

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

                <div class:hidden={!dropdownOpen}
                     class="transition absolute right-0 z-10 mt-2 w-56 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="menu-button" tabindex="-1" on:mouseleave={closeIfOpen}>
                    <div class="p-2" role="none">

                        <div class="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">{t("common.localeName")} - {t("common.selected")}</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}
        </div>


    </nav>
</header>