import { createApp } from 'vue'
import { createPinia } from 'pinia'

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

import './assets/main.css'
import 'unfonts.css'
import 'vuetify/styles'
import '@mdi/font/css/materialdesignicons.css'

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import { VAvatarGroup } from 'vuetify/labs/VAvatarGroup'
import * as directives from 'vuetify/directives'
import { registerLayouts } from '@/layouts/register.ts'
import { readStoredThemeMode } from '@/lib/theme.ts'

const app = createApp(App)

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

const vuetify = createVuetify({
  components: { ...components, VAvatarGroup },
  directives,
  theme: {
    defaultTheme: readStoredThemeMode(),
    themes: {
      dark: {
        colors: {
          link: '#CFD8DC',
          alt: '#616161',
        },
      },
      light: {
        colors: {
          link: '#37474F',
          alt: '#E0E0E0',
        },
      },
    },
  },
  defaults: {
    global: {
      rounded: 'lg',
    },
    VBtn: {
      variant: 'tonal',
    },
    VTextField: {
      variant: 'outlined',
      density: 'compact',
      hideDetails: true,
    },
    VSwitch: {
      density: 'compact',
      hideDetails: true,
    },
    VSheet: {},
    VCombobox: {
      variant: 'outlined',
      density: 'compact',
      hideDetails: true,
    },
    VCheckbox: {
      density: 'compact',
      hideDetails: true,
    },
    VList: {
      density: 'compact',
    },
    VSelect: {
      variant: 'solo',
      density: 'compact',
      hideDetails: true,
    },
    VCard: {
      elevation: 0,
    },
  },
})

app.use(vuetify)

registerLayouts(app)

app.mount('#app')