<script>
    import { onMount } from "svelte";
    import { location, querystring, replace, push } from "svelte-spa-router";
    import { Navbar, Nav, NavItem, NavLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from "sveltestrap";

    import routes from "@/routes/routes";
    import helpers from "@/libs/helpers";
    import { storeConfig, storeLang, storeLocales, storeLocalesViews } from "@/stores/config.store";

    onMount(() => {});

    $: href = {
        about: "/page?" + helpers.cleanQueryString($querystring + "&page=about"),
    };

    $: currentLang = $storeLocales.langs.filter((lang) => lang.value == $storeLang)[0];

    // const view = "formData";
    function onChangeLang(lang) {
        storeLang.setLang(lang);
        for (var route in routes[$location]) {
            const view = routes[$location][route];
            const file = $storeConfig.views[view].locales[$storeLang];
            storeLocalesViews.setLocalesView(view, file);
        }
        var params = helpers.parseQueryString($querystring);
        params["lang"] = $storeLang;
        replace(helpers.getUrl($location, params));
    }

    function goTo(href) {
        push(href);
    }
</script>

<Navbar color="light" dark fixed="bottom" class="mt-2">
    <Nav>
        <NavItem>
            <span class="navbar-text text-dark"> &copy; GéoGrandEst 2021 </span>
        </NavItem>
    </Nav>
    <Nav class="ms-auto">
        <NavItem>
            <NavLink on:click={(e) => goTo(href.about)} class="text-primary">Mentions</NavLink>
        </NavItem>
        <NavItem class="navbar-text text-dark">|</NavItem>
        <NavItem>
            <NavLink href="mailto:contact@datagrandest.fr" class="text-primary">Contact</NavLink>
        </NavItem>
        <NavItem class="navbar-text text-dark">|</NavItem>
        <Dropdown nav inNavbar direction="up">
            <DropdownToggle nav caret>{currentLang.text}</DropdownToggle>
            <DropdownMenu left>
                {#each $storeLocales.langs as lang}
                    <DropdownItem value={lang.value} on:click={onChangeLang(lang.value)}>
                        {lang.text}
                    </DropdownItem>
                {/each}
            </DropdownMenu>
        </Dropdown>
    </Nav>
</Navbar>

<style>
</style>
