<template>
  <div>
    <div>
      <h4>{{ instructions }}</h4>
    </div>
    <button
      class="btn btn-primary"
      v-if="deckMode === 'faction'"
      :disabled="!isItMyTurn"
      @click="submitFaction(factionSelected)"
    >
      {{ factionButtonText }}
    </button>
    <div v-if="deckMode === 'draft' || deckMode === 'tournament'">
      <div v-if="myTwelveHeroes.length > 0 || heroesSelected.length > 0">
        <hr />
        <h3>My Heroes</h3>

        <div
          class="row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 mt-3"
        >
          <div class="col mb-4" v-for="hero in myTwelveHeroes" :key="hero.id">
            <hero :hero="hero" :selectable="false" :removable="false"></hero>
          </div>

          <div class="col mb-4" v-for="hero in heroesSelected" :key="hero.id">
            <hero
              :hero="hero"
              :selectable="false"
              :removable="isItMyTurn"
            ></hero>
          </div>
        </div>
      </div>
      <button
        class="btn btn-primary"
        v-if="showValidSelectionBtn"
        @click="submitChosenIds"
      >
        {{ validButtonText }}
      </button>
    </div>
  </div>
</template>

<script>
import Hero from './Hero';
import { mapGetters, mapActions } from 'vuex';
import { Constants } from 'const/constants';
export default {
  props: ['factionSelected'],
  components: {
    Hero
  },
  computed: {
    ...mapGetters({
      deckMode: 'game/deckMode',
      isItMyTurn: 'game/isItMyTurn',
      myTwelveHeroes: 'game/myTwelveHeroes',
      heroesByIds: 'game/heroesByIds',
      chosenIds: 'chosenIds'
    }),
    factionButtonText() {
      if (this.isItMyTurn === true) {
        return 'Select Faction ' + this.factionSelected;
      } else {
        return 'Wait other player...';
      }
    },
    heroesSelected() {
      return this.heroesByIds(this.chosenIds);
    },
    showValidSelectionBtn() {
      if (this.isItMyTurn === false) {
        return false;
      }
      if (
        (this.deckMode === 'draft' &&
          this.chosenIds.length === Constants.NB_CARDS_TO_PICK_DRAFT) ||
        (this.deckMode === 'tournament' &&
          this.chosenIds.length === Constants.NB_CARDS_TO_PICK_TOURNAMENT)
      ) {
        return true;
      } else {
        return false;
      }
    },
    validButtonText() {
      if (this.isItMyTurn === false) {
        return 'Waiting other player';
      } else {
        return 'Valid Selection';
      }
    },
    instructions() {
      let instructions = 'Waiting for other player ...';
      if (this.isItMyTurn) {
        switch (this.deckMode) {
          case 'faction':
            instructions = `Select a faction of 12 Heroes to play with`;
            break;
          case 'draft':
            instructions = `Select 2 heroes below and Valid selection`;
            break;
          case 'tournament':
            instructions = `Select 12 heroes below and Valid selection`;
            break;

          default:
            break;
        }
      }
      return instructions;
    }
  },
  methods: {
    ...mapActions({
      submitFaction: 'game/submitMyFaction',
      submitChosenIds: 'game/submitMyChosenIds'
    })
  }
};
</script>

<style scoped>
div {
  color: antiquewhite;
}
p {
  font-size: 20px;
}
</style>
