<template>
   <div
      v-if="show"
      class="mobileMenu"
      @click="checkIfClickShouldCloseMobileMenu"
   >
      <transition name="mobileMenuAni">
         <div v-if="showContent" class="mobileMenuContainer">
            <div class="mobileMenuWrapper">
               <h1>Menu</h1>
               <button class="settingsButton" @click="showSettingsModal">
                  Settings
               </button>
               <button class="statisticsButton" @click="showStatisticsModal">
                  Statistics
               </button>
               <button class="aboutButton" @click="showAboutModal">
                  About
               </button>
               <h1>Control</h1>
               <extra-buttons
                  @start-sound-test="startSoundTest"
               ></extra-buttons>
            </div>
         </div>
      </transition>
   </div>
</template>

<script>
import extraButtons from "./extraButtons.vue";

export default {
   components: {
      extraButtons,
   },
   data() {
      return {
         show: false,
         showContent: false,
      };
   },
   methods: {
      closeMobileMenu() {
         this.showContent = false;
         setTimeout(() => {
            this.show = false;
         }, 250);
      },
      openMobileMenu() {
         this.show = true;
      },
      openMobileMenuContent() {
         this.showContent = true;
      },
      checkIfClickShouldCloseMobileMenu(event) {
         if (event.target.classList[0] === "mobileMenu") {
            this.closeMobileMenu();
         }
      },
      showSettingsModal() {
         this.show = false;
         this.showContent = false;
         this.$emit("show-settings-modal");
      },
      showStatisticsModal() {
         this.show = false;
         this.showContent = false;
         this.$emit("show-statistics-modal");
      },
      showAboutModal() {
         this.show = false;
         this.showContent = false;
         this.$emit("show-about-modal");
      },
      startSoundTest() {
         this.$emit("start-sound-test");
      },
   },
};
</script>

<style scoped>
.mobileMenuAni-enter-from,
.mobileMenuAni-leave-to {
   opacity: 0.6;
   transform: translateX(80vw);
}
.mobileMenuAni-enter-to,
.mobileMenuAni-leave-from {
   opacity: 1;
   transform: translateX(0vw);
}
.mobileMenuAni-enter-active,
.mobileMenuAni-leave-active {
   transition: all 0.3s ease-out;
}

.mobileMenu {
   position: fixed;
   z-index: 8;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   background-color: rgb(0, 0, 0);
   background-color: rgba(0, 0, 0, 0.5);
}

.mobileMenuContainer {
   background-color: #c4c4c4;
   width: 80vw;
   height: 100%;
   margin-left: 20%;
}

.mobileMenuWrapper {
   display: flex;
   position: relative;
   flex-wrap: wrap;
   justify-content: center;
}

h1 {
   margin: 10px 0px;
   width: 100%;
   text-align: center;
}

button {
   width: 51vw;
   height: 40px;
   margin-bottom: 10px;
}
</style>
