<template>
    <nav id="nav-bar" class="navbar is-danger is-fixed-top" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a class="navbar-item" href="https://mps.org.uy">
                <img src="/assets/logoMPS.png" height="28">
            </a>
            <div class="navbar-item" id="datos-pedido" v-if="pedidoDefinido">
                <p class="hide-below-1024">
                    {{ `Núcleo: ${nombre} - Barrio: ${grupo_de_compra}` }}
                </p>
            </div>
            <chismosa-dropdown
                v-if="pedidoDefinido"
                class="hide-above-1023"
                ariaControls="mobile">
            </chismosa-dropdown>
            <a role="button" class="navbar-burger" :class="{'is-active':burgerActiva}" aria-label="menu"
               aria-expanded="false" data-target="nav-bar" @click="toggleBurger">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>
        <div class="navbar-menu" :class="{'is-active':burgerActiva}">
            <div class="navbar-end">
                <div v-if="pedidoDefinido" class="navbar-item field has-addons mt-2 mr-3">
                    <a class="button is-small has-text-dark-grey" @click.capture="buscar">
                <span class="icon">
                  <i class="fas fa-search"></i>
                </span>
                    </a>
                    <input class="input is-small" type="text" placeholder="Harina" v-model="searchString"
                           @keyup.enter="buscar">
                </div>
                <chismosa-dropdown
                    v-if="pedidoDefinido"
                    class="hide-below-1024"
                    ariaControls="wide">
                </chismosa-dropdown>
                <div class="block navbar-item">
                    <a onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
                       class="text-a">
                        Cerrar sesión
                    </a>
                    <slot name="logout-form"></slot>
                </div>
            </div>
        </div>
    </nav>
</template>

<script>
import ChismosaDropdown from '../pedidos/ChismosaDropdown.vue';
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";

export default {
    components: { ChismosaDropdown },
    data() {
        return {
            burgerActiva: false,
            searchString: "",
        }
    },
    computed: {
        ...mapGetters('pedido', ["pedidoDefinido"]),
        ...mapState('pedido',["nombre"]),
        ...mapState('barrio',["grupo_de_compra"]),
    },
    methods: {
        ...mapActions('productos', ["filtrarProductos"]),
        ...mapMutations('ui',["addMiga"]),
        toggleBurger() {
            this.burgerActiva = !this.burgerActiva
        },
        buscar() {
            if (this.burgerActiva)
                this.toggleBurger();
            this.filtrarProductos({ filtro: "nombre", valor: this.searchString });
            this.addMiga({ nombre: this.searchString });
        }
    },
};
</script>

<style>

p.navbar-item:empty {
    display: none;
}

#nav-bar {
    z-index: 10;
}

.text-a {
    color: inherit;
}

@media (max-width: 1023px) {
    .hide-below-1024 {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .hide-above-1023 {
        display: none !important;
    }
}
</style>