<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" alt="Logo del MPS">
            </a>
            <pedidos-nav-bar v-if="rol === 'barrio'"/>
            <ollas-nav-bar v-else-if="rol === 'ollas'"/>
            <admin-nav-bar v-else-if="rol === 'admin_barrio'"/>
            <comisiones-nav-bar v-else/>
        </div>
        <div class="navbar-menu"
             :class="{'is-active': burger_activa}">
            <div class="navbar-end">
                <buscador v-if="pedidoDefinido"/>
                <chismosa-dropdown v-if="pedidoDefinido"
                                   class="hide-below-1024"
                                   ariaControls="wide"/>
                <div class="block navbar-item">
                    <a @click="logOut" class="text-a">
                        Cerrar sesión
                    </a>
                </div>
            </div>
        </div>
    </nav>
</template>

<script>
import ChismosaDropdown from '../pedidos/ChismosaDropdown.vue';
import { mapGetters, mapState } from "vuex";
import PedidosNavBar from "../pedidos/PedidosNavBar.vue";
import ComisionesNavBar from "../comisiones/ComisionesNavBar.vue";
import AdminNavBar from "../admin/AdminNavBar.vue";
import OllasNavBar from "../ollas/OllasNavBar.vue";
import Buscador from "../pedidos/Buscador.vue";

export default {
    components: { Buscador, OllasNavBar, AdminNavBar, ComisionesNavBar, PedidosNavBar, ChismosaDropdown },
    computed: {
        ...mapGetters('pedido', ["pedidoDefinido"]),
        ...mapState('login', ["rol"]),
        ...mapState('ui', ["burger_activa"])
    },
    methods: {
        logOut() {
            event.preventDefault();
            document.getElementById('logout-form').submit();
        },
    }
};
</script>

<style>
</style>
