<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";
export default {
    data() {
        return {
            currentTrackSrcFile: "",
            disableButtons: false,
            loadingBar: "",
        };
    },
    computed: {
        ...mapState([
            "stopAfterCurrent",
            "localPlaylist",
            "hideNextTrack",
            "roundStarted",
            "specialTrackIsPlaying",
            "addPlayed",
            "lowPlayed",
        ]),
    },
    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;
            setTimeout(() => this.isHidden = false, 2000);
            //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");
                if (this.lowPlayed) {
                    await this.APIgetRandomizedLowTrack();
                } else {
                    await this.APIgetRandomizedTrack();
                }
                if (this.addPlayed) {
                    await this.APIaddPlayed();
                }
                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]);
            if (!trackAddedToQue) {
                if (this.addPlayed) {
                    await this.APIaddPlayed();
                }
                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 {
                if (this.lowPlayed) {
                    await this.APIgetRandomizedLowTrack();
                } else {
                    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();
            });
        },
        playMatchSound() {
            this.$refs.audioPlayer.pause();
            this.currentTrackSrcFile = "sounds/sound0.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: `${window.__RUNTIME_CONFIG__.API_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();
                    });
            });
        },
        APIgetRandomizedLowTrack() {
            return new Promise((resolve, reject) => {
                this.axios({
                    method: "get",
                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/rand/low`,
                    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();
                    });
            });
        },
        APIaddPlayed() {
            return new Promise((resolve, reject) => {
                this.axios({
                    method: "get",
                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/addPlayed`,
                })
                    .then(() => {
                        resolve(false);
                    })
                    .catch(function(error) {
                        console.log(error);
                        reject();
                    });
            });
        },
        APIaddToQue() {
            return new Promise((resolve, reject) => {
                this.axios({
                    method: "get",
                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/addQue`,
                })
                    .then(() => {
                        resolve(false);
                    })
                    .catch(function(error) {
                        console.log(error);
                        reject();
                    });
            });
        },
        APIgetInfoAboutCurrentTrack() {
            return new Promise((resolve, reject) => {
                this.axios({
                    method: "get",
                    url: `${window.__RUNTIME_CONFIG__.API_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: `${window.__RUNTIME_CONFIG__.API_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: `${window.__RUNTIME_CONFIG__.API_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: 0;
    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>
