<template>
    <div v-if="contentBlocks && contentBlocks.length" class="jump-nav border-b border-brand-pink bg-white">
        <div class="container mx-auto flex items-center overflow-x-auto">
            <span class="text-black text-sm font-bold uppercase mx-4 jump-nav__item">JUMP TO</span>
            <div v-for="block in contentBlocks" :key="block.id" class="jump-nav__item uppercase py-6 text-sm text-brand-pink font-bold mx-4 cursor-pointer hover:text-brand-darkpink" @click="scrollTo(block.id)">{{ block.name }}</div>
        </div>
    </div>
</template>

<script>
/**
 * Jump Nav
 * 
 * Built automatically from the content blocks added to the page.
 * This only includes those blocks that have specified a tagline.
 */
export default {
    props: {
        blocks: {
            type: Array,
            required: true
        }
    },
    computed: {
        contentBlocks() {
            return this.blocks.filter(block => {
                if ('blockNavTitle' in block && block.blockNavTitle) 
                    return true;
                
                return false;
            }).map(block => {
                let name = block.blockNavTitle;
                
                return {
                    name: name,
                    handle: name.replace(/ /g, '-').toLowerCase(),
                    id: 'page-block-' + block.id
                }
            });
        },
    },
    mounted() {
        setTimeout(() => {
            // If hash set, scroll to that block on mounted
            if (this.$route.hash) {
                const block = this.contentBlocks.find(b => '#'+b.handle == this.$route.hash);
                if (block) {
                    this.scrollTo(block.id);
                }
            }
        }, 1000);
    },
    methods: {
        scrollTo(id) {
            const element = document.getElementById(id);
            if (!element)
                return;
            
            // Add hash to URL with the block name
            const block = this.contentBlocks.find(b => b.id == id);
            if (block) window.location.hash = block.handle;
            
            window.scroll({
                top: element.offsetTop - 179,
                behavior: 'smooth'
            });
        }
    }
}
</script>

<style lang="scss">
.jump-nav {
    position: sticky;
    top: 77px;
    z-index: 1999;
    
    @include min-bp($md) {
        top: 109px;
    }
    
    &__item {
        white-space: nowrap;
    }
}
</style>