import {defineStore} from "pinia";
import {computed, ref} from "vue";
import {theme} from "ant-design-vue";
import type {ThemeConfig} from "ant-design-vue/lib/config-provider/context";
import type {MappingAlgorithm} from "ant-design-vue/lib/config-provider/context";

export const useThemeStore = defineStore('theme', () => {

    const isDarkTheme = window.matchMedia("(prefers-color-scheme: dark)"); // 是深色
    const isDark = ref(isDarkTheme.matches)
    const isCompact = ref(false)

    const {token} = theme.useToken()

    const themeConfig = computed<ThemeConfig>(() => {
        let algorithm: MappingAlgorithm[] = [theme.defaultAlgorithm]
        if (isDark.value) {
            algorithm.push(theme.darkAlgorithm)
        }
        if (isCompact.value) {
            algorithm.push(theme.compactAlgorithm)
        }
        return {
            token: {
                borderRadius: 0,
                colorPrimary: "#009dff",
                colorInfo: '#009dff',
                fontSize: 14,
            },
            algorithm: algorithm,
            components: {
                Layout: {
                    colorBgHeader: isDark.value ? '#141414' : '#ffffff'
                },
                Button: {}
            }
        }
    })

    return {
        themeConfig: themeConfig,
        isDark: isDark,
        isCompact: isCompact,
        token
    }
})