<template>
  <div class="row">
    <div class="col-12 col-md-8 offset-sm-2 col-lg-6 offset-md-3">
      <div class="form-group">
        <label for="deck">Select how you will build your deck</label>
        <select class="custom-select mr-sm-2" id="deck" v-model="selectedDeck">
          <option
            v-for="deck in deckChoices"
            :key="deck"
            :value="deck.toLowerCase()"
            >{{ deck }}</option
          >
        </select>
      </div>

      <label for="adv-rules">Select advandced rules</label>
      <div class="form-group" id="adv-rules">
        <div class="form-check form-check-inline">
          <input
            class="form-check-input"
            type="checkbox"
            id="popularity"
            value="popularity"
            v-model="advRules"
          />
          <label class="form-check-label" for="popularity">Popularity</label>
        </div>
        <div class="form-check form-check-inline">
          <input
            class="form-check-input"
            type="checkbox"
            id="discard"
            value="discard"
            v-model="advRules"
          />
          <label class="form-check-label" for="discard">Discard</label>
        </div>
      </div>
      <hr />
      <button
        class="btn btn-primary"
        @click.prevent="createGame({ deckMode: selectedDeck, advRules })"
        :disabled="createGameStatus.status === $const('REQ_REQUESTED')"
      >
        {{ createGameStatus.status | getButtonText }}
      </button>
      <button
        class="btn btn-primary"
        @click.prevent="$emit('back')"
        :disabled="createGameStatus.status === $const('REQ_REQUESTED')"
      >
        Back
      </button>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import { Constants } from 'const/constants';

const decks = ['Faction', 'Draft', 'Tournament'];
export default {
  props: ['username'],
  data() {
    return {
      deckChoices: decks,
      selectedDeck: decks[0].toLowerCase(),
      advRules: []
    };
  },
  computed: {
    ...mapGetters({
      createGameStatus: 'menu/createGameStatus'
    })
  },
  methods: {
    ...mapActions({
      createGame: 'menu/createOnlineGame'
    })
  },
  filters: {
    getButtonText(status) {
      return status === Constants.REQ_REQUESTED ? 'Creating' : 'Create';
    }
  }
};
</script>
<style lang="scss" scoped>
// @import '../style/style.scss';
</style>
