<template>
  <div class='user_marketplace' :class='{ "user_marketplace--no_border_bottom": marketplace && !marketplace.length }'>
    <div class='user_marketplace__title'>Marketplace items by {{username}}</div>

    <template v-if='!marketplace'>
      <thread-post-placeholder v-if='!marketplace'>
      </thread-post-placeholder>
    </template>

    <scroll-load
      :loading='loadingMarketplace'
      @loadNext='loadNewMarketplace'
      v-else-if='marketplace.length'
    >
      <thread-post
        v-for='(post, index) in marketplace'
        :key='"thread-post-" + post.id'

        :post='post'
        :show-thread='true'
        :click-for-post='true'
        :class='{"post--last": index === marketplace.length-1}'
      ></thread-post>
      <template v-if='loadingMarketplace'>
        <thread-post-placeholder
          v-for='n in nextMarketplaceCount'
          :key='"thread-post-placeholder-" + n'
        ></thread-post-placeholder>
      </template>
    </scroll-load>
    <template v-else>This user doesn't have any Marketplace Items yet</template>
  </div>
</template>

<script>
  import ScrollLoad from '../ScrollLoad'
  import ThreadPost from '../MarketplaceItemView'
  import ThreadPostPlaceholder from '../ThreadPostPlaceholder'

  import AjaxErrorHandler from '../../assets/js/errorHandler'
  import logger from '../../assets/js/logger'

  export default {
    name: 'user',
    props: ['username'],
    components: {
      ThreadPost,
      ScrollLoad,
      ThreadPostPlaceholder
    },
    data () {
      return {
        marketplace: null,
        loadingMarketplace: false,
        nextMarketplaceCount: 0,
        nextURL: ''
      }
    },
    methods: {
      loadNewMarketplace () {
        if(this.nextURL === null) return

        this.loadingmarketplace = true

        this.axios
          .get(this.nextURL)
          .then(res => {
            this.loadingMarketplace = false

            if(!this.marketplace) this.marketplace = []

            let currentmarketplaceIds = this.marketplace.map(p => p.id)
            let filteredmarketplace =
              res.data.marketplace.filter(p => !currentmarketplaceIds.includes(p.id))

            this.marketplace.push(...filteredmarketplace)
            this.nextURL = res.data.meta.nextURL
            this.nextMarketplaceCount = res.data.meta.nextMarketplaceCount
          })
          .catch((e) => {
            this.loadingMarketplace = false

            AjaxErrorHandler(this.$store)(e)
          })
      }
    },
    created () {
      this.$store.dispatch('setTitle', this.$route.params.username + ' - Marketplace')

      this.axios
        .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/${this.$route.params.username}?marketplace=true`)
        .then(res => {
          this.marketplace = res.data.Items
          this.nextURL = res.data.meta.nextURL
          this.nextMarketplaceCount = res.data.meta.nextMarketplaceCount
        })
        .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)
          }
        })

      logger('userMarketplace', this.$route.params.username)
    }
  }
</script>

<style lang='scss' scoped>
  @import '../../assets/scss/variables.scss';

  .user_marketplace {
    background: #fff;
    border-radius: 0.25rem;
    padding: 1rem;
    border: thin solid $color__gray--darker;

    @at-root #{&}__title {
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }
  }

  @media (max-width: $breakpoint--tablet) {
    .user_marketplace {
      margin-top: 1rem;
      overflow: hidden;
    }
  }
</style>
