<template>
  <div>
    <b-overlay :show="overlay" rounded="sm" @shown="onShown" @hidden="onHidden">
      <b-row>
        <b-col cols="5">
          <ennemy-hand></ennemy-hand>
        </b-col>
        <b-col>
          <heroes-pile
            :nbCardsInHeroesPile="hisNbOfHeroesIn('Pile')"
            :nbCardsToDraw="0"
          ></heroes-pile>
        </b-col>
        <b-col>
          <discard-pile
            :heroesInDiscard="hisHeroesIn('Discard')"
          ></discard-pile>
        </b-col>
      </b-row>
      <b-row>
        <b-col>
          <div
            style="height:300px;
  display: flex;
  justify-content: center;
  align-items: center;"
          >
            <h3>
              Camps and combat zones will be here
            </h3>
          </div>
        </b-col>
      </b-row>
      <b-row>
        <b-col cols="8">
          <my-hand></my-hand>
        </b-col>
        <b-col>
          <heroes-pile
            :nbCardsInHeroesPile="myNbOfHeroesIn('Pile')"
            :nbCardsToDraw="canIDrawCards"
          ></heroes-pile>
        </b-col>
        <b-col>
          <discard-pile :heroesInDiscard="myHeroesIn('Discard')"></discard-pile>
        </b-col>
      </b-row>
      <template v-slot:overlay>
        <div class="text-center">
          <heroes-display></heroes-display>
          <b-button
            ref="cancel"
            variant="outline-danger"
            size="sm"
            aria-describedby="cancel-label"
            @click="overlay = false"
          >
            Cancel
          </b-button>
        </div>
      </template>
    </b-overlay>
  </div>
</template>

<script>
import HeroesDisplay from '../../common/heroes-display/HeroesDisplay';
import MyHand from './components/MyHand';
import EnnemyHand from './components/EnnemyHand';
import DiscardPile from './components/DiscardPile';
import HeroesPile from './components/HeroesPile';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      overlay: false
    };
  },
  components: {
    HeroesDisplay,
    MyHand,
    EnnemyHand,
    DiscardPile,
    HeroesPile
  },
  methods: {
    onShown() {
      // Focus the cancel button when the overlay is showing
      this.$refs.cancel.focus();
    },
    onHidden() {
      // Focus the show button when the overlay is removed
      this.$refs.show.focus();
    }
  },
  computed: {
    ...mapGetters({
      myHeroesIn: 'game/myHeroesIn',
      hisHeroesIn: 'game/hisHeroesIn',
      myNbOfHeroesIn: 'game/myNbOfHeroesIn',
      hisNbOfHeroesIn: 'game/hisNbOfHeroesIn',
      isItMyTurn: 'game/isItMyTurn',
      canIPass: 'game/canIPass',
      canIEndTurn: 'game/canIEndTurn',
      canIDrawCards: 'game/canIDrawCards'
    })
  }
};
</script>

<style></style>
