<script lang="ts">
    import { page } from '$app/stores'
    // Components
    import Icon from '$components/atoms/Icon.svelte'

    export let isOver: boolean = false

    let switcherEl: HTMLElement
    let isOpen = false

    // Links
    const links = [
        {
            icon: "globe",
            iconLabel: "Globe icon",
            url: "/locations",
            text: "Explore Locations"
        },
        {
            icon: "photos",
            iconLabel: "Photos icon",
            url: "/photos",
            text: "Photo Grid"
        },
        {
            icon: "bag",
            iconLabel: "Bag icon",
            url: "/shop",
            text: "Shop Posters"
        }
    ]


    /**
     * Toggle switcher open state
     */
    const toggleSwitcher = () => {
        isOpen = !isOpen
    }


    /**
     * Detect outside click
     */
    const windowClick = ({ target }) => {
		if (!switcherEl.contains(target) && isOpen) {
            // Close switcher
			toggleSwitcher()
		}
	}
</script>

<svelte:window on:click={windowClick} />

<aside class="switcher" bind:this={switcherEl}
    class:is-open={isOpen}
    class:is-over={isOver}
>
    <nav class="switcher__links">
        <ul>
            {#each links as { icon, iconLabel, url, text }}
                <li class:is-active={$page.path === url}>
                    <a href={url} on:click={toggleSwitcher}
                        sveltekit:noscroll sveltekit:prefetch
                    >
                        <Icon class="icon" icon={icon} label={iconLabel} />
                        <span>{text}</span>
                    </a>
                </li>
            {/each}
        </ul>
    </nav>

    <button class="switcher__button" title="{!isOpen ? 'Open' : 'Close'} menu" tabindex="0"
        on:click={toggleSwitcher}
    >
        <span>
            {#each Array(3) as _}
                <i />
            {/each}
        </span>
    </button>
</aside>