import { defineStore } from 'pinia'
import type { AppState, Language, Theme } from './helper'
import { useStorage } from '@vueuse/core'

const appState = useStorage<AppState>('appState', {
    siderCollapsed: false,
    minePannel: false,
    theme: 'auto',
    language: 'zh-CN'
})

export const useAppStore = defineStore('app-store', {
    state: (): AppState => appState.value,

    actions: {
        setSiderCollapsed(collapsed: boolean) {
            appState.value.siderCollapsed = collapsed
            this.$state.siderCollapsed = collapsed
        },

        setMinePannel(pannelShow: boolean) {
            appState.value.minePannel = pannelShow
            this.$state.minePannel = pannelShow
        },

        setTheme(theme: Theme) {
            appState.value.theme = theme
            this.$state.theme = theme
        },

        setLanguage(language: Language) {
            appState.value.language = language
            this.$state.language = language
        }
    }
})

export function useAppStoreWithOut() {
    return appState.value
}
