import { G11nService } from '../../../../../vendor/komma/kms/resources/js/global/g11nService';
import Vue from 'vue';
const g11nService = new G11nService();

export default {
    namespaced: true,
    state: {
        configs: { },
        configRequests: []
    },
    mutations: {
        storeConfig(state, {key, config}) {
            // state.configs[key] = config; //This is wrong. The property won't be reactive
            Vue.set(state.configs, key, config); //This makes the property reactive

            const requestKeyIndex = state.configRequests.indexOf(key);
            if(requestKeyIndex !== -1) state.configRequests.splice(requestKeyIndex, 1);
        },
        requestedConfig(state, key) {
            if(state.configRequests.indexOf(key) !== -1) return; //Already loading
            state.configRequests.push(key);
        }
    },
    actions: {
        loadConfigs({ commit, state, dispatch }, configKeys) {
            if(!Array.isArray(configKeys)) throw 'The configKeys parameter must be an array containing strings (config keys)';

            let configPromises = [];
            configKeys.forEach((configRequestObject) => {
                configPromises.push(dispatch('loadConfig', configRequestObject))
            });
            return Promise.all(configPromises);
        },

        loadConfig({ commit, state }, key) {
            return new Promise((resolve, reject) => {
                if(
                    state.configs.hasOwnProperty(key) || //We are not going to do a request
                    state.configRequests.indexOf(key) !== -1
                ) resolve();

                commit('requestedConfig', key);
                g11nService.config.get(key).then(
                    config => {
                        commit('storeConfig', { key, config });
                        resolve();
                    }
                ).catch(function(error) {
                    console.error('Vuex configs Module: could not get config for key: ' + key, error);
                    reject();
                })
            })
        }
    },
    getters: {
        config: (state, getters) => (key) => {
            //Return a placeholder if the text isn't loaded yet
            if(!state.configs.hasOwnProperty(key)) {
                if(state.placeholderType === 'key') return key;
                else return '.'.repeat(key.length);
            }
            //Or return the config if it has loaded.
            else return state.configs[key];
        }
    }
}