import { useAppStore } from '@/stores/app'
import { onBeforeMount } from 'vue'
import { ConfigProvider } from 'ant-design-vue'

// "app.setting.themecolor.daybreak": "拂晓蓝(默认)",
// "app.setting.themecolor.dust": "薄暮",
// "app.setting.themecolor.volcano": "火山",
// "app.setting.themecolor.sunset": "日暮",
// "app.setting.themecolor.cyan": "明青",
// "app.setting.themecolor.green": "极光绿",
// "app.setting.themecolor.geekblue": "极客蓝",
// "app.setting.themecolor.purple": "酱紫",

export const colorList: Array<{ key: string; color: string; checked?: boolean }> = [
	{
		key: 'klenin', //dust
		color: '#002FA7',
	},
	{
		key: 'mars', //dust
		color: '#008c8c',
	},
	{
		key: 'hermes', //volcano'火山'
		color: '#E85827',
	},
	{
		key: 'tiffany', //'日暮'sunset
		color: '#81D8D0',
	},
	{
		key: 'burgundy', //'明青'cyan
		color: '#800020',
	},
	{
		key: 'sennelier', //'极光绿'polar
		color: '#F9DC24',
	},
	{
		key: 'china', //'拂晓蓝(默认)'
		color: '#B05923',
	},
	{
		key: 'prussian', //'极客蓝'geek
		color: '#003153',
	},
	{
		key: 'mummy', //purple'酱紫'
		color: '#8F4B28',
	},
	{
		key: 'bordeaux', //purple'酱紫'
		color: '#4c0009',
	},
]

export const colors: string[] = colorList.map((c) => c.color)

export const useUserTheme = () => {
	onBeforeMount(() => {
		apply(load())
	})
}

export const randomTheme = (): string => {
	const i = Math.floor(Math.random() * 10)
	return colors[i]
}

export const load = () => {
	return useAppStore().theme.primaryColor
}

export const save = (color: string) => {
	useAppStore().changePrimaryColor(color)
}

export const apply = (color: string) => {
	ConfigProvider.config({
		theme: {
			primaryColor: color,
		},
	})
	save(color)
}
