<template>
    <div class="inspirationDiv">
        <div class="inspirationHeader">
            <div class="inspirationTitle">
                <h1>Inspiration</h1>
            </div>
            <div  class="searchInput">
                <input
                    v-model="searchInputText"
                    type="text"
                    @input="searchGame()"
                    ref="inputField"
                />
            </div>
          <button  @click="clearSearch()">Clear</button>
        </div>
        <transition-group
            tag="ul"
            name="inspirationList"
            class="inspirationList"
            ref="inspirationList"
        >
            <li v-for="game in showingGamesList" class="inspirationEntry" :key="game">
                {{ game }}
            </li>
        </transition-group>
    </div>
</template>

<script>
import {mapState} from "vuex";
export default {
    data() {
        return {
            allGamesList: [],
            showingGamesList: [],
            scrollDown: true,
            searchInputText: "",
        };
    },
    computed: {
        ...mapState(["reloadGamesList"]),
    },
    watch: {
        reloadGamesList(newValue) {
            if (newValue) {
                this.reloadGames();
                this.$store.dispatch("reloadGamesList", false);
            }
        }
    },
    methods: {
        clearSearch() {
          this.searchInputText = "";
          this.searchGame();
        },
        searchGame() {
            this.showingGamesList = [];
            for (const game of this.allGamesList) {
                if (this.searchInputText === "" ||
                    game.toLowerCase().replace(/\s/g, "")
                        .includes(this.searchInputText.toLowerCase().replace(/\s/g, ""))) {
                    this.showingGamesList.push(game);
                }
            }
            if (this.searchInputText.replace(/\s/g, "") !== "") {
                this.showingGamesList.sort((n1, n2) => {
                    if (n1 > n2) {
                        return 1;
                    }
                    if (n1 < n2) {
                        return -1;
                    }
                    return 0;
                });
            }
        },
        scrollInspiration() {
            let inspirationListDOM = document.querySelector(".inspirationList");
            let scrollSpeed = 1;
            let currentScrollLocation = 0;

            currentScrollLocation = inspirationListDOM.scrollTop;
            this.scrollDown
                ? inspirationListDOM.scrollBy(0, scrollSpeed)
                : inspirationListDOM.scrollBy(0, -scrollSpeed);

            if (currentScrollLocation === inspirationListDOM.scrollTop) {
                this.scrollDown = !this.scrollDown;
            }
        },
        reloadGames() {
            this.axios({
                method: "get",
                url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/all`,
            })
                .then((response) => {
                    this.allGamesList = response.data;
                    this.searchInputText = "";
                    this.searchGame();
                    this.$store.dispatch("updateHowManyGames", this.allGamesList.length);
                })
                .catch(function(error) {
                    console.log(error);
                });
        }
    },
    mounted() {
        this.reloadGames();
        window.setInterval(() => {
            this.scrollInspiration();
        }, 40);
    },
};
</script>

<style scoped>
.inspirationDiv {
    width: 38vw;
    height: 20vh;
    color: white;
}

.inspirationTitle {
    display: flex;
    flex: auto;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 5px 10px;
}

.searchInput {
    display: flex;
    flex: auto;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 10px;
}

.inspirationHeader {
    display: flex;
    background-color: #333;
    height: 5vh;
    justify-content: center;
    align-items: center;
}

.inspirationList {
    display: inline-block;
    background-color: rgb(66, 66, 66);
    width: 38vw;
    height: 22vh;
    list-style: none;
    overflow: hidden;
}

.inspirationEntry {
    width: 100%;
    max-width: 38vw;
    padding: 0.3vh 0.8vh;
    font-size: 1.2rem;
}

@media only screen and (max-width: 1000px) {
    .inspirationDiv {
        display: none;
    }
}
</style>
