<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-brand v-if="rol === 'barrio'"/>
            <ollas-nav-bar-brand v-else-if="rol === 'ollas'"/>
            <admin-nav-bar-brand v-else-if="rol === 'admin_barrio'"/>
            <comisiones-nav-bar-brand v-else/>
            <burger/>
        </div>
        <div class="navbar-menu" :class="{'is-active': burger_activa}">
            <div class="navbar-start is-flex is-justify-content-center is-flex-grow-1">
                <div v-if="mostrarAviso" class="is-absolute-center is-flex is-align-items-center navbar-item">
                    <span class="tag is-warning is-size-6">
                        Monto superado
                    </span>
                </div>
            </div>
            <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 PedidosNavBarBrand from "../pedidos/PedidosNavBarBrand.vue";
import ComisionesNavBarBrand from "../comisiones/ComisionesNavBarBrand.vue";
import AdminNavBarBrand from "../admin/AdminNavBarBrand.vue";
import OllasNavBarBrand from "../ollas/OllasNavBarBrand.vue";
import Buscador from "../pedidos/Buscador.vue";
import Burger from "./Burger.vue";

export default {
    components: { Burger, Buscador, OllasNavBarBrand, AdminNavBarBrand, ComisionesNavBarBrand, PedidosNavBarBrand, ChismosaDropdown },
    computed: {
        ...mapGetters('pedido', ["pedidoDefinido"]),
        ...mapGetters('ollas', ["montoSuperado"]),
        ...mapState('login', ["rol"]),
        ...mapState('ui', ["burger_activa"]),
        mostrarAviso() {
            return this.pedidoDefinido && this.rol === 'ollas' && this.montoSuperado;
        }
    },
    methods: {
        logOut() {
            event.preventDefault();
            document.getElementById('logout-form').submit();
        },
    }
};
</script>

<style>
.is-absolute-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
</style>
