<script lang="ts">
    import * as animateScroll from "svelte-scrollto"
    import Icon from "mdi-svelte"
    import { mdiMenu } from "@mdi/js"

    import { links, link } from "svelte-routing"
    import { navigations, currentLang, location } from "../../store"

    import LanguageChooser from "./LanguageChooser.svelte"

    export let ident = "main"

    let navigation: Navigation
    let showMobileNav: boolean = false

    $: {
        navigation = null
        $navigations?.map((nav) => {
            if (nav.ident === ident && nav.locale === $currentLang) {
                navigation = nav
            }
        })
    }
</script>

<LanguageChooser />

{#if navigation}
    <nav class="{ident}" use:links>
        {#each navigation?.items || [] as item}
            {#if !item.settings.url.hidden}
                {#if item.settings.url.url}
                    {#if item.settings.url.target === "default"}
                        <a
                            use:link
                            href="{item.settings.url.url}"
                            class:active="{'/' + item.settings.page === $location.path}"
                        >
                            {item.settings.title}
                        </a>
                    {:else}
                        <a
                            href="{item.settings.url.url}"
                            target="{item.settings.url.target}"
                            on:click="{() => {
                                animateScroll.scrollTo({ element: item.settings.url.url, offset: -200 })
                                showMobileNav = false
                            }}"
                        >
                            {item.settings.title}
                        </a>
                    {/if}
                {:else}
                    <a href="{item.settings.page + '/'}" class:active="{'/' + item.settings.page === $location.path}">
                        {item.settings.title}
                    </a>
                {/if}
            {/if}
        {/each}
    </nav>

    {#if ident === "main"}
        <div class="nav-mobile-toggle" on:click="{() => (showMobileNav = !showMobileNav)}">
            <Icon path="{mdiMenu}" size="2" />
        </div>

        <nav class="{ident}-mobile" class:show="{showMobileNav}" use:links>
            {#each navigation?.items || [] as item}
                {#if !item.settings.url.hidden}
                    {#if item.settings.url.url}
                        {#if item.settings.url.target === "default"}
                            <a
                                use:link
                                href="{item.settings.url.url}"
                                class:active="{'/' + item.settings.page === $location.path}"
                            >
                                {item.settings.title}
                            </a>
                        {:else}
                            <div class="nav-item">
                                <a
                                    href="{item.settings.url.url}"
                                    target="{item.settings.url.target}"
                                    on:click="{() => {
                                        animateScroll.scrollTo({ element: item.settings.url.url, offset: -200 })
                                        showMobileNav = false
                                    }}"
                                >
                                    {item.settings.title}
                                </a>
                            </div>
                        {/if}
                    {:else}
                        <div class="nav-item">
                            <a
                                href="{item.settings.page + '/'}"
                                on:click="{() => (showMobileNav = false)}"
                                class:active="{'/' + item.settings.page === $location.path}"
                            >
                                {item.settings.title}
                            </a>
                        </div>
                    {/if}
                {/if}
            {/each}
        </nav>
    {/if}
{/if}
