<template>
   <footer>
      <div class="audioAndButtonsDiv">
         <div class="audioButtonsDiv">
            <button
               class="bigButton"
               :class="{ disabled: disableButtons }"
               :disabled="disableButtons"
               @click="randomizeTrack()"
            >
               <p v-if="!disableButtons"><u>R</u>andomize new track</p>
               <p v-else>Loading...</p>
            </button>
            <button class="bigButton" @click="showAnswer()"><u>S</u>how answer</button>
         </div>
         <div class="audioDiv">
            <audio
               controls
               class="audioPlayer"
               :src="currentTrackSrcFile"
               ref="audioPlayer"
               :onended="trackHasEnded"
            ></audio>
         </div>
      </div>
   </footer>
</template>

<script>
import { mapState } from "vuex";
import arne from "../../arne.js";
export default {
   data() {
      return {
         currentTrackSrcFile: "",
         disableButtons: false,
         loadingBar: "",
      };
   },
   computed: {
      ...mapState([
         "stopAfterCurrent",
         "localPlaylist",
         "hideNextTrack",
         "roundStarted",
         "specialTrackIsPlaying",
      ]),
   },
   methods: {
      async randomizeTrack() {
         console.log("Randomizing track");
         /* Prevents anyone from changing the winning score after the round has started */
         if (this.roundStarted === false) {
            this.$store.dispatch("setRoundStarted", true);
         }
         let trackAddedToQue = false;
         this.disableButtons = true;
         let copyOfPlaylist = this.localPlaylist;
         //If the local playlist of MP3s is empty, wait for a new track to load
         if (copyOfPlaylist.length === 0) {
            console.log("No track preloaded, loading a new one");
            await this.APIgetRandomizedTrack();
            await this.APIaddToQue();
            trackAddedToQue = true;
         }
         //Update the source file for the media player (binded property to Audio tag in the template)
         this.currentTrackSrcFile = window.URL.createObjectURL(copyOfPlaylist[0]);
         /*          this.$nextTick(() => {}); */
         if (!trackAddedToQue) {
            await this.APIaddToQue();
         }
         await this.APIgetPlaylistHistory();

         this.$refs.audioPlayer.play();
         this.$emit("scroll-to-bottom-playlist-history");
         copyOfPlaylist.shift();
         if (this.hideNextTrack) {
            this.$store.dispatch("setCurrentTrackHidden", true);
         } else {
            this.$store.dispatch("setCurrentTrackHidden", false);
         }
         await this.APIgetInfoAboutCurrentTrack();
         await this.randomizeTrackInAdvance();
         this.disableButtons = false;
      },
      async randomizeTrackInAdvance() {
         console.log("Randomizing track in advance");
         try {
            await this.APIgetRandomizedTrack();
         } catch (error) {
            console.log(error);
            console.log("Error: A track couldn't be loaded in advance");
         }
         return new Promise((resolve) => {
            resolve();
         });
      },
      async playSpecificTrack(track) {
         await this.APIplaySpecificTrack(track.SongNo);
         this.$store.dispatch("setCurrentlyLoadingTrack", "");
         await this.APIgetPlaylistHistory();
         this.$store.dispatch("setCurrentTrackHidden", false);
         await this.APIgetInfoAboutCurrentTrack();
      },
      showAnswer() {
         this.$store.dispatch("setCurrentTrackHidden", false);
      },
      startSoundTest() {
         this.$refs.audioPlayer.pause();
         this.currentTrackSrcFile = "sounds/check.mp3";
         this.$store.dispatch("setSpecialTrackIsPlaying", true);
         this.$nextTick(() => {
            this.$refs.audioPlayer.currentTime = 0;
            this.$refs.audioPlayer.play();
         });
      },
      playWelcomeSound() {
         let randomNumber = Math.floor(Math.random() * 10);
         this.$refs.audioPlayer.pause();
         if (randomNumber == 0) {
            this.currentTrackSrcFile = "sounds/sound1.mp3";
         } else if (randomNumber < 5) {
            this.currentTrackSrcFile = "sounds/intro_short.mp3";
         } else {
            this.currentTrackSrcFile = "sounds/intro_long.mp3";
         }
         this.$store.dispatch("setSpecialTrackIsPlaying", true);
         this.$nextTick(() => {
            this.$refs.audioPlayer.currentTime = 0;
            this.$refs.audioPlayer.play();
         });
      },
      playWinningSound() {
         this.$refs.audioPlayer.pause();
         this.currentTrackSrcFile = "sounds/winning.mp3";
         this.$store.dispatch("setSpecialTrackIsPlaying", true);
         this.$nextTick(() => {
            this.$refs.audioPlayer.currentTime = 0;
            this.$refs.audioPlayer.play();
         });
      },
      APIgetRandomizedTrack() {
         return new Promise((resolve, reject) => {
            this.axios({
               method: "get",
               url: `${arne.hostname}/music/rand`,
               responseType: "blob",
               onDownloadProgress: (progressEvent) => {
                  let percentCompleted = Math.round(
                     (progressEvent.loaded * 100) / progressEvent.total
                  );
                  if (percentCompleted % 10 == 0) {
                     //Debug for slow downloading
                     //console.log(percentCompleted);
                  }
               },
            })
               .then((response) => {
                  let mp3 = new Blob([response.data], { type: "audio/mp3" });
                  this.$store.dispatch("updateLocalPlaylist", mp3);
                  this.$nextTick(() => {
                     resolve();
                  });
               })
               .catch(function(error) {
                  console.log("An error happened when fetching the track");
                  console.log(error);
                  reject();
               });
         });
      },
      APIaddToQue() {
         return new Promise((resolve, reject) => {
            this.axios({
               method: "get",
               url: `${arne.hostname}/music/addQue`,
            })
               .then(() => {
                  resolve(false);
               })
               .catch(function(error) {
                  console.log(error);
                  reject();
               });
         });
      },
      APIgetInfoAboutCurrentTrack() {
         return new Promise((resolve, reject) => {
            this.axios({
               method: "get",
               url: `${arne.hostname}/music/info`,
            })
               .then((response) => {
                  let gameInfoObject = {
                     game: response.data.Game,
                     track: response.data.Song.replace(".mp3", ""),
                     songNo: response.data.SongNo,
                  };
                  this.$store.dispatch("setCurrentGame", gameInfoObject.game);
                  this.$store.dispatch("setCurrentTrack", gameInfoObject.track);
                  resolve(false);
               })
               .catch(function(error) {
                  console.log(error);
                  reject();
               });
         });
      },
      APIgetPlaylistHistory() {
         return new Promise((resolve, reject) => {
            this.axios({
               method: "get",
               url: `${arne.hostname}/music/list`,
            })
               .then((response) => {
                  let tracklistArray = response.data;
                  this.$store.dispatch("updatePlaylistHistory", tracklistArray);
                  resolve();
               })
               .catch(function(error) {
                  console.log(error);
                  reject();
               });
         });
      },
      APIplaySpecificTrack(trackNumber) {
         return new Promise((resolve, reject) => {
            this.axios({
               method: "get",
               url: `${arne.hostname}/music?song=${trackNumber}`,
               responseType: "blob",
            })
               .then((response) => {
                  let mp3 = new Blob([response.data], { type: "audio/mp3" });
                  this.currentTrackSrcFile = window.URL.createObjectURL(mp3);
                  this.$nextTick(() => {
                     this.$refs.audioPlayer.play();
                     resolve();
                  });
               })
               .catch(function(error) {
                  console.log(error);
                  reject();
               });
         });
      },
      trackHasEnded() {
         if (this.specialTrackIsPlaying) {
            this.$store.dispatch("setSpecialTrackIsPlaying", false);
            return 0;
         }
         if (!this.stopAfterCurrent) {
            this.randomizeTrack();
         }
      },
   },
   async mounted() {
      await this.APIgetPlaylistHistory();
   },
};
</script>

<style scoped>
footer {
   display: flex;
   position: absolute;
   bottom: 0px;
   justify-content: flex-end;
   width: 100%;
}

.audioAndButtonsDiv {
   display: flex;
   flex-wrap: wrap;
   width: 80vw;
   margin-right: 1vh;
}
.audioButtonsDiv {
   display: flex;
   flex-direction: row-reverse;
   width: 100%;
   margin-bottom: 2vh;
   align-items: center;
}

.audioButtonsDiv button:nth-child(1) {
   margin-right: 3vw;
   width: 200px;
}
.audioButtonsDiv button:nth-child(2) {
   margin-right: 25vw;
   width: 220px;
}
.audioButtonsDiv .bigButton {
   height: 7vh;
}
.disabled {
   opacity: 0.5;
}

.audioDiv {
   width: 100%;
}
.audioDiv audio {
   width: 100%;
   font-size: 2rem;
}
audio::-webkit-media-controls-panel {
   background-color: rgb(185, 185, 185);
}
audio::-webkit-media-controls-current-time-display {
   color: rgb(0, 0, 0);
   font-size: 4em;
}
audio::-webkit-media-controls-time-remaining-display {
   color: rgb(0, 0, 0);
   font-size: 4em;
}

@media only screen and (max-width: 1000px) {
   footer {
      position: static;
      justify-content: center;
   }

   .audioAndButtonsDiv {
      width: 100vw;
      margin: 0;
   }
   .audioButtonsDiv {
      margin-bottom: 2vw;
      font-size: 1rem;
   }

   .audioButtonsDiv button:nth-child(1) {
      margin: 0;
      width: 50vw;
      border-radius: 2px;
   }
   .audioButtonsDiv button:nth-child(2) {
      margin: 0;
      width: 50vw;
      border-radius: 2px;
   }
   .audioButtonsDiv .bigButton {
      height: 22vw;
   }
   .disabled {
      opacity: 0.5;
   }

   .audioDiv {
      width: 100%;
   }
   .audioDiv audio {
      font-size: 1rem;
   }
   audio::-webkit-media-controls-panel {
      background-color: rgb(185, 185, 185);
      border-radius: 2px;
   }
   audio::-webkit-media-controls-current-time-display {
      color: rgb(0, 0, 0);
      font-size: 2em;
   }
   audio::-webkit-media-controls-time-remaining-display {
      color: rgb(0, 0, 0);
      font-size: 2em;
   }
}
</style>
