<template>
  <div>
    <button
      class="btn btn-primary"
      v-if="deckMode === 'faction'"
      :disabled="!isItMyTurn"
      @click="submitFaction(factionSelected)"
    >
      {{ factionButtonText }}
    </button>
    <div v-if="deckMode === 'tournament'">
      Here logic to select tournament deck
    </div>
    <div v-if="deckMode === 'draft'">
      Here logic to select draft deck
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
export default {
  props: ['factionSelected'],
  computed: {
    ...mapGetters({
      deckMode: 'game/deckMode',
      isItMyTurn: 'game/isItMyTurn'
    }),
    factionButtonText() {
      if (this.isItMyTurn === true) {
        return 'Select Faction ' + this.factionSelected;
      } else {
        return 'Wait other player...';
      }
    }
  },
  methods: {
    ...mapActions({
      submitFaction: 'game/submitMyFaction'
    })
  }
};
</script>

<style></style>
