<script lang="ts">
    // import * as animateScroll from "svelte-scrollto"
    import { navigate } from "svelte-routing"
    import { location, showMobileNav } from "../../store"

    export let item: NavigationItem

    const isActive = (itemPath: string, locationPath: string): boolean | any => {
        itemPath = itemPath
        locationPath = locationPath

        return locationPath.includes(itemPath)
    }

    const onClickInternalLink = (item: NavigationItem) => {
        let url = ""

        if (item.settings?.page) {
            url += item.settings?.page
        }

        if (item.settings?.url?.url) {
            url += (url.endsWith("/") ? "" : "/") + item.settings.url.url
        }

        if (item.settings?.page) {
            $showMobileNav = false
            navigate(url)
        }
    }

    const getInternalUrl = (item): string => {
        if (item.settings.page === "/") {
            return item.settings.page
        }

        return item.settings.page
    }
</script>

{#if !item.settings.url.hidden}
    {#if item.settings.url.url}
        {#if item.settings.url.target === "default"}
            <a
                on:click|preventDefault="{() => onClickInternalLink(item)}"
                on:keydown
                href="{getInternalUrl(item)}"
                class:active="{isActive(item.settings.page, $location.path)}"
            >
                <div class="box"></div>
                <span>{item.settings.title}</span>
            </a>
        {:else}
            <a href="{item.settings.url.url}" target="{item.settings.url.target}">
                <div class="box"></div>
                <span>{item.settings.title}</span>
            </a>
        {/if}
    {:else}
        <a
            on:click|preventDefault="{() => onClickInternalLink(item)}"
            on:keydown
            href="{getInternalUrl(item)}"
            class:active="{isActive(item.settings.page, $location.path)}"
        >
            <div class="box"></div>
            <span>{item.settings.title}</span>
        </a>
    {/if}
{/if}
