<template>
  <main class="section">
    <div class="column is-vcentered">
      <h1 class="title">{{$t('stats.title')}}</h1>
    </div>
    <div class="columns is-centered">
      <div class="column is-vcentered has-text-centered">
        <h1 class="title">{{$t('stats.users')}}</h1>
        <div class="box">
          <h1 class="title" v-if="!loading">
            {{users}}
          </h1>
          <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
        </div>
      </div>
      <div class="column is-vcentered has-text-centered">
        <h1 class="title">{{$t('stats.posts')}}</h1>
        <div class="box">
          <h1 class="title" v-if="!loading">
            {{posts}}
          </h1>
          <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
        </div>
      </div>
      <div class="column is-vcentered has-text-centered">
        <h1 class="title">{{$t('stats.purchased')}}</h1>
        <div class="box">
          <h1 class="title" v-if="!loading">
            {{inventory}}
          </h1>
          <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
        </div>
      </div>
      <div class="column is-vcentered has-text-centered">
        <h1 class="title">{{$t('stats.teams')}}</h1>
        <div class="box">
          <h1 class="title" v-if="!loading">
            {{teams}}
          </h1>
          <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
        </div>
      </div>
      <div class="column is-vcentered has-text-centered">
        <h1 class="title">{{$t('stats.items')}}</h1>
        <div class="box">
          <h1 class="title" v-if="!loading">
            {{items}}
          </h1>
          <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
        </div>
      </div>
      <div class="column is-vcentered has-text-centered">
        <h1 class="title">{{$t('stats.threads')}}</h1>
        <div class="box">
          <h1 class="title" v-if="!loading">
            {{threads}}
          </h1>
          <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
        </div>
      </div>
    </div>
  </main>
</template>
<script>
export default {
  data() {
    return {
      users: 0,
      posts: 0,
      inventory: 0,
      items: 0,
      teams: 0,
      threads: 0,
      loading: true
    }
  },
  mounted() {
    this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'kaverti/stats')
        .then(res => {
          this.users = res.data.users
          this.posts = res.data.posts
          this.inventory = res.data.inventory
          this.items = res.data.items
          this.teams = res.data.teams
          this.threads = res.data.threads
          this.loading = false
        }).catch(() => {
      this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
    })
  }
}
</script>