import { defineStore } from 'pinia'
import globalConfig from '@/config/global.config.js'
import RedTheme from '@/theme/red.js'
import GreenTheme from '@/theme/green.js'
import WhiteTheme from '@/theme/white.js'
import imagePath from '@/theme/image.js'
import BlueTheme from '@/theme/blue.js'

const themeStoreKey = 'THEME_STORE_KEY'
const imgUrlPrefix = globalConfig.appImagePrefix()

export const useThemeStore = defineStore({
	id: 'theme',
	state: () => ({
		red: RedTheme,
		white: WhiteTheme,
		green: GreenTheme,
		blue: BlueTheme,
		imagePath: imagePath
	}),
	getters: {
		theme: (state) => {
			return state[import.meta.env.VITE_APP_THEME || 'red']
		},
		imageUrl: (state) => {
			const getImgUrl = (path) => {
				return `${imgUrlPrefix}${path}`
			}

			const imgsObj = {}
			Object.keys(state.imagePath).forEach(el => {
				imgsObj[el] = getImgUrl(state.imagePath[el])
			})
			return imgsObj
		},
		imageCssUrl: (state) => {
			const getCssImgBgUrl = (path) => {
				return `url('${imgUrlPrefix}${path}')`
			}

			const imgsObj = {}
			Object.keys(state.imagePath).forEach(el => {
				imgsObj[el] = getCssImgBgUrl(state.imagePath[el])
			})
			return imgsObj
		}
	},
	actions: {
		getInfo() { },
		changeTheme() {

		}
	}
})