import {get, writable, derived } from 'svelte/store';
import {storeMdjs} from './mdjs.store';
import apiConfig from '@/api/config';
import helpers from '@/libs/helpers';

const defaultConfig = writable({
    app: {
        title: "Svelte test",
        version: "1.0.0",
        status: "developpement",
        lang: "fr"
    },
    lang: '',
    locales: {
        app: {},
        langs: [{
                value: "fr",
                text: "French"
            },
            {
                value: "en",
                text: "English"
            }
        ]
    }
});

const createConfig = function(config) {
    const { subscribe, set, update } = writable(config);
    config = config || defaultConfig;

    return {
        subscribe,
        set,
        setConfig: (newConfig) => update(config => newConfig),
        reset: () => set(config)
    };
};
const storeConfig = createConfig(defaultConfig);

const createLang = function(lang) {
    lang = lang || 'fr';
    const { subscribe, set, update } = writable(lang);

    return {
        subscribe,
        set,
        setLang: (newLang) => update(() => newLang),
    }
};
const storeLang = createLang();

const storeLocales = derived(storeLang, ($storeLang, set) => {
    if ($storeLang) {
        apiConfig.getLocales($storeLang).then(function(result) {
            set(result.data);
        });
    }
});

const storePages = derived(storeLang, ($storeLang, set) => {
    if ($storeLang) {
        apiConfig.getPages($storeLang).then(function(result) {
            set(result.data);
        });
    }
});

const createView = function(view) {
    const { subscribe, set, update } = writable(view);

    return {
        subscribe,
        set,
        setView: (newView) => update(() => newView),
    }
};
const storeView = createView();

const storeLocalesView = derived([storeConfig, storeLang, storeView], ([$storeConfig, $storeLang, $storeView], set) => {
    if ($storeLang && $storeView && $storeConfig) {
        const file = $storeConfig.views[$storeView].locales[$storeLang];
        apiConfig.getFile(file).then(function(result) {
            set(result.data);
        });
    }
});

const createLocalesViews = function() {
    const store = writable({});
    return {
        subscribe: store.subscribe,
        set: store.set,
        setLocalesView: (viewName, file) => {
            apiConfig.getFile(file).then((result) => {
                store[viewName] = result.data;
                store.set(store)
            });
        }
    }
};
const storeLocalesViews = createLocalesViews();

const createFile = function(file) {
    const { subscribe, set, update } = writable(file);

    return {
        subscribe,
        set,
        setFile: (newFile, type, format) => {
            if (newFile) {
                if (type == 'xml') {
                    storeMdjs.setXml(newFile);
                    update(() => 'xml');
                } else {
                    helpers.getFile(newFile, format).then((response) => {
                        storeMdjs.setXml(response.data);
                    });
                    update(() => newFile);
                }
            }
        },
    }
};
const storeFile = createFile();

const createModel = function(model) {
    const { subscribe, set, update } = writable(model);

    return {
        subscribe,
        set,
        setModel: (newModel) => {
            if (newModel) {
                update(() => newModel);    
                storeFile.setFile(newModel.file, 'url');
            }
        },
    }
};
const storeModel = createModel();

export {
    storeConfig,
    storeLang,
    storeLocales,
    storePages,
    storeView,
    storeLocalesView,
    storeLocalesViews,
    storeModel,
    storeFile,
};