<template>
  <div
    class="card"
    :style="{ width: '15rem', flex: '0 0 auto', 'margin-right': '3px' }"
  >
    <div class="card-body">
      <h5 class="card-title">{{ hero.name }} ({{ hero.faction }})</h5>
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Power : {{ hero.power }}</li>
      <li class="list-group-item">Cost : {{ hero.cost }}</li>
    </ul>
    <div class="card-body">
      <p class="card-text text-justify" style="font-size:16px;">
        {{ hero.ability.desc }}
      </p>
    </div>
    <div class="text-center mb-2" v-if="selectable">
      <button
        class="btn btn-primary"
        style="width:50%;"
        @click="selectId(hero.id) && removeInMyDraftIds(hero.id)"
      >
        Select
      </button>
    </div>
    <div class="text-center mb-2" v-if="removable">
      <button
        class="btn btn-primary"
        style="width:50%;"
        @click="unselectId(hero.id) && addInMyDraftIds(hero.id)"
      >
        Remove
      </button>
    </div>
    <div
      class="text-center mb-2"
      v-if="hero.possibleActions.includes('replace')"
    >
      <button
        class="btn btn-primary"
        style="width:50%;"
        @click="toggleSelectId"
      >
        {{ replaceBtnText }}
      </button>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
export default {
  props: ['hero', 'selectable', 'removable'],
  data() {
    return {};
  },
  methods: {
    ...mapActions({
      selectId: 'selectId',
      unselectId: 'unselectId',
      clearChosenIds: 'clearChosenIds',
      addInMyDraftIds: 'game/addInMyDraftIds',
      removeInMyDraftIds: 'game/removeInMyDraftIds'
    }),
    toggleSelectId() {
      if (this.chosenIds.includes(this.hero.id)) {
        this.unselectId(this.hero.id);
      } else {
        this.selectId(this.hero.id);
      }
    }
  },
  computed: {
    ...mapGetters({
      chosenIds: 'chosenIds'
    }),
    replaceBtnText() {
      if (this.chosenIds.includes(this.hero.id)) {
        return 'Undo (' + (this.chosenIds.indexOf(this.hero.id) + 1) + ')';
      } else {
        return 'Replace';
      }
    }
  },
  filters: {
    draftText(value) {
      if (value === true) {
        return '(draft)';
      } else {
        return '';
      }
    }
  }
};
</script>

<style scoped>
.card {
  color: black;
}
</style>
