<template>
  <div>

    <div id = "choixDuMode" class="contenusPersos" v-on:click="changerChoix">
      <div class = "contenusPanier" v-if="!darkMode"  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="!darkMode"  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_Variante",
  data: function () {
    return {
      contenuPanier: true,
    }
  },
  props: {
    // Permet de déterminer si on est dans le mode sombre
    darkMode: {}
  },
  methods: {
    /**
     * @vuese
     * Permet de basculer entre le 'mode panier' et le 'mode banque', mais dans l'état variante (menu détaché du volet latéral)
     */
    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})
    },
  }
}
</script>

<style scoped>
#choixDuMode {
  border: 1px solid black;
  width: 200px;
  display: flex;
  margin-left: 864px;
  margin-top: -5px;
  margin-bottom: 0.1%;
  height: 20px
}

.contenusPanier, .contenusBanque {

  width: 100px;
  text-align: center;
}

.nonClicked {
  outline: 1px solid black;
}

.nonClickedDark {
  outline: 1px solid white;
}

.clicked {
  outline: 5px solid yellow;
}

p {
  text-align: center;
  line-height: 17px;

}

</style>