<template>
  <!--
  * Character customisation page almost complete, please wait. ~Bytetrex
  * What's Coming?
  * Avatar mask (colors [modal]), inventory, equipped items, current avatar render display.
  -->

  <div class='route_container user_route'>
    <div class="column is-4" style="float: left">
      <div class="box has-text-centered">
        <div class="columns is-vcentered is-mobile">
          <div class="column"><h1 class="title">Your current avatar</h1></div>
        </div>
        <figure class="image is-250">
          <img width="250px"
               :src = userPicture
          >
        </figure>
        <br>
        <menu-button
          v-if='$store.state'
          :options='[
					{ event: "refresh", value: "Refresh Avatar" },
					{ event: "report_a_problem", value: "Report a problem" }
					]'
          @refresh='RefreshAvatar'
          @report_a_problem='ReportAProblem'
        >
          <button class='button button--thin_text'>
            <font-awesome-icon :icon='["fa", "cog"]' style='margin-right: 0.25rem;' />
            Problems with your avatar?
          </button>
        </menu-button>
      </div>
    </div>
  </div>
</template>
<script>
import AjaxErrorHandler from '../../assets/js/errorHandler'
import MenuButton from '../MenuButton'

export default {
  name: 'user',
  components: {MenuButton},
  data () {
    return {
      menuItems: [
        { name: 'Your items', route: 'items' },
      ],
      selected: 0,

      username: this.$route.params.username,
      user: null
    }
  },
  watch: {
    $route (to) {
      this.selected = this.getIndexFromRoute(to.path)
    }
  },
  computed: {
    userColor () {
      if(this.user) {
        return this.user.color
      } else {
        return null
      }
    },
    userPicture () {
      if(this.user && this.user.picture) {
        return 'https://cdn.kaverti.com/user/avatars/full/' + this.user.picture + '.png'
      } else {
        return null
      }
    }
  },
  methods: {
    RefreshAvatar () {
      this.axios
        .post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/avatar/refresh', {
        })
        .then(() => {
          this.refreshavatar.loading = false
        })
        .catch(e => {
          this.refreshavatar.loading = false

          AjaxErrorHandler(this.$store)(e, error => {
            this.refreshavatar.error = error.message
          })
        })
      this.$router.go('/user/' + this.username)
    },
    ReportAProblem () {
      this.$router.go('https://help.kaverti.com')
    },
  },
  created () {
    this.axios
      .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/${this.state.username}`)
      .then(res => this.user = res.data)
      .catch(e => {
        let invalidId = e.response.data.errors.find(error => {
          return error.name === 'accountDoesNotExist'
        })

        if(invalidId) {
          this.$store.commit('set404Page', true)
        } else {
          AjaxErrorHandler(this.$store)(e)
        }
      })
  }
}
</script>
