<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>Statistics</h1>
               <p>Total amount of games in the playlist: {{ howManyGames }}</p>
            </div>
         </div>
      </div>
   </transition>
</template>

<script>
import { mapState } from "vuex";
export default {
   data() {
      return {
         show: false,
      };
   },
   computed: {
      ...mapState(["howManyGames"]),
   },
   methods: {
      closeModal() {
         this.show = false;
      },
      openModal() {
         this.show = true;
      },
      checkIfClickShouldCloseModal(event) {
         if (event.target.classList[0] === "modal") {
            this.closeModal();
         }
      },
   },
};
</script>

<style scoped>
p {
   font-size: 1.2rem;
   width: 100%;
   margin-top: 30px;
}

.descriptionText {
   margin-top: 35px;
}

.creditText {
   margin-top: 30px;
}
.creditText:nth-child(5) {
   margin-top: 0px;
}

.patchNotesText {
   margin-top: 20px;
}
</style>
