<style>
h1-gavel {
  font-size: 150px
}
</style>
<template>
  <main>
    <section v-if="!user.limited">
      <center><h1-gavel><i class="fas fa-gavel"></i></h1-gavel>
      <h1>Unfortunately, users can only auction off Limited Edition items.</h1>
      </center>
    </section>
  </main>
</template>
<script>
import MenuButton from '../MenuButton'

export default {
  name: 'MarketplaceItem',
  // eslint-disable-next-line vue/no-unused-components
  components: {MenuButton},
  data () {
    return {
      menuItems: [
        /* { name: 'Wall', route: 'wall' }, */
        { name: 'Posts', route: 'posts' },
        { name: 'Threads', route: 'threads' },
        /* { name: 'Friends', route: 'friends' } */
      ],
      selected: 0,

      username: "unknown",
      user: null,
      relationship: false,
      relationships: {
        type: ''
      }
    }
  },
  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: {
    resetFetchData () {
      this.offset = 0;
      this.users = [];

      this.fetchData();
    },
    fetchData () {
      this.axios
        .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `marketplace/view/${this.$route.params.id}`)
        .then(res => this.user = res.data)
    },
    getIndexFromRoute (path) {
      let selectedIndex
      let route = path.split('/')[3]

      this.menuItems.forEach((item, index) => {
        if(item.route === route) {
          selectedIndex = index
        }
      })

      return selectedIndex
    }
  },
  created () {
    this.resetFetchData()
    this.selected = this.getIndexFromRoute(this.$route.path)

    this.axios
      .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `marketplace/view/${this.$route.params.id}`)
      .then(res => this.user = res.data)
  }
}
</script>
