<template>
  <div class="menu">
    <div id="listeFiltres" class="filtre">
      <Barre_Filtre v-bind:darktheme="darktheme"  v-bind:panierChoisi="panierChoisi" v-bind:filtre_choisi="filtre_choisi"
                    v-show="modeFiltre" @filtre_choisi="passerFiltre"/>
      <Barre_Recherche v-bind:darktheme="darktheme"  v-show="!modeFiltre"/>
    </div>
    <!--    <button id="recherche" v-bind:class="{'modeFiltre': modeFiltre, 'modeRecherche': !modeFiltre}" v-on:click="changerModeMenu"></button>-->
    <span v-if="modeFiltre" class="modeFiltre"  v-on:click="changerModeMenu"></span>
    <button v-else v-bind:class="!darktheme ? 'modeRecherche' : 'modeRechercheDark'"  v-on:click="changerModeMenu"></button>
  </div>
</template>

<script>
import Barre_Filtre from "../components/Barre_Filtre";
import Barre_Recherche from "../components/Barre_Recherche";
export default {
  name: "Volet_Menu",
  components: {
    Barre_Recherche,
    Barre_Filtre
  },
  props: {
    // Variable permettant de déterminer si on est en mode panier ou en mode banque
    panierChoisi: {},
    // Signal d'activation ou non du theme sombre
    darktheme: {},
    // signal de détection pour la remize à zéro de la barre de filtre
    filtre_choisi: {}

  },
  data: function () {
    return {
      modeFiltre: true
    }
  },
  mounted() {
    this.$emit("basculeRechercheFiltre", {choix: true})
  },
  methods: {
    /**
     * @vuese
     * Permet de basculer du mode filtre au mode recherche, dans le volet latéral.
     */
    changerModeMenu: function (){
      this.modeFiltre = !this.modeFiltre
      alert("Je le suis en train de changer le mode filtre")
      this.$emit("basculeRechercheFiltre", {choix: this.modeFiltre})
    },
    /**
     * @vuese
     * Transmission de la catégorie du filtre choisi à Volet_Base
     */
    passerFiltre: function(event){
      // récupère l'event de la catégorie du filtre choisi et le transmet à VOlet_Base
      // @arg la catégorie du filtre choisi
      this.$emit("filtre_choisi", {filtre: event.filtre})
    }
  },
}
</script>

<style scoped>
.menu {
  width: 100%;
  height: 5%;
  display: inline-flex;
  justify-content: space-around;

}

#recherche {
  width: 23px;
  height: 23px;
}

.modeFiltre::before{
  /*  background-color: white;
    background-image: url(../assets/img/loupe.png);
    background-size: cover;
    border: none;*/
  content: "\1F50D";
  width: 23px;
  height: 23px;
}

.modeRecherche{
  background-color: whitesmoke;
  background-image: url(../assets/img/filtre.png);
  background-size: cover;
  border: none;
  width: 23px;
  height: 23px;
}
.modeRechercheDark{
  background-color: #353839;
  background-image: url(../assets/img/filtre-inverse.png);
  background-size: cover;
  border: none;
  width: 23px;
  height: 23px;
}
</style>