<template>
    <div class="extraButtonsDiv">
        <button @click="resetPlaylist">Reset playlist</button>
        <button @click="resetPoints">Reset points</button>
        <button @click="syncGames">Sync games</button>
        <button @click="startSoundTest">Sound test</button>
    </div>
</template>

<script>
import arne from '../../arne.js'
export default {
    data() {
        return {
            emptyPlaylist: [],
        };
    },
    methods: {
        async resetPoints() {
            this.$store.dispatch("resetPlayerScore");
            this.$store.dispatch("resetPlayerWelcomed");
            this.$store.dispatch("resetPlayerMatchPoint");
            this.$store.dispatch("setRoundStarted", false);
        },
        async resetPlaylist() {
            await this.APIresetPlaylist();
            this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist);
            this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
            this.$store.dispatch("setCurrentTrackHidden", false);
        },
        async syncGames() {
            await this.APIsyncGames();
            await this.APIresetPlaylist();
            this.$store.dispatch("resetPlayerScore");
            this.$store.dispatch("resetPlayerWelcomed");
            this.$store.dispatch("resetPlayerMatchPoint");
            this.$store.dispatch("setRoundStarted", false);
            this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist);
            this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
            this.$store.dispatch("setCurrentTrackHidden", false);
            this.$store.dispatch("reloadGamesList", true);
        },
        startSoundTest() {
            this.$emit("start-sound-test");
        },
        APIresetPlaylist() {
            return new Promise((resolve, reject) => {
                this.axios({
                    method: "get",
                    url: `${arne.hostname}/music/reset`,
                })
                    .then(() => {
                        resolve();
                    })
                    .catch(function(error) {
                        console.log(error);
                        reject();
                    });
            });
        },
        APIsyncGames() {
            return new Promise((resolve, reject) => {
                this.axios({
                    method: "get",
                    url: `${arne.hostname}/sync`,
                })
                    .then(() => {
                        resolve();
                    })
                    .catch(function(error) {
                        console.log(error);
                        reject();
                    });
            });
        },
    },
};
</script>

<style scoped>
.extraButtonsDiv {
    display: flex;
    margin-top: 2px;
    margin-left: 10px;
}

button {
    display: flex;
    align-items: center;
    height: 65%;
    margin-right: 0.4vw;
    border-radius: 10px;
    border-width: 1px;
}

@media only screen and (max-width: 1000px) {
    .extraButtonsDiv {
        display: flex;
        position: relative;
        flex-wrap: wrap;
        justify-content: center;
    }

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