window.Event = new Vue();

Vue.component('nav-bar', {
	template: `
		<nav class="navbar is-danger" 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>
            <p style="margin:0 auto" class="navbar-item"><slot name="subpedido"></slot></p>
            <a class="navbar-item" href="#">
              <img style="padding:0 0.3em;" src="/assets/chismosa.png" height="28">
              <p style="margin:0 auto; color:white">$ <span v-text="subpedido == null ? 0 : subpedido.total"></span></p>
            </a>
            <a role="button" class="navbar-burger" :class="{'is-active':isActive}" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample" @click="toggleState">
              <span aria-hidden="true"></span>
              <span aria-hidden="true"></span>
              <span aria-hidden="true"></span>
            </a>
          </div>

          <div id="navbarBasicExample" class="navbar-menu" :class="{'is-active':isActive}">
            <div class="navbar-start has-text-right-mobile">
                <!-- Styles nombre del barrio-->
                <p class="navbar-item"><slot name="gdc"></slot></p>
                <a class="navbar-item"
                	onclick="event.preventDefault();
                	document.getElementById('logout-form').submit();">
                    Cerrar sesión
                </a>
                <slot name="logout-form"></slot>
            </div>
          </div>
        </nav>`,
	data() {
		return {
			isActive: false,
      subpedido: null
		}
	},
	methods: {
		toggleState() {
			this.isActive = !this.isActive;
		},
    actualizarSubpedido(){
      axios.get("/api/subpedidos/" + this.subpedido.id)
        .then(response => {
          this.subpedido = response.data.data;
      });
    }
	}, mounted() {
    axios.get("/subpedidos/obtener_sesion").then(response => {
      this.subpedido = response.data.subpedido;
      this.actualizarSubpedido()
    });
    //Emitir un evento subpedido-actualizado al agregar o eliminar un producto del subpedido para que el total de la chismosa se muestre correctamente
    Event.$on('subpedido-actualizado', () => {
      this.actualizarSubpedido();
    });
  }
});

Vue.component('nav-migas', {
  data() {
    return {
      migas: []
    }
  },
  computed: {
    visible: function() {
      return this.migas.length > 0
    }
  },
  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 = [];
    });
    Event.$on('migas-pop', () =>  {
      this.migas.pop();
    });
  }
});

new Vue({
  el: '#app'
});