<template>
    <nav v-if="pedidoDefinido" class="breadcrumb is-centered has-background-danger-light is-fixed-top"
         aria-label="breadcrumbs" v-show="visible">
        <ul class="mt-4">
            <li v-for="(miga, i) in migas" :key="i" :class="{'is-active': i === migaActiva}">
                <a :href="miga.href" v-text="miga.nombre"
                   :class="{'has-text-danger': i !== migaActiva}"></a>
            </li>
        </ul>
    </nav>
</template>

<script>
import { mapGetters } from "vuex";

export default {
    data() {
        return {
            initial: [{ nombre: 'Categorías', href: '/productos' }],
            migas: [{ nombre: 'Categorías', href: '/productos' }],
        }
    },
    computed: {
        ...mapGetters('pedido', ["pedidoDefinido"]),
        visible: function () {
            return this.migas.length > 0
        },
        migaActiva: function () {
            return this.migas.length - 1
        }
    },
    mounted() {
        Event.$on('migas-setear-como-inicio', (miga) => {
            this.migas = [];
            this.migas.push(miga);
        });
        Event.$on('migas-agregar', (miga) => {
            this.migas.push(miga);
        });
        Event.$on('migas-reset', () => {
            this.migas = this.initial;
        });
        Event.$on('migas-pop', () => {
            this.migas.pop();
        });
    }
}
</script>

<style>
nav.breadcrumb.is-fixed-top {
    position: fixed;
    left: 0;
    right: 0;
    top: 3.25rem;
    height: 2.75rem;
    z-index: 5;
}
</style>