<template>
  <nav v-if="isGamemaster || isAdmin" class="gamecontrols">
    <template v-if="isGamemaster">
      <template v-if="$route.path != '/gamemaster'">
        <button @click="go('/gamemaster')">admin interface</button>
        <button :disabled="buttonsDisabled.collect" @click="collectQuotes">Collect Quotes</button>
        <button :disabled="buttonsDisabled.start" @click="startGame">Start</button>
        <button :disabled="buttonsDisabled.continue" @click="continueGame">Continue</button>
        <button :disabled="buttonsDisabled.idle" @click="resetGame">Idle</button>
        <button :disabled="buttonsDisabled.finish" @click="finishGame">Finish Game</button>
      </template>
      <template v-if="$route.path != '/play'">
        <button @click="go('/play')">back to game</button>
      </template>
    </template>
    <template v-if="isAdmin">
      <template v-if="$route.path != '/admin'">
        <button @click="go('/admin')">admin interface</button>
      </template>
    </template>
    <button class="button-logout" @click="logout">logout</button>
  </nav>
</template>

<script>
export default {
  computed: {
    user() {
      return this.$store.state.engine.user || {}
    },
    isGamemaster() {
      const user = this.$store.state.engine.user
      return user && user.role === 'gamemaster'
    },
    isAdmin() {
      const user = this.$store.state.engine.user
      return user && user.role === 'admin'
    },
    buttonsDisabled() {
      const { state, phase } = this.$store.state.game
      return {
        collect: state !== 'idle',
        start: state !== 'idle',
        continue: state !== 'play' && ['select-quote', 'reveal-show-count', 'reveal-source'].indexOf(phase) == -1,
        idle: state === 'idle',
        finish: ['play', 'idle'].indexOf(state) == -1,
      }
    }
  },
  methods: {
    collectQuotes() {
      this.$engine.collectQuotes()
    },
    startGame() {
      this.$engine.startGame()
    },
    resetGame() {
      this.$engine.resetGame()
    },
    continueGame() {
      this.$engine.continueGame()
    },
    finishGame() {
      this.$engine.finishGame()
    },
    go(path) {
      this.$router.push({ path })
    },
    async logout() {
      const user = this.$store.state.engine.user
      if (user && user.isCameo) {
        await this.$axios.$get('/api/cameo')
        this.go('/admin')
        return
      }
      
      this.authCode = ''
      await this.$axios.$get('/api/logout')
      this.go('/')
    },
  },
}
</script>

<style lang="scss">
@import '~/assets/css/components';

.gamecontrols {
  display: flex;
  flex-direction: row;

  padding: 8px 1em;
  border-bottom: 1px solid $primary-box-border-color;

  button {
    font-family: $secondary-font;
    margin: 0 2px;
    padding: 0 1rem;
    font-size: 18px;
  }

  .button-logout {
    margin-left: auto;
  }
}
</style>
