import Vue from 'vue';
import Vuex from 'vuex';


// imports of AJAX functions will go here
import { fetchSurveys, fetchSurvey, saveSurveyResponse, postNewSurvey, authenticate, register } from '@/api';
import { isValidJwt, EventBus } from '@/utils';

Vue.use(Vuex);

const state = {
  // single source of data
  surveys: [],
  currentSurvey: {},
  user: {},
  jwt: '',
};

const actions = {
  // asynchronous operations
  loadSurveys(context: any) {
    return fetchSurveys()
        .then((response) => {
          context.commit('setSurveys', { surveys: response.data });
        });
  },
  // @ts-ignore
  loadSurvey(context: any, { id }) {
    return fetchSurvey(id)
        .then((response) => {
          context.commit('setSurvey', { survey: response.data });
        });
  },
  addSurveyResponse(context: any) {
    return saveSurveyResponse(context.state.currentSurvey);
  },

  login(context: any, userData: any) {
    context.commit('setUserData', { userData });
    return authenticate(userData)
        .then((response) => context.commit('setJwtToken', { jwt: response.data }))
        .catch((error) => {
          console.log('Error Authenticating: ', error);
          EventBus.$emit('failedAuthentication', error);
        });
  },
  register(context: any, userData: any) {
    context.commit('setUserData', { userData });
    return register(userData)
        .then(context.dispatch('login', userData))
        .catch((error) => {
          console.log('Error Registering: ', error);
          EventBus.$emit('failedRegistering: ', error);
        });
  },
  submitNewSurvey(context: any, survey: any) {
    return postNewSurvey(survey, context.state.jwt.token);
  },
};

const mutations = {
  // isolated data mutations
  setSurveys(sState: any, payload: any) {
    sState.surveys = payload.surveys;
  },
  setSurvey(sState: any, payload: any) {
    const nQuestions = payload.survey.questions.length;
    for (let i = 0; i < nQuestions; i++) {
      payload.survey.questions[i].choice = null;
    }
    sState.currentSurvey = payload.survey;
  },
  setChoice(sState: any, payload: any) {
    const { questionId, choice } = payload;
    const nQuestions = sState.currentSurvey.questions.length;
    for (let i = 0; i < nQuestions; i++) {
      if (sState.currentSurvey.questions[i].id === questionId) {
        sState.currentSurvey.questions[i].choice = choice;
        break;
      }
    }
  },
  setUserData(sState: any, payload: any) {
    console.log('setUserData payload = ', payload);
    sState.userData = payload.userData;
  },
  setJwtToken(sState: any, payload: any) {
    console.log('setJwtToken payload = ', payload);
    localStorage.token = payload.jwt.token;
    sState.jwt = payload.jwt;
  },
};

const getters = {
  // reusable data accessors
  isAuthenticated(sState: any) {
    return isValidJwt(sState.jwt.token);
  },
};

const store = new Vuex.Store({
  state,
  actions,
  mutations,
  getters,
});

export default store;