<template>
  <div class="lobby">
    <user-ribbon class="lobby-ribbon" username="Josie Péritel" pathToImage="avatar/criquette.jpg"/>
    <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" :id="game.id" width="100%" height="80px" @mouseover="mouseOver(game.id)" @mouseleave="mouseOver(0)">
              {{game.name}}
              <p class="hidden-join-tag" :id="'join-tag-'+game.id" 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: {
    mouseOver: function(id){
      if (id ==0) {
        for(element of document.getElementsByClassName("button-over")){
          element.classList.remove("button-over");
          document.getElementById('join-tag-'+element.id).style.visibility = "hidden";
        }
      }else{
        var element = document.getElementById(id);
        element.classList.add("button-over");
        console.log(document.getElementById('join-tag-'+element.id).style.visibility);
        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: 1, name: "Partie 1"},
        {id: 2, name: "Partie 2"},
        {id: 3, name: "Partie 3"},
        {id: 4, name: "Partie 4"},
       
      ]
    }
    
  }
}
</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 *{
/*  background: rgba(196, 196, 196, 0.2);
  */
}

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

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