<template>
  <div class="lobby">
    <user-ribbon class="lobby-ribbon" :username="this.user.login" :pathToImage="this.user.avatar"/>
    <div class="lobby-content">
      <div class="lobby-column">
        <page-title pagetitle="Parties"/>
        <form class="lobby-menu-form" action="#" @submit.prevent="onSubmitMenu">
            <button-text id="profile" width="100%" height="130px" text="Profil"/>
            <button-text id="new" width="100%" height="130px" text="Créer une partie"/>
        </form>
        <form class="lobby-menu-form" action="#" @submit.prevent="onSubmitJoinPrivate">
            <text-input class="lobby-text-input" id="code" label="Code de la partie"/>
            <button-text id="new" width="100%" height="130px" text="Rejoindre partie privée"/>
        </form>
        
      </div>
      <div class="lobby-column games-list">
        
        <form class="lobby-games" action="#" @submit.prevent="onSubmitJoinPublic">
            <button class="join-game-button" v-for="game of games" :key="game.ID_GAME" :id="game.ID_GAME" width="100%" height="80px" @mouseover="mouseOver(game.ID_GAME)" @mouseleave="mouseOver(0)">
              Partie de {{game.LOGIN}} : ({{game.NB_PLAYER}}/4)
              <p class="hidden-join-tag" :id="'join-tag-'+game.ID_GAME" style="visibility: hidden;">Rejoindre</p>
            </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import UserRibbon from '@/components/UserRibbon.vue'
import PageTitle from '@/components/PageTitle.vue'
import ButtonText from '@/components/ButtonText.vue'
import TextInput from '@/components/form/TextInput.vue'
import User from '@/model/user.js'

export default {
  name: 'lobby',
  components: {
    UserRibbon,
    PageTitle,
    ButtonText,
    TextInput
  },
  methods: {
    getUserInfo: async function(){
      let userJson = JSON.parse(localStorage.getItem('user'));
      let user = new User(userJson.id_user, userJson.id_role, userJson.login, userJson.avatar, userJson.lastname, userJson.firstname, userJson.mail);
      let token = userJson.jwt_token;
      this.user = user;
      this.token = token;
    },

    updateGames: async function(){
      const head = new Headers();
      head.append('Authorization', 'bearer '+this.token);
      await fetch(this.$apiRoot+'/game/public', {method: 'GET', headers: head})
      .then(response => response.json())
      .then(json => this.games = json)
      .catch(() => {
        alert("Votre session a expiré");
        this.$router.push("/");
      });
    },
    /*
    * using the id of the hovered button, highlight (id>0) or set back to default style (id=0) the relevant button 
    */
    mouseOver: function(id){
      //id is 0 when @mouseleave is triggered : all the highligted buttons get their default style
      if (id ==0) {
        for(element of document.getElementsByClassName("button-over")){
          element.classList.remove("button-over");
          //and the join tag is hidden
          document.getElementById('join-tag-'+element.id).style.visibility = "hidden";
        }
      }
      //id is not 0 when the mouse gets over a button which is highlighted with the button-over class
      else{
        var element = document.getElementById(id);
        element.classList.add("button-over");
        //and the join tag is displayed
        document.getElementById('join-tag-'+element.id).style.visibility = "visible";

      }
    },

    onSubmitMenu: function(){
      if (event.submitter.id=='profile') {
        this.$router.push('profile/'+this.user.id_user);
      }
      if (event.submitter.id=='new') {
        this.$router.push('new');
      }
    },
    onSubmitJoinPrivate: function(){
      this.$router.push('joinprivate/'+document.getElementById('code').value);

    },
    onSubmitJoinPublic: function(event){
      this.$router.push('joinpublic/'+event.submitter.id);

    }
  },
  data () {
    return {
      user: [],
      token: '',
      games: []
    }
    
  },

  beforeCreate () {
    if (localStorage.getItem('user') == null) {
      alert('Vous devez être connecté');
      this.$router.push('/');
    }
  },

  created () {
    this.getUserInfo();
    
    this.handle = setInterval(this.updateGames, 1000)
  },

  destroyed () {
    clearInterval(this.handle);
  }
}
</script>

<style>
.lobby-ribbon{
  margin-left:auto; 
  margin-right:0;
  height: 10vh;
}

.lobby-content{
  display: flex;
  flex-direction: row;
  max-width: 100%;
  height: 80vh;
}

.lobby-column{
  width:50%;
  display: flex;
  flex-direction: column;
  padding: 0 60px;
}

.lobby-menu-form{
  width:100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}
.lobby-games{
  background: rgba(196, 196, 196, 0.6);
  width:100%;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  height: inherit;
  overflow:auto
}

.join-game-button{
  background: rgba(196, 196, 196, 0.6);
  border: none;
  height: 30px;
  text-align: left;
  font-family: Shojumaru;
  font-size: 20px;
  margin: 10px 20px;
  flex-direction: row;
  display: flex;
}

.join-game-button p{
  margin: 0 0 0 auto;
}

.button-over{
  background: green;
}

.hidden-join-tag{
  text-align: right;
}

.lobby{
  display: flex;
  flex-direction: column;
  max-height: 100vh;
}

.lobby-text-input{
  margin: 0;
  padding: 20px;
  background: rgba(196, 196, 196, 0.6);
  margin-bottom: 36px;
}

.games-list{
  height: 100%;
}
</style>
