import './assets/main.css'

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
// import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createI18n } from 'vue-i18n'

import App from './App.vue'
import router from './router'
import messages from './message'

const app = createApp(App)

const vuetify = createVuetify({})

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

app.use(vuetify)

const i18n = createI18n({
  legacy: false,
  allowComposition: true,
  locale: 'en', // set locale
  // fallbackLocale: 'en', // set fallback locale
  messages, // set locale messages
  globalInjection: true
})

app.use(i18n)

app.mount('#app')

if (typeof window !== undefined) {
  ;(window as any).IMG_BASE_URL = 'http://112.74.45.244:8100'
}

router.beforeEach((to) => {
  const doc = document as any
  if (to.meta.title) {
    doc.title = to.meta.title
  }
  if (to.meta.content) {
    const head = document.getElementsByTagName('head')
    const meta = document.createElement('meta')
    if ((to.meta.content as any).keywords) {
      doc
        .querySelector('meta[name="keywords"]')
        .setAttribute('content', (to.meta.content as any).keywords)
    }
    doc
      .querySelector('meta[name="description"]')
      .setAttribute('content', (to.meta.content as any).description)
    ;(meta as any).content = to.meta.content
    head[0].appendChild(meta)
  }
})