import Vuex from 'vuex'
import md5 from 'md5'

const createStore = () => {
  return new Vuex.Store({
    state: {
      headlines: [],
      loading: false,
      category: '',
      token: null,
      country: 'us',
      user: null
    },
    mutations: {
      setHeadLines (state, headlines) {
        state.headlines = headlines
      },
      setLoading (state, loading) {
        state.loading = loading
      },
      setCategory (state, category) {
        state.category = category
      },
      setCountry (state, country) {
        state.country = country
      },
      setToken (state, token) {
        state.token = token
      },
      setUser (state, user) {
        state.user = user
      }
    },
    actions: {
      async loadHeadLines ({ commit }, apiUrl) {
        commit('setLoading', true)
        const { articles } = await this.$axios.$get(apiUrl)
        commit('setLoading', false)
        commit('setHeadLines', articles)
      },
      async authenticateUser ({ commit }, userPayload) {
        try {
          commit('setLoading', true)
          const autuUserData = await this.$axios.$post(
            '/register/',
            userPayload
          )
          const avatar = `http://gravatar.com/avatar/${md5(autuUserData.email)}?d=identicon`
          const user = { email: autuUserData.email, avatar }
          commit('setUser', user)
          commit('setToken', autuUserData.idToken)
          commit('setLoading', false)
        } catch (error) {
          console.log(error)
        }
      }
    },
    getters: {
      headlines: state => state.headlines,
      loading: state => state.loading,
      category: state => state.category,
      country: state => state.country,
      isAuthenticated: state => !!state.token,
      user: state => state.user
    }
  })
}

export default createStore