<template>
  <div class='' :class='{ "user_posts--no_border_bottom": posts && !posts.length }'>
    <div class='user_posts__title'>Posts by {{username}}</div>

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

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

          :post='post'
          :show-thread='true'
          :click-for-post='true'
          :class='{"post--last": index === posts.length-1}'
      ></thread-post>
      <template v-if='loadingPosts'>
        <b-skeleton
        ></b-skeleton>
      </template>
    </scroll-load>
    <template v-else>This user hasn't posted anything yet</template>
  </div>
</template>

<script>
import AjaxErrorHandler from '.././assets/js/errorHandler'
import ThreadPost from '../components/Post'

export default {
  name: 'UserPosts',
  props: ['username'],
  components: {
    ThreadPost
  },
  data () {
    return {
      posts: null,
      loadingPosts: false,
      nextPostsCount: 0,
      nextURL: ''
    }
  },
  methods: {
    loadNewPosts () {
      if(this.nextURL === null) return

      this.loadingPosts = true

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

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

            let currentPostsIds = this.posts.map(p => p.id)
            let filteredPosts =
                res.data.Posts.filter(p => !currentPostsIds.includes(p.id))

            this.posts.push(...filteredPosts)
            this.nextURL = res.data.meta.nextURL
            this.nextPostsCount = res.data.meta.nextPostsCount
          })
          .catch((e) => {
            this.loadingPosts = false

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

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