import { createStore } from 'vuex';
import createPersistedStatePlugin from '../plugins/vuexLocalStorage';
import api from "../utils/axios.js";
import {getDomain} from "../utils/getDomain.js";

const store = createStore({
    state: {
        theme: localStorage.getItem('theme') || 'dark',
        loading: {},
        token: null,
        userInfo: {},
        demos: {}
    },
    mutations: {
        toggleTheme(state) {
            state.theme = state.theme === 'dark' ? 'light' : 'dark'
        },
        setToken(state, token) {
            state.token = token;
        },
        setUserInfo(state, obj) {
            if (obj === {} || !obj) {
                state.userInfo = {};
            }
            state.userInfo = {...state.userInfo, ...obj};
        },
        startLoading(state, text) {
            state.loading.isLoading = {isLoading: true, text: '请稍后...'};
            if (text) {
                state.loading.text = text;
            }
        },
        stopLoading(state) {
            state.loading.isLoading = false;
        },
        setDemoValue(state, obj) {
            state.demos[obj.demo] = {...state.demos[obj.demo], ...obj.value}
        }
    },
    getters: {
        currentTheme: state => state.theme,
        hasUserInfo: state => !!state.userInfo.uid,
        profileImage: state => {
            if (state.userInfo.profile) {
                return `https://${getDomain()}/data/user/profile/` + state.userInfo.profile;
            }else {
                return `https://${getDomain()}/data/user/profile/default.jpg`
            }
        }
    },
    plugins: [createPersistedStatePlugin({
        key: 'cyberStorage',
        whitelist: ['theme', 'userInfo', 'demos'],
    })]
})

export default store;