<template>
  <div id="app">
    <h2 id="header">Salut {{ name }} !</h2>
    <Sockets />
    <div id="game">
      <Hand :cards="mockCards()" />
      <label for="messages"> Choose a 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>
    </div>
  </div>
</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 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
  })
);

export default {
  name: "App",
  store: store,
  components: {
    Sockets,
    Hand
  },
  data: function() {
    return {
      message: "WAITING"
    };
  },
  computed: {
    ...mapGetters(["isConnected", "name", "socketMessage"])
  },
  methods: {
    sendMessage: function(message) {
      console.log("User wants to send", message);
      this.$socket.emit("message", message);
    },
    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>
