import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import store from './store'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import i18n from './i18n'
import 'virtual:svg-icons-register'

import 'normalize.css'
import 'virtual:uno.css'

// Theme colors configuration
const themeColors = {
	primary: '#ff6b6b',
	'primary-light-3': '#ff8a8a',
	'primary-light-5': '#ffa3a3',
	'primary-light-7': '#ffbcbc',
	'primary-light-8': '#ffd0d0',
	'primary-light-9': '#ffe3e3',
	'primary-dark-2': '#e55555',
	success: '#67c23a',
	'success-light-3': '#85ce61',
	'success-light-5': '#a6e4a1',
	'success-light-7': '#c6f6d5',
	'success-light-8': '#d4edda',
	'success-light-9': '#e1f5e3',
	'success-dark-2': '#55b82d',
	warning: '#e6a23c',
	'warning-light-3': '#edb563',
	'warning-light-5': '#f3d19e',
	'warning-light-7': '#f9e4ba',
	'warning-light-8': '#fce9cc',
	'warning-light-9': '#fef0d9',
	'warning-dark-2': '#d68830',
	danger: '#f56c6c',
	'danger-light-3': '#f78989',
	'danger-light-5': '#f9a8a8',
	'danger-light-7': '#fcc7c7',
	'danger-light-8': '#fdd9d9',
	'danger-light-9': '#feebeb',
	'danger-dark-2': '#dd5960',
	error: '#f56c6c',
	'error-light-3': '#f78989',
	'error-light-5': '#f9a8a8',
	'error-light-7': '#fcc7c7',
	'error-light-8': '#fdd9d9',
	'error-light-9': '#feebeb',
	info: '#909399',
	'info-light-3': '#a6a9ad',
	'info-light-5': '#b1b3b9',
	'info-light-7': '#d3d4d6',
	'info-light-8': '#e4e4e7',
	'info-light-9': '#f2f2f5',
	'info-dark-2': '#7a7d82'
}

const root = document.documentElement
Object.entries(themeColors).forEach(([key, value]) => {
	root.style.setProperty(`--el-color-${key}`, value)
})

const app = createApp(App)
app.use(store)
app.use(router)

const currentLocale = zhCn
app.use(ElementPlus, { locale: currentLocale })

app.provide('i18n', i18n)
app.config.globalProperties.$t = (key: string) => i18n.t(key)

app.mount('#app')