<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
    }
  },

  methods: {
    /**
     * @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>
</style>