import { createStore, GetterTree } from 'vuex';
import i18n from '@/i18n';
import appSetting from '@/app-setting';
import app from './modules/app';
import permission from './modules/permission';
import tagsView from './modules/tagsView';
import * as user from './modules/user';
import getters from './getters';

// 定义 State 类型
export interface State {
    isDarkMode: boolean;
    mainLayout: string;
    theme: string;
    menu: string;
    layout: string;
    rtlClass: string;
    animation: string;
    navbar: string;
    locale: string;
    sidebar: boolean;
    languageList: Array<{ code: string; name: string }>;
    isShowMainLoader: boolean;
    semidark: boolean;
    superMenu: string;
    companId: string;
    tagsView: {
        visitedViews: any[];
        cachedViews: any[]
    }
}

// 定义 Getters 类型
/* const getters: GetterTree<State, State> = {
    sidebar: state => state.sidebar,
    language: state => state.locale,
    device: state => state.layout,
    visitedViews: state => state.tagsView.visitedViews,
    cachedViews: state => state.tagsView.cachedViews,
    // ... other getters
}; */

// 创建 store
const store = createStore<State>({
    modules: {
        app,
        permission,
        tagsView,
        user
    },
    state: {
        isDarkMode: false,
        mainLayout: 'app',
        theme: 'light',
        menu: 'horizontal',
        layout: 'full',
        rtlClass: 'ltr',
        animation: '',
        navbar: 'navbar-sticky',
        locale: 'zh',
        sidebar: false,
        languageList: [
            { code: 'zh', name: 'Chinese' },
            { code: 'en', name: 'English' },
        ],
        isShowMainLoader: true,
        semidark: false,
        superMenu: 'super',
        tagsView: {
            visitedViews: [],
            cachedViews: []
        },
        companId: ""
    },
    mutations: {
        setMainLayout(state, payload) {
            state.mainLayout = payload;
        },
        toggleTheme(state, payload) {
            payload = payload || state.theme;
            localStorage.setItem('theme', payload);
            state.theme = payload;
            state.isDarkMode = payload === 'dark' || (payload === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
            document.querySelector('body')?.classList.toggle('dark', state.isDarkMode);
        },
        toggleMenu(state, payload) {
            payload = payload || state.menu;
            state.sidebar = false; // reset sidebar state
            localStorage.setItem('menu', payload);
            state.menu = payload;
        },
        toggleLayout(state, payload) {
            payload = payload || state.layout;
            localStorage.setItem('layout', payload);
            state.layout = payload;
        },
        toggleRTL(state, payload) {
            payload = payload || state.rtlClass;
            localStorage.setItem('rtlClass', payload);
            state.rtlClass = payload;
            document.querySelector('html')?.setAttribute('dir', state.rtlClass || 'ltr');
        },
        toggleAnimation(state, payload) {
            payload = payload?.trim() || state.animation;
            localStorage.setItem('animation', payload);
            state.animation = payload;
            appSetting.changeAnimation();
        },
        toggleNavbar(state, payload) {
            payload = payload || state.navbar;
            localStorage.setItem('navbar', payload);
            state.navbar = payload;
        },
        toggleSemidark(state, payload) {
            payload = payload || false;
            localStorage.setItem('semidark', payload);
            state.semidark = payload;
        },
        /* 菜单控制 */
        toggleSuperMenu(state, payload) {
            payload = payload || state.superMenu;
            localStorage.setItem('superMenu', payload);
            state.superMenu = payload;
        },
        /* 公司ID */
        toggleCompanId(state, payload) {
            payload = payload || state.companId;
            localStorage.setItem('companId', payload);
            state.companId = payload;
        },
        toggleLocale(state, payload) {
            payload = payload || state.locale;
            i18n.global.locale.value = payload;
            localStorage.setItem('i18n_locale', payload);
            state.locale = payload;
            if (state.locale?.toLowerCase() === 'ae') {
                state.rtlClass = 'rtl';
            } else {
                state.rtlClass = 'ltr';
            }
            document.querySelector('html')?.setAttribute('dir', state.rtlClass || 'ltr');
        },
        toggleSidebar(state) {
            state.sidebar = !state.sidebar;
        },
        toggleMainLoader(state) {
            state.isShowMainLoader = true;
            setTimeout(() => {
                state.isShowMainLoader = false;
            }, 500);
        }
    },
    actions: {
        setMainLayout({ commit }, payload) {
            commit('setMainLayout', payload);
        },
        toggleTheme({ commit }, payload) {
            commit('toggleTheme', payload);
        },
        toggleMenu({ commit }, payload) {
            commit('toggleMenu', payload);
        },
        toggleLayout({ commit }, payload) {
            commit('toggleLayout', payload);
        },
        toggleRTL({ commit }, payload) {
            commit('toggleRTL', payload);
        },
        toggleAnimation({ commit }, payload) {
            commit('toggleAnimation', payload);
        },
        toggleNavbar({ commit }, payload) {
            commit('toggleNavbar', payload);
        },
        toggleSemidark({ commit }, payload) {
            commit('toggleSemidark', payload);
        },
        toggleSuperMenu({ commit }, payload) {
            commit('toggleSuperMenu', payload);
        },
        toggleCompanId({ commit }, payload) {
            commit('toggleCompanId', payload);
        },
        toggleLocale({ commit }, payload) {
            commit('toggleLocale', payload);
        },
        toggleSidebar({ commit }) {
            commit('toggleSidebar');
        },
        toggleMainLoader({ commit }) {
            commit('toggleMainLoader');
        }
    },
    getters
});

export default store;