<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 columns'>
    <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 = '"http://localhost/user/avatars/full/" + this.user.picture + ".png"'

          >
        </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 class="column is-6">
      <div class="box">
        <h1>Your items</h1>
        <tab-view
          :tabs='["Hats", "Faces", "Shirts", "Pants"]'
          v-model="showTab"
          padding='true'
          slot='main'
        >
        </tab-view>
        <div class="column is-4" v-for='item in items' :key='"item-row" + item.Inventories.Item.id' v-show="item"><div class="card">
          <div class="card-content">
            test
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import AjaxErrorHandler from '../../assets/js/errorHandler'
import MenuButton from '../MenuButton'
import throttle from "lodash.throttle";

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

      username: this.$route.params.username,
      user: null,
      items: null
    }
  },
  watch: {
    tableSort: 'resetFetchData',
    marketplaceTabs: 'resetFetchData',
    search: throttle(function () {
      this.resetFetchData();
    }, 200)
  },
  computed: {
    userColor () {
      if(this.user) {
        return this.user.color
      } else {
        return null
      }
    },
  },
  methods: {
    RefreshAvatar () {
      this.axios
        .post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/render/refresh', {
        })
        .then(() => {
          this.refreshavatar.loading = false
        })
        .catch(e => {
          this.refreshavatar.loading = false

          AjaxErrorHandler(this.$store)(e, error => {
            this.refreshavatar.error = error.message
          })
        })
    },
    ReportAProblem () {
      this.$router.go('https://help.kaverti.com')
    },
  },
  created () {
    this.axios
      .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `userinfo`)
      .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)
        }
      })
    if(this.offset === null) return;

    let url = process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'inventory' + `?
					sort=${this.tableSort.column}
					&order=${this.tableSort.sort}
					&offset=${this.offset}
				`;
    if(this.roleSelected.length === 1) {
      url += '&role=' + this.roleSelected[0];
    }
    if(this.search.length) {
      url += '&search=' + encodeURIComponent(this.search.trim());
    }

    this.loading = true;
    this.axios
      .get(url)
      .then(res => {
        this.items.push(...res.data);
        this.loading = /*loading =*/ false;

        //If returned data is less than the limit
        //then there must be no more pages to paginate
        if(res.data.length < this.limit) {
          this.offset = null;
        } else {
          this.offset+= this.limit;
        }
      })
      .catch(e => {
        AjaxErrorHandler(this.$store)(e);
        this.loading = /*loading =*/ false;
      });
  }
}
</script>
