import { computed, createApp } from 'vue'
import { createPinia, storeToRefs } from 'pinia'

import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'

import './styles/main.less'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import { useUserStore } from './stores/user'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(ElementPlus)

const { user } = storeToRefs(useUserStore())
app.provide(
    'isAdmin',
    computed(() => {
        if (!(user.value && user.value.roles)) return false
        return user.value.roles.includes('admin')
    })
)

app.provide(
    'isAdminOrApi',
    computed(() => {
        if (!(user.value && user.value.roles)) return false
        return user.value.roles.includes('admin') || user.value.roles.includes('api')
    })
)

app.mount('#app')
