<template>
  <b-container id="app">
    <b-row id="header">
      <b-col><h3>Salut {{ name }} !</h3>
      </b-col>
    </b-row>
    <b-row id="sockets">
      <b-col>
        <Sockets v-on:message="newMessage($event)" />
      </b-col>
    </b-row>
    <b-row id="players">
      <b-col id="players-ingame">
        <p>{{ gamers.length }} en jeu</p>
          <Player
            v-for="player in gamers" v-bind:key="player.name"
            :name="player.name" :nb-cards="player.nbCards" :is-playing="player.isPlaying"
            />
      </b-col>
      <b-col id="players-online">
        <p>{{ players.length }} en ligne</p>
        <div class="player-container"
             v-for="player in players" v-bind:key="player.name">
          <Player :name="player.name" :nb-cards="0" :is-playing="false"
                  :is-ready="player.isReady" />
        </div>
      </b-col>
    </b-row>
    <div id="game">
      <label for="messages"> Choisis un message :</label>
      <select v-model="message" name="message" id="messages">
        <option value="WAITING">J'attends</option>
        <option value="READY">Prêt à jouer !</option>
        <option value="BET">Pari plus haut</option>
        <option value="MENTEUR">Menteur !</option>
      </select>
      <button v-on:click="sendMessage(message)">Envoyer</button>
      <Hand :cards="currentCards()" />
    </div>
  </b-container>
</template>

<script>
import Vue from "vue";
import "es6-promise/auto"; // Needed for Promise polyfill
import VueSocketIO from "vue-socket.io";
import Vuex, { mapGetters, mapMutations } from "vuex";
import Hand from "./components/Hand";
import Player from "./components/Player";
import Sockets from "./Sockets";
import { store } from "./vuex-store";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Vue.use(Vuex);
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);

Vue.use(
  new VueSocketIO({
    debug: true,
    connection: "http://localhost:9042",
    vuex: {
      store,
      actionPrefix: "SOCKET_",
      mutationPrefix: "SOCKET_"
    },
    options: { path: "/socket.io/" } //Optional options
  }), store
);

export default {
  name: "App",
  store: store,
  components: {
    Player,
    Sockets,
    Hand
  },
  data: function() {
    return {
      message: "WAITING"
    };
  },
  computed: {
    ...mapGetters(["isConnected", "name", "text",
      "cards", "players", "gamers", "socketMessage"])
  },
  methods: {
    sendMessage: function(message) {
      console.log("User wants to send", message);
      this.$socket.emit("message", message);
    },
    newMessage: function(data) {
      console.log("App received new state:", data.data);
      this.handleState(data);
    },
    handleState: function(data) {
      console.log("hS: ", data);
      if (data.message === "NewGame") {
        console.log("New Game!");
      }
    },
    currentCards() {
      let currentState = this.socketMessage;
      // console.log("curCards! Last message:", JSON.stringify(currentState));
      if (currentState["data"]) {
        if (currentState["data"]["cards"]) {
          console.log("Refreshing cards UI:", this.cards);
          return this.cards;

        } else return this.mockCards();
      } else return this.mockCards();

      // console.log("Current socket.sMs now:", Sockets.sockets.socketMessages);
    },
    mockCards() {
      return [
        // { value: "ace", color: "hearts" },
        // { value: "ace", color: "clubs" },
        // { value: "ace", color: "diamonds" },
        { value: "ace", color: "spades" }
      ];
    },
    ...mapMutations(["setName"])
    // ...mapActions(['setNumberToRemoteValue']),
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

#game {
  margin-top: 20px;
}

.card-deck {
  justify-content: center;
}
</style>
