<script context="module">
    import {pushState, replaceState} from '$app/navigation';
</script>
<script>
    import {browser} from '$app/environment'
    import {invalidateAll} from '$app/navigation'
    import {page} from '$app/stores'
    import {setLocale, locale} from '$lib/i18n/i18n-svelte'
    import {locales} from '$lib/i18n/i18n-util'
    import {loadLocaleAsync} from '$lib/i18n/i18n-util.async'
    import {replaceLocaleInUrl} from '$lib/i18n/utils'


    /**
     * @param { import('$i18n/i18n-types').Locales } newLocale
     * @param { boolean } updateHistoryState
     * @return { Promise<void> }
     */
    const switchLocale = async (newLocale, updateHistoryState = true) => {

        if (!newLocale || $locale === newLocale) return

        // load new dictionary from server
        await loadLocaleAsync(newLocale)

        // select locale
        setLocale(newLocale);

        if (updateHistoryState) {
            // update url to reflect locale changes
            // history.pushState({locale: newLocale}, '', replaceLocaleInUrl($page.url, newLocale))

            pushState('', replaceLocaleInUrl($page.url, newLocale));
        }

        // run the `load` function again
        invalidateAll()
    }

    // update `lang` attribute
    $: browser && /** @type {HTMLElement} */(document.querySelector('html')).setAttribute('lang', $locale)

    // update locale when navigating via browser back/forward buttons
    /** @param { PopStateEvent } event */
    const handlePopStateEvent = async ({state}) => switchLocale(state.locale, false)

    // update locale when page store changes
    $: if (browser) {
        const lang = /** @type { import('$i18n/i18n-types').Locales } */ ($page.params.lang)
        switchLocale(lang, false)
        history.replaceState({...history.state, locale: lang}, '', replaceLocaleInUrl($page.url, lang))

        // replaceState('', replaceLocaleInUrl($page.url, lang));
    }


</script>

<svelte:window on:popstate={handlePopStateEvent}/>


{#each locales as l}
    <li>
        <a class:active={l === $locale}
           href={replaceLocaleInUrl($page.url, l)}>

            {#if l === 'en'}
                English
            {/if}

            {#if l === 'ps'}
                پښتو
            {/if}

            {#if l === 'fa'}
                دری
            {/if}

        </a>
    </li>
{/each}

<!--        <li>-->
<!--            <a href={replaceLocaleInUrl($page.url, 'en')}>English</a>-->
<!--        </li>-->
<!--        <li>-->
<!--            <a href={replaceLocaleInUrl($page.url, 'ps')}>پښتو</a>-->
<!--        </li>-->
<!--        <li>-->
<!--            <a href={replaceLocaleInUrl($page.url, 'fa')}>دری</a>-->
<!--        </li>-->
<style>
    .active {
        font-weight: bold;
    }
</style>