<style lang="scss">
    @import "../../style/molecules/switcher";
</style>

<script lang="ts">
    import { page } from '$app/stores'
    import { getContext } from 'svelte'
    import reveal from '$animations/reveal'
    import { sendEvent } from '$utils/analytics'
    // Components
    import Icon from '$components/atoms/Icon.svelte'

    const { settings: { switcher_links }}: any = getContext('global')

    let switcherEl: HTMLElement
    let isOpen = false


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

        // Record opening event
        !isOpen && sendEvent('switcherOpen')
    }

    /**
     * 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}
    use:reveal={{
        animation: { y: [24, 0], opacity: [0, 1] },
        options: {
            duration: 1,
            delay: 0.6,
            threshold: 0,
        },
    }}
>
    <button class="switcher__button" title="{!isOpen ? 'Open' : 'Close'} menu" tabindex="0"
        on:click={toggleSwitcher}
    >
        <span>
            {#each Array(3) as _}
                <i />
            {/each}
        </span>
    </button>

    <ul class="switcher__links" data-sveltekit-noscroll>
        {#each switcher_links as { text, url, icon, icon_label }}
            <li class:is-active={$page.url.pathname === url}>
                <a href={url} on:click={toggleSwitcher} tabindex="0">
                    <Icon class="icon" icon={icon} label={icon_label} />
                    <span>{text}</span>
                </a>
            </li>
        {/each}
    </ul>
</aside>