<script lang="ts">
    import { page } from '$app/stores'
    import { goto } from '$app/navigation'
    import { shopLocations } from '$utils/stores/shop'

    export let isOver: boolean = false

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


    // Quick location change
    const quickLocationChange = ({ target: { value }}: any) => {
        const newPath = $page.path.split('-')[0] + `-${value}`
        goto(newPath, { replaceState: true, noscroll: true, keepfocus: true })
    }
</script>

<dl class={classes}>
    <dt class="text-label">Shop your city</dt>
    <dd>
        <svg width="14" height="17" viewBox="0 0 14 17" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.1 11.18a.52.52 0 0 1-.92 0L3.55 6.05a3.46 3.46 0 1 1 6.19 0L7.1 11.18Zm1.2-6.62c0-.91-.73-1.63-1.65-1.63a1.63 1.63 0 1 0 0 3.26c.92 0 1.65-.72 1.65-1.63Zm-2.88 8.18.03.05-.08 1.1 2.98.95v-3.48l.96-1.8v5.28l2.98-.95-.41-5.65-2.31.84.62-1.14 1.91-.7c.3-.09.52.16.55.46l.61 6c.04.42-.21.8-.61.93l-3.82 1.21-3.96-1.21-4.25 1.21a.54.54 0 0 1-.45-.08.4.4 0 0 1-.17-.38l.95-6.53c.04-.16.15-.3.32-.35l1.78-.57.4.77-1.59.51-.82 5.63 3.4-.97.2-2.76c.47.95.78 1.63.78 1.63Z"/>
        </svg>
        <select on:change={quickLocationChange}>
            {#each $shopLocations as { name, slug }}
                <option value={slug} selected={slug === $page.params.name}>{name}</option>
            {/each}
        </select>
    </dd>
</dl>