<template>
    <div class="playersWindowDiv">
        <div @click="toggleDisplay" class="playerListTitle">
            <img v-if="display" class="arrow arrowToggle" src="keyboard_arrow_up-black-36dp.svg" />
            <img v-else class="arrow arrowToggle" src="keyboard_arrow_down-black-36dp.svg" />
            <h1>Players</h1>
            <img
                src="person_add_alt_1-black-36dp.svg"
                alt="addPlayer"
                class="addPlayerIMG"
                @click="toggleNewPlayerInput()"
            />
        </div>
        <transition-group tag="div" v-if="display" name="playerList" class="playerList">
            <div class="player" v-for="player in listOfPlayers" :key="player.playerName">
                <p>{{ player.playerName }}: {{ player.score }}</p>
                <img
                    class="profilePicture"
                    :src="player.profile"
                    @click="openCharacterModal(player.playerName)"
                />
                <button @click="changeScore(player.playerName, 1)">+1</button>
                <button @click="changeScore(player.playerName, -1)">-1</button>
                <img
                    src="person_remove-black-36dp.svg"
                    @click="removePlayer(player.playerName)"
                    alt=""
                />
            </div>
            <div class="newPlayerInput" v-if="showNewPlayerInput === true">
                <input
                    v-model="newPlayerInputText"
                    type="text"
                    @keypress.enter="addNewPlayer()"
                    ref="inputField"
                    placeholder="Player name"
                />
                <button @click="addNewPlayer()">Add</button>
            </div>
        </transition-group>
        <winning-modal ref="winningModal"></winning-modal>
        <character-modal ref="characterModal"></character-modal>
    </div>
</template>

<script>
import { mapState } from "vuex";
import winningModal from "../items/winningModal.vue";
import characterModal from "../items/characterModal.vue";
export default {
    components: {
        winningModal,
        characterModal,
    },
    data() {
        return {
            showNewPlayerInput: false,
            newPlayerInputText: "",
            display: true,
        };
    },
    computed: {
        ...mapState(["listOfPlayers", "winningScore"]),
    },
    methods: {
        removePlayer(playerName) {
            this.$store.dispatch("removePlayer", playerName);
        },
        newPlayerValidation() {
            /* Validation variables */
            let errors = [];
            let newName = this.newPlayerInputText;

            /* Check for empty value */
            if (newName.trim() === "") {
                errors.push("No player name was entered");
            }

            /* Prepare data of players and check for already entered ones */
            let copyOfPlayerList = this.listOfPlayers;
            let arrayOfPlayers = copyOfPlayerList.map((player) => player.playerName.toLowerCase());
            if (arrayOfPlayers.includes(newName.toLowerCase())) {
                errors.push("This player already exists");
            }

            /* Check amount of players */
            if (arrayOfPlayers.length > 6) {
                errors.push("Too many players already exists");
            }

            /* If everything went fine, return an empty  */
            return errors;
        },
        addNewPlayer() {
            let errors = this.newPlayerValidation();
            if (errors.length === 0) {
                this.$store.dispatch("addNewPlayer", this.newPlayerInputText);
                this.newPlayerInputText = "";
            } else {
                console.log(errors);
            }
        },
        toggleNewPlayerInput() {
            this.showNewPlayerInput = !this.showNewPlayerInput;
            if (this.showNewPlayerInput === true) {
                this.$nextTick(() => this.$refs.inputField.focus());
            }
        },
        changeScore(playerName, score) {
            let payload = {
                playerName: playerName,
                score: score,
            };
            this.$store.dispatch("changePlayerScore", payload);
            for (let i = 0; i < this.listOfPlayers.length; i++) {
                /* If a player received their first point */
                if (this.listOfPlayers[i].score == 1 && this.listOfPlayers[i].welcomed === false) {
                    let payload = {
                        playerName: playerName,
                        welcomeSet: true,
                    };
                    this.$store.dispatch("changePlayerWelcomed", payload);
                    this.$emit("play-welcome-sound");
                }
                /* If a player reach match point */
                if (this.listOfPlayers[i].score === this.winningScore-1) {
                    let payload = {
                        playerName: playerName,
                        matchPointSet: true,
                    };
                    this.$store.dispatch("changePlayerMatchPoint", payload);
                    this.$emit("play-match-point-sound");
                }
                /* If a player won */
                if (this.listOfPlayers[i].score === this.winningScore) {
                    this.$refs.winningModal.openModal(this.listOfPlayers[i].playerName);
                    this.$emit("play-winning-sound");
                }
            }
        },
        openCharacterModal(playerName) {
            this.$refs.characterModal.openModal(playerName);
        },
        getProfileSrc(profileToGet) {
            console.log(this.listOfPlayers[0]);
            let src = `characters/${profileToGet}`;
            console.log(src);
            return src;
        },
        toggleDisplay(event) {
            if (event.target.classList[0] != "addPlayerIMG") {
                if (window.innerWidth < 600) {
                    this.display = !this.display;
                }
            }
        },
    },
};
</script>

<style scoped>
.playerList-enter-from,
.playerList-leave-to {
    opacity: 0;
}
.playerList-enter-to,
.playerList-leave-from {
    opacity: 1;
}
.playerList-enter-active {
    transition: all 0.5s ease-out;
}
.playerList-leave-active {
    position: absolute;
    transition: all 0.2s ease-in;
}
.playerList-move {
    transition: 0.25s;
    transition-property: transform, opacity;
}
.playerList-move.newPlayerInput {
    transition: 0.2s;
    transition-property: transform;
}
/* End of Animation block */

.playersWindowDiv {
    display: inline-block;
    width: 38vw;
    color: white;
}
.playerListTitle {
    display: flex;
    width: 100%;
    background-color: #333;
    height: 5vh;
    align-content: center;
    align-items: center;
    text-align: center;
}
.playerListTitle h1 {
    text-align: center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    flex-grow: 100;
}
.playerListTitle .addPlayerIMG {
    justify-self: flex-end;
    margin-left: auto;
    margin-right: 5px;
    flex-grow: 1;
    filter: invert(66%) sepia(96%) saturate(2783%) hue-rotate(1deg) brightness(105%) contrast(103%);
}
.playerListTitle .arrow {
    flex-grow: 1;
}
.playerListTitle .arrowToggle {
    display: none;
}
.playerList {
    display: inline-block;
    background-color: rgb(66, 66, 66);
    min-height: 37vh;
}
.playerList .player {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    width: 38vw;
    height: 6vh;
    font-size: 1.8rem;
    align-content: center;
    align-items: center;
}

.playerList .player p {
    margin-left: 5px;
    margin-right: auto;
}

.playerList .player .profilePicture {
    width: 100px;
    height: 50px;
    background-color: red;
    margin-right: 2vw;
    cursor: pointer;
}

.playerList .player button {
    align-content: center;
    padding: 3px;
    width: 50px;
    height: 4vh;
    margin-right: 0.6vw;
    line-height: 0;
}

.playerList .player button:last-of-type {
    margin-right: 3vw;
}

.playerList .player img {
    margin-right: 5px;
}

.newPlayerInput {
    display: flex;
    width: 38vw;
    height: 50px;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
    background-color: rgb(107, 106, 106);
}

.newPlayerInput p {
    font-size: 1.3rem;
    flex-grow: 1;
    text-align: center;
}

.newPlayerInput input {
    height: 70%;
    width: 250px;
    font-size: 1.5rem;
    margin: 0 5px;
    text-align: center;
}

.newPlayerInput button {
    margin: 0 10px;
    height: 80%;
    align-self: center;
}

@media only screen and (max-width: 1000px) {
    .playersWindowDiv {
        width: 100%;
    }
    .playerListTitle {
        height: 10vw;
        font-size: 0.8rem;
    }
    .playerListTitle .addPlayerIMG {
        height: 9vw;
    }
    .playerListTitle .arrowToggle {
        display: block;
        max-height: 100%;
        left: 0;
        filter: invert(77%) sepia(8%) saturate(6%) hue-rotate(317deg) brightness(95%) contrast(87%);
    }
    .playerList {
        width: 100%;
        height: 60vw;
        min-height: 190px;
        overflow: scroll;
    }
    .playerList .player {
        width: 100vw;
        height: 12vw;
        font-size: 1rem;
    }
    .playerList .player .profilePicture {
        width: 60px;
        height: 30px;
        margin-right: 1.5vw;
    }
    .playerList .player button {
        align-content: center;
        padding: 3px;
        width: 45px;
        height: 10vw;
        margin-right: 1vw;
        line-height: 0;
    }

    .newPlayerInput {
        width: 100%;
        height: 30px;
    }
    .newPlayerInput input {
        height: 90%;
        width: 200px;
        font-size: 1.2rem;
    }
    .newPlayerInput button {
        margin: 0 10px;
        height: 40px;
        border-radius: 2px;
    }
}
</style>
