<template>
  <div class="lobby">
    <user-ribbon class="lobby-ribbon" username="Josie Péritel"/>
    <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'


export default {
  name: 'lobby',
  components: {
    UserRibbon,
    PageTitle,
    ButtonText,
    TextInput
  },
  methods: {
    updateGames: async function(){
      let response = await fetch(this.$apiRoot+'/game/public', {method: 'GET'});
      if (response.ok){
        let json = await response.json();
        this.games=json;
      }
    },
    /*
    * 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');
      }
      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 {
      games: [
          {
            "ID_GAME": "2",
            "NB_PLAYER": "1",
            "LOGIN": "admin"
          }
      ]
    }
    
  },

  mounted () {
    this.handle = setInterval(this.updateGames, 1000)
  }
}
</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>