<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">Populatity</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"
        :disabled="creatingGame"
      >
        {{ createButtonText }}
      </button>
      <button
        class="btn btn-primary"
        @click.prevent="$emit('back')"
        :disabled="creatingGame"
      >
        Back
      </button>
    </div>
  </div>
</template>

<script>
import { socketService } from '../../main';

const decks = ['Faction', 'Draft', 'Tournament'];
export default {
  props: ['username'],
  data() {
    return {
      deckChoices: decks,
      selectedDeck: decks[0].toLowerCase(),
      advRules: [],
      creatingGame: false,
      createButtonText: 'Create'
    };
  },
  methods: {
    createGame() {
      this.creatingGame = true;
      this.createButtonText = 'Creating';
      console.log('create game, advrules : ', this.advRules);
      let game = {
        player1: this.username,
        player2: '',
        deck: this.selectedDeck,
        advRules: this.advRules,
        status: 'CREATED',
        data: ''
      };
      socketService
        .createGame(game)
        .then(id => {
          this.$emit('home');
          this.$emit('join-game-id', {
            id,
            username: this.username
          });
        })
        .catch(err => {
          this.creatingGame = false;
          this.createButtonText = 'Create';
          alert('Could not create game (' + err + ')');
        });
    }
  }
};
</script>
<style lang="scss" scoped>
// @import '../style/style.scss';
</style>
