<template>
    <div class="theMainDiv">
        <div class="mainFirstRow">
            <currently-playing></currently-playing>
            <inspiration-window></inspiration-window>
        </div>
        <div class="mainSecondRow">
            <playlist-history
                ref="playlistHistory"
                @play-selected-track="playSelectedTrack"
            ></playlist-history>
            <players-window
                @play-welcome-sound="playWelcomeSound"
                @play-match-point-sound="playMatchSound"
                @play-winning-sound="playWinningSound"
            ></players-window>
        </div>
        <extra-buttons
            v-if="$parent.displayWhenDesktop"
            @start-sound-test="startSoundTest"
        ></extra-buttons>
        <the-footer
            ref="theFooter"
            @scroll-to-bottom-playlist-history="scrollToBottomPlaylistHistory"
        ></the-footer>
        <!-- <the-footer ref="theFooter"></the-footer> -->
    </div>
</template>

<script>
import currentlyPlaying from "../items/CurrentlyPlaying.vue";
import inspirationWindow from "../items/InspirationWindow.vue";
import playersWindow from "../items/playersWindow.vue";
import playlistHistory from "../items/playlistHistory.vue";
import extraButtons from "../items/extraButtons.vue";
import theFooter from "./TheFooter.vue";

export default {
    components: {
        currentlyPlaying,
        playersWindow,
        playlistHistory,
        inspirationWindow,
        extraButtons,
        theFooter,
    },
    methods: {
        playSelectedTrack(track) {
            this.$refs.theFooter.playSpecificTrack(track);
        },
        scrollToBottomPlaylistHistory() {
            this.$refs.playlistHistory.scrollToBottom();
        },
        startSoundTest() {
            this.$refs.theFooter.startSoundTest();
        },
        playWelcomeSound() {
            this.$refs.theFooter.playWelcomeSound();
        },
        playMatchSound() {
            this.$refs.theFooter.playMatchSound();
        },
        playWinningSound() {
            this.$refs.theFooter.playWinningSound();
        },
    },
};
</script>

<style scoped>
.theMainDiv {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.mainFirstRow {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0.5vw;
}
.mainSecondRow {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0 0.5vw;
}

@media only screen and (max-width: 1000px) {
    .mainFirstRow {
        margin: 0;
        margin-top: 0.5vw;
    }
    .mainSecondRow {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin: 0;
        margin-top: 0.5vw;
    }
}
</style>
