<template>
   <div class="inspirationDiv">
      <div class="inspirationTitle">
         <h1>Inspiration</h1>
      </div>
      <transition-group
         tag="ul"
         name="inspirationList"
         class="inspirationList"
         ref="inspirationList"
      >
         <li v-for="game in allGamesList" class="inspirationEntry" :key="game">
            {{ game }}
         </li>
      </transition-group>
   </div>
</template>

<script>
import arne from '../../arne.js'
import {mapState} from "vuex";
export default {
   data() {
      return {
         allGamesList: [],
         scrollDown: true,
      };
   },
    computed: {
        ...mapState(["reloadGamesList"]),
    },
    watch: {
        reloadGamesList(newValue) {
            if (newValue) {
                this.reloadGames();
                this.$store.dispatch("reloadGamesList", false);
            }
        }
    },
   methods: {
      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: `${arne.hostname}/music/all`,
           })
               .then((response) => {
                   this.allGamesList = response.data;
                   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;
   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>
