<template>
  <div>
    <div id = "choixDuMode" class="contenusPersos" v-on:click="changerChoix" >
      <div class= "contenusPanier" v-if="!darktheme" v-bind:class="{'clicked': contenuPanier, 'nonClicked': !contenuPanier}">
        <p>Panier</p>
      </div>
      <div class= "contenusPanier" v-else v-bind:class="{'clicked': contenuPanier, 'nonClickedDark': !contenuPanier}">
        <p>Panier</p>

      </div>

      <div class = "contenusBanque" v-if="!darktheme"  v-bind:class="{'clicked': !contenuPanier, 'nonClicked': contenuPanier}">
        <p>Banque</p>
      </div>

      <div  class = "contenusBanque" v-else v-bind:class="{'clicked': !contenuPanier, 'nonClickedDark': contenuPanier}">

        <p>Banque</p>

      </div>



    </div>
  </div>
</template>

<script>
export default {
  name: "Choix_Mode",
  data: function () {
    return {
      contenuPanier: true,
    }
  },
  props: {
    // Signal pour remise à zéro de l'affichage du menu Panier / banque
    razModeVariante: {},
    // Signal d'activation ou non du theme sombre
    darktheme: {}

  },
  methods: {
    /**
     * @vuese
     * Permet de basculer entre le 'mode panier' et le 'mode banque'
     */
    changerChoix: function () {
      this.contenuPanier = !this.contenuPanier


      // dès qu'un filtre est choisi
      // @arg True si le mode panier est actif, False sinon
      this.$emit("mode_choisi", {mode: this.contenuPanier})
    },
  },
  watch: {
    /**
     * @vuese
     * Déconnexion de l'auteur -> on reset l'affichage du menu
     */
    razModeVariante: function () {
      this.contenuPanier = true
    }
  }
}
</script>

<style scoped>
#choixDuMode {
  display: flex;
  z-index: 1;
}

.contenusPanier, .contenusBanque {
  width: 49%;
  flex-grow: 1;
  text-align: center;
  vertical-align: bottom;
  padding-bottom: 0px;
  padding-top: 10px;
}

.nonClicked {
  outline: 1px solid black;
}

.nonClickedDark {
  outline: 1px solid white;
}

.clicked {
  outline: 5px solid yellow;
}
</style>