<template>
  <div>
    <div v-if="!$fetchState.pending" class="playbutton">
      <template v-if="user && user.name">
        <div class="playbutton__greeting">
          {{ $t('hi') }}
          {{ user.name }}!
         </div>
        <Button @click="$router.push('/play')">{{ $t('play-button') }}</Button>
        <div class="playbutton__logout" @click="logout">
          {{ $t('logout') }}
        </div>
      </template>
      <template v-else>
        <input
          v-model="authCode"
          class="playbutton__authinput"
          type="text"
          size="6"
          maxlength="6"
          :placeholder="$t('auth-code')"
        />
        <Button :disabled="loginDisabled" @click="login">{{ $t('login-go') }}</Button>
        <div class="playbutton__errormessage" v-if="errorMessage">
          {{ errorMessage }}
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  beforeMount() {
    this.$i18n.map({
      'hi': { de: 'Hallo', en: 'Hi' },
      'auth-code': { de: 'Code', en: 'code' },
      'login-go': { de: 'Los', en: 'Go' },
      'play-button': { de: 'Spielen!', en: 'Play!' },
      'logout': { de: 'Ausloggen/Sitzung wechseln', en: 'logout/switch session' },
    })
  },
  data() {
    return {
      authCode: '',
      errorMessage: '',
    }
  },
  async fetch() {
    this.$engine.fetchUserInfo()
  },
  computed: {
    loginDisabled() {
      return this.authCode.length < 6
    },
    user() {
      return this.$store.state.engine.user
    },
  },
  methods: {
    async login(e) {
      try {
        await this.$axios.$get(`/api/login?code=${this.authCode}`)
        this.$fetch()
      } catch(e) {
        this.errorMessage = 'login failed'
      }
      this.authCode = ''
    },
    async logout() {
      this.authCode = ''
      try {
        await this.$axios.$get('/api/logout')
        window.location.reload()
      } catch(e) {
        this.errorMessage = 'logout failed'
      }
    },
  },
}
</script>

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

.playbutton {
  font-family: $secondary-font;
  font-weight: 800;
  font-size: 36px;
  text-align: center;

  &__greeting {
    color: $button-text-color;
    font-size: 18px;
    margin: 0 0 1em 0;
  }

  &__playbutton {
    width: 200px;
    height: 48px;
    padding: 4px 36px;
    border: 4px solid $button-border-color;
    border-radius: 8px;
    background-color: $button-background-color;
    color: $button-text-color;

    &:hover {
      background-color: $button-hover-background-color;
      border-color: $button-hover-border-color;
      color: $button-hover-text-color;
    }
  }

  &__logout {
    margin-top: 64px;
    font-size: 24px;
    color: $button-secondary-text-color;
    cursor: pointer;

    &:hover {
      color: $button-secondary-hover-text-color;
    }
  }

  &__authinput {
    display: inline;
    height: 36px;
    border: 1px solid $input-inactive-border-color;
    border-radius: 8px;
    font-family: $secondary-font;
    font-weight: 800;
    font-size: 24px;
    background-color: $input-inactive-background-color;
    color: $input-inactive-text-color;
    outline: none;

    &:focus {
      border: 1px solid $input-border-color;
      background-color: $input-background-color;
      color: $input-text-color;
    }
  }

  &__errormessage {
    padding: 8px;
    font-size: 18px;
    color: $error-text-color;
  }
}
</style>
