<template>
   <nav>
      <p class="title">Music Player Randomizer</p>
      <div class="navMenuWrapper">
         <button class="settingsButton" @click="showSettingsModal">
            Settings
         </button>
         <button class="statisticsButton" @click="showStatisticsModal">
            Statistics
         </button>
         <button class="aboutButton" @click="showAboutModal">About</button>
      </div>
      <p v-if="!$parent.displayWhenDesktop" class="mobileMenuButton" @click="showMobileMenu">
         Menu
      </p>
      <settingsModal ref="settingsModal"></settingsModal>
      <statisticsModal ref="statisticsModal"></statisticsModal>
      <aboutModal ref="aboutModal"></aboutModal>
      <mobileMenu
         ref="mobileMenu"
         @start-sound-test="startSoundTest"
         @show-settings-modal="showSettingsModal"
         @show-statistics-modal="showStatisticsModal"
         @show-about-modal="showAboutModal"
      ></mobileMenu>
   </nav>
</template>

<script>
import aboutModal from "../items/aboutModal.vue";
import statisticsModal from "../items/statisticsModal.vue";
import settingsModal from "../items/settingsModal.vue";
import mobileMenu from "../items/mobileMenu.vue";

export default {
   components: {
      aboutModal,
      settingsModal,
      statisticsModal,
      mobileMenu,
   },
   methods: {
      playSelectedTrack(track) {
         this.$refs.theFooter.playSpecificTrack(track);
      },
      scrollToBottomPlaylistHistory() {
         this.$refs.playlistHistory.scrollToBottom();
      },
      showAboutModal() {
         this.$refs.aboutModal.openModal();
      },
      showSettingsModal() {
         this.$refs.settingsModal.openModal();
      },
      showStatisticsModal() {
         this.$refs.statisticsModal.openModal();
      },
      showMobileMenu() {
         this.$refs.mobileMenu.openMobileMenu();
         this.showMobileMenuContent();
      },
      showMobileMenuContent() {
         setTimeout(() => {
            this.$refs.mobileMenu.openMobileMenuContent();
         }, 20);
      },
      startSoundTest() {
         this.$emit("start-sound-test");
      },
   },
};
</script>

<style scoped>
nav {
   background: #333;
   display: flex;
   align-content: center;
   align-items: center;
   width: 100%;
   height: 5vh;
}

.title {
   color: #fff;
   font-size: 2rem;
   margin-left: 2vw;
   font-style: normal;
}

.navMenuWrapper {
   margin-left: auto;
   height: 5vh;
}

.navMenuWrapper button {
   background: #333;
   color: #ff9c00;
   font-size: 1.3rem;
   outline: none;
   cursor: pointer;
   border: none;
   border-radius: 3px;
   height: 100%;
   padding: 0 20px;
}

.navMenuWrapper button:hover {
   background-color: #555;
}

/* Mobile */
@media only screen and (max-width: 1000px) {
   nav {
      justify-content: center;
      height: 10vw;
   }
   .title {
      font-size: 1.2rem;
      margin: 0;
      padding: 0;
      width: 100%;
      margin-left: 5px;
      /* text-align: ; */
   }

   .navMenuWrapper {
      display: none;
   }

   .mobileMenuButton {
      color: white;
      background: grey;
      padding: 6px;
      border-top-left-radius: 7px;
      border-bottom-left-radius: 7px;
   }
}
</style>
