import Vue from 'vue';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import Axios from 'axios';

import App from './app.vue';
import Dashboard from './components/dashboard.vue';
import LoginForm from './components/forms/login.vue';
import Userlist from './components/userlist.vue';

Vue.use(VueRouter);
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    api: {},
    navigation: [],
    login: {},
    authToken: '',
    credentials: {}
  },
  mutations: {
    setAPI(state, payload) {
      state.api = payload;
    },
    setNavigation(state, payload) {
      for (var i=0; i<payload.length; i++) {
        state.navigation.push(payload[i]); // = payload;
      }
    },
    setCredentials(state, payload) {
      state.credentials = {
        username: payload.username,
        password: payload.password
      }
    },
    setLogin(state, payload) {
      state.login = payload.User;
      state.authToken = payload.AuthToken;
    }
  },
  actions: {
    apiRequest(context, payload) {
      return new Promise((resolve, reject) => {
        
        Axios({
          method: payload.method ? payload.method : 'get',
          baseURL: context.state.api.baseURL,
          url: payload.endpoint,
          params: payload.params,
          data: payload.data,
          headers: {
            'X-Auth-Token': context.state.authToken
          }
        })
          .then(response => {
              console.log(response);
              resolve(response.data);
          })
          .catch(error => {
              console.dir(error);
              reject(error);
          })
      });
    },
    login(context, payload) {
      context.commit('setCredentials', payload);
      return new Promise((resolve, reject) => {
        context.dispatch('apiRequest', {
          method: 'post',
          endpoint: 'login',
          data: payload
        })
          .then(data => {
            context.commit('setLogin', data);
            resolve(data.User);
          })
          .catch(error => {
              if (error.response && error.response.data && error.response.data.error) {
                reject(error.response.data.error);
              } else {
                reject([]);
              }
          });
      });
    }
  }
});


const routes = [
  {
    path: '/login',
    component: LoginForm
  },
  {
    path: '/',
    component: Dashboard
  },
  {
    path: '/userlist',
    component: Userlist
  }
];

const router = new VueRouter({
  routes
});

// load init
Axios.get('conf/init.json')
    .then(results => {
        // set navigation
        if ( !Array.isArray(results.data.navigation) ) {
            alert('invalid data in: ' + this.src);
            return;
        }
        store.commit("setNavigation", results.data.navigation);

        // set api config in store
        store.commit("setAPI", results.data.api);

        // load app, when init finishs
        new Vue({
          el: '#vue-app',
          components: {
            App
          },
          data: {
            navItems: store.state.navigation
          },
          router,
          store
        });
    })
    .catch(error => {
        alert('error loading: ' + error.message);
    });