<template>
  <div>
    <button
      class="btn btn-primary"
      @click="showFilter = !showFilter"
      v-if="display12heroesOnly === false"
    >
      Show/Hide filter
    </button>
    <button
      class="btn btn-primary"
      @click="resetFilter"
      v-if="display12heroesOnly === false"
    >
      Reset filter
    </button>
    <heroes-filter
      v-if="showFilter"
      :filter-options="filterOptions"
      v-model="filter"
    ></heroes-filter>
    <heroes-selector
      v-if="selectHeroes"
      :factionSelected="factionSelected"
    ></heroes-selector>
    <hr />
    <div
      class="row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 mt-3"
    >
      <hero
        v-for="(hero, index) in heroesToDisplay"
        :key="index"
        :hero="hero"
        :selectable="
          selectHeroes === true && ['draft', 'tournament'].includes(deckMode)
        "
      ></hero>
      <!-- v-model="selected" -->
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import Hero from './components/Hero';
import HeroesFilter from './components/HeroesFilter';
import HeroesSelector from './components/HeroesSelector';

let initialFilter = function(filterOptions) {
  return {
    minPower: 0,
    maxPower: 6,
    minCost: 0,
    maxCost: 7,
    faction: filterOptions.faction[0],
    popularity: filterOptions.popularity[0],
    draft: filterOptions.draft[0],
    name: '',
    byName: false
  };
};

export default {
  // selectHeroes : if true it means we are not just displaying the cards
  // we need to offer a way to user to select heroes based on current game mode
  props: {
    selectHeroes: {
      type: Boolean,
      default: false
    },
    display12heroesOnly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showFilter: this.selectHeroes,
      filter: {
        minPower: 0,
        maxPower: 6,
        minCost: 0,
        maxCost: 7,
        faction: '',
        popularity: '',
        draft: '',
        name: '',
        byName: false,
        byId: []
      }
    };
  },
  components: {
    Hero,
    HeroesFilter,
    HeroesSelector
  },
  computed: {
    ...mapGetters({
      heroesBy: 'game/filterHeroes',
      allHeroes: 'game/allHeroes',
      deckMode: 'game/deckMode',
      isPopularityRule: 'game/isPopularityRule',
      myColor: 'game/myColor',
      getSelectableDraftIds: 'game/myDraftIds',
      getTwelveHeroes: 'game/myTwelveHeroes'
    }),
    filterOptions() {
      // init filter options will all
      let factionFilter = ['all', 'orcs', 'humans', 'elves', 'meca', 'none'];
      let popularityFilter = ['without', 'with'];
      let draftFilter = ['all', 'yes', 'no'];
      if (this.selectHeroes === true) {
        draftFilter = ['all'];
        // if tournament and pop rule ON, let's authorize to select between all golems
        if (this.isPopularityRule === true && this.deckMode !== 'tournament') {
          popularityFilter = ['with'];
        } else if (this.isPopularityRule === false) {
          popularityFilter = ['without'];
        }
        if (this.deckMode === 'faction') {
          factionFilter = ['orcs', 'humans', 'elves', 'meca'];
        }
      }
      if (this.display12heroesOnly === true) {
        popularityFilter = ['none'];
      }
      return {
        faction: factionFilter,
        popularity: popularityFilter,
        draft: draftFilter,
        power: true,
        cost: true,
        byName: true
      };
    },
    heroesToDisplay() {
      if (this.display12heroesOnly === true) {
        return this.getTwelveHeroes;
      }
      if (this.selectHeroes === true) {
        return this.heroesBy(this.filter);
      } else {
        return this.allHeroes;
      }
    },
    factionSelected() {
      return this.filter.faction;
    }
  },
  methods: {
    resetFilter() {
      Object.assign(this.filter, initialFilter(this.filterOptions));
    }
  },
  created() {
    Object.assign(this.filter, initialFilter(this.filterOptions));
    this.filter.byId = this.getSelectableDraftIds;
  },
  watch: {
    'filter.byName'(newValue) {
      if (newValue === false) {
        this.filter.name = '';
      }
    }
  }
};
</script>

<style></style>
