import Vue from 'vue'

export const state = () => ({
  item: {},
  items: {
    all: [],
    featured: []
  },
  pagination: {
    count: 0, // Count of all of our published blogs
    pageCount: 0, // How many pages we want to display
    pageSize: 6, // How many items we want to display per page
    pageNum: 1 // Current page
  }
})

export const actions = {
  // /api/v1/blogs?pageNum=10&pageSize=2
  async fetchBlogs({commit, state}, filter) {
    const url = this.$applyParamsToUrl('/api/v1/blogs', filter)
    const data = await this.$axios.$get(`${url}`)
    if(data.isAxiosError === true){
      console.log(data.data)
      return Error('')
    }
    // const { blogs } = data
    // commit('setBlogs', {resource: 'all', blogs})
    const { blogs, count, pageCount } = data
    commit('setBlogs', {resource: 'all', blogs})
    commit('setPagination', {count, pageCount})
    return state.items.all
  },

  // /api/v1/blogs?filter[featured]=true
  async fetchFeaturedBlogs({commit, state}, filter) {
    const url = this.$applyParamsToUrl('/api/v1/blogs', filter)
    const data = await this.$axios.$get(url)
    if(data.isAxiosError === true){
      console.log(data.data)
      return Error('')
    }
    const { blogs } = data
    commit('setBlogs', {resource: 'featured', blogs})
    return state.items.featured
  },

  async fetchBlogBySlug({commit, state}, slug) {
    const blog = await this.$axios.$get(`/api/v1/blogs/s/${slug}`)
    if(blog.isAxiosError === true){
      console.log(blog.data)
      return Error('')
    }
    commit('setBlog', blog)
    return state.item
  }
}

export const mutations = {
  setBlogs(state, {resource, blogs}) {
    state.items[resource] = blogs
  },
  setPage(state, currentPage) {
    Vue.set(state.pagination, 'pageNum', currentPage)
  },
  setPagination(state, {count, pageCount}) {
    Vue.set(state.pagination, 'count', count)
    Vue.set(state.pagination, 'pageCount', pageCount)
  }
}