<template>
  <div>
    <div class="row">
      <div
        class="col-12 col-md-8 offset-sm-2 col-lg-6 offset-md-3"
        style="display:inline-block;"
      >
        <button class="btn btn-danger" @click="stopGame">
          Stop game
        </button>
        <input type="text" v-model="chatMessage" @keydown.enter="sendChat" />
        <button
          class="btn btn-primary"
          @click="sendChat"
          :disabled="chatMessage === ''"
        >
          Chat
        </button>
        <button
          class="btn btn-danger"
          :disabled="endTurnBtn.disable"
          v-if="!gameState.startsWith('0_') && !gameState.startsWith('1_')"
          @click="endTurn"
        >
          {{ endTurnBtn.text }}
        </button>
        <h4>{{ myInstructions }}</h4>
      </div>
    </div>
    <hr />
    <component :is="gameStepDisplay" :select-heroes="true"></component>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import { socketService } from '../main';
import HeroesDisplay from '../common/heroes-display/HeroesDisplay';
import OnlineWait from './components/OnlineWait';
import GameBoard from './board/GameBoard';
export default {
  components: {
    HeroesDisplay,
    OnlineWait,
    GameBoard
  },
  data() {
    return {
      chatMessage: ''
    };
  },
  computed: {
    ...mapGetters({
      gameState: 'game/state',
      isItMyTurn: 'game/isItMyTurn',
      canIPass: 'game/canIPass',
      canIEndTurn: 'game/canIEndTurn',
      myInstructions: 'game/myInstructions'
    }),
    gameStepDisplay() {
      let componentToDisplay = '';
      switch (this.gameState) {
        case null:
        case '':
        case '0_INIT':
          componentToDisplay = 'online-wait';
          break;
        case '1_SELECT_FACTION':
        case '1_SELECT_DRAFT':
        case '1_SELECT_TOURNAMENT':
          componentToDisplay = 'heroes-display';
          break;
        case '2_CHANGE_UP_TO_3_CARDS':
          componentToDisplay = 'game-board';
          break;
        default:
          componentToDisplay = 'online-wait';
          break;
      }
      return componentToDisplay;
    },
    endTurnBtn() {
      // If not my turn
      if (this.isItMyTurn === false) {
        return { disable: true, text: 'Waiting other player' };
      } else {
        if (this.canIEndTurn === true) {
          return { disable: false, text: 'End Turn' };
        } else {
          return { disable: true, text: 'Play...' };
        }
      }
    }
  },
  methods: {
    ...mapActions({
      submitMyReplace3CardsTurn: 'game/submitMyReplace3CardsTurn'
    }),
    stopGame() {
      this.$store.dispatch('stopGame');
      this.$store.dispatch('game/resetGameState');
    },
    sendChat() {
      socketService.chat(this.chatMessage);
      this.chatMessage = '';
    },
    endTurn() {
      switch (this.gameState) {
        case '2_CHANGE_UP_TO_3_CARDS':
          this.submitMyReplace3CardsTurn();
          break;
        default:
          break;
      }
    }
  },
  created() {}
};
</script>

<style scoped>
div {
  color: antiquewhite;
}
</style>
