<template>
   <transition name="modalAni">
      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
         <div class="modalContainer">
            <div class="modalWrapper">
               <img
                  class="closeModalImg"
                  src="cancel-black-36dp.svg"
                  alt="closeModalIMG"
                  @click="closeModal"
               />
               <h1 @click="test">{{ playerName }}, choose your fighter!</h1>
               <div class="fighterDiv">
                  <div class="fighter" @click="chooseFighter('Adol')">
                     <img src="characters/Adol.png" alt="adol" />
                     <p>Adol Christin</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('Link')">
                     <img src="characters/Link.png" alt="link" />
                     <p>Link</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('Barbarian')">
                     <img src="characters/Barbarian.png" alt="barbarian" />
                     <p>Barbarian</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('Layton')">
                     <img src="characters/Layton.png" alt="layton" />
                     <p>Professor Layton</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('Kiryu')">
                     <img src="characters/Kiryu.png" alt="kiryu" />
                     <p>Kazuma Kiryu</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('Miles')">
                     <img src="characters/Miles.png" alt="miles" />
                     <p>Miles Edgeworth</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('Lemmings')">
                     <img src="characters/Lemmings.png" alt="lemmings" />
                     <p>Lemmings</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('Samus')">
                     <img src="characters/Samus.png" alt="samus" />
                     <p>Samus</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('Kratos')">
                     <img src="characters/Kratos.png" alt="kratos" />
                     <p>Kratos</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('Aloy')">
                     <img src="characters/Aloy.png" alt="aloy" />
                     <p>Aloy</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('Sora')">
                     <img src="characters/Sora.png" alt="sora" />
                     <p>Sora</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('Raiden')">
                     <img src="characters/Raiden.png" alt="raiden" />
                     <p>Raiden</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('PaperMario')">
                     <img src="characters/PaperMario.png" alt="paper mario" />
                     <p>Paper Mario</p>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </transition>
</template>

<script>
export default {
   data() {
      return {
         show: false,
         playerName: "",
      };
   },
   methods: {
      closeModal() {
         this.show = false;
      },
      openModal(playerName) {
         this.playerName = playerName;
         this.show = true;
      },
      checkIfClickShouldCloseModal(event) {
         if (event.target.classList[0] === "modal") {
            this.closeModal();
         }
      },
      chooseFighter(profilePicSrc) {
         let payload = {
            playerName: this.playerName,
            profile: "characters/" + profilePicSrc + ".png",
         };
         this.$store.dispatch("changePlayerProfile", payload);
         this.closeModal();
      },
   },
};
</script>

<style scoped>
.modalContainer {
   width: 80%; /* Could be more or less, depending on screen size */
}
.fighterDiv {
   display: flex;
   width: 100%;
   justify-content: center;
   margin-top: 30px;
   flex-wrap: wrap;
}

.fighterDiv img {
   width: 180px;
   height: 90px;
}

.fighter {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   text-align: center;
   width: 14vw;
   margin-top: 30px;
}
.fighter > * {
   width: 100%;
}
.fighter:hover {
   outline: 1px solid rgb(128, 83, 0);
   outline-offset: 2px;
   cursor: pointer;
}
.fighter p {
   margin-top: 8px;
   font-size: 1.3rem;
}

@media only screen and (max-width: 1000px) {
   .modalContainer {
      width: 95%; /* Could be more or less, depending on screen size */
   }
   .fighterDiv {
      margin-top: 30px;
   }
   .fighterDiv img {
      width: 80px;
      height: 40px;
   }

   .fighter {
      width: 25vw;
   }
}
</style>
