<style lang="scss">
    @import "../../style/molecules/shop-locationswitcher";
</style>

<script lang="ts">
    import { goto } from '$app/navigation'
    import { getContext, tick } from 'svelte'
    import { shopCurrentProductSlug } from '$utils/stores/shop'
    import { smoothScroll } from '$utils/stores'

    export let isOver: boolean = false

    const { shopLocations }: any = getContext('shop')

    const classes = [
        'shop-locationswitcher',
        isOver && 'is-over',
        $$props.class
    ].join(' ').trim()


    // Quick location change
    const quickLocationChange = async ({ target: { value }}: any) => {
        const pathTo = `/shop/poster-${value}`
        goto(pathTo, { replaceState: true, noscroll: true, keepfocus: true })

        // Scroll to anchor
        await tick()
        $smoothScroll.scrollTo('#poster', { duration: 2 })
    }
</script>

<dl class={classes}>
    <dt class="text-label">Choose a city</dt>
    <dd>
        <svg width="18" height="18">
            <use xlink:href="#icon-map-pin" />
        </svg>
        <select on:change={quickLocationChange}>
            {#each shopLocations as { name, slug }}
                <option value={slug} selected={slug === $shopCurrentProductSlug}>{name}</option>
            {/each}
        </select>
    </dd>
</dl>