import './css/app.css'
import 'vue-sonner/style.css'
import { client } from '~/client'
import { createInertiaApp } from '@inertiajs/vue3'
import { TuyauProvider } from '@adonisjs/inertia/vue'
import { createApp, type DefineComponent, h } from 'vue'
import { resolvePageComponent } from '@adonisjs/inertia/helpers'

import DefaultLayout from './pages/layout/defaultLayout.vue'
import EmptyLayout from './pages/layout/emptyLayout.vue'

// directives
// @ts-ignore
import validationErrorDirective from '~/directives/v_validation_error'
// @ts-ignore
import priceDirective from '~/directives/v-price'
// @ts-ignore
import deleteConfirmDirective from '~/directives/v-delete-confirm'

const appName = import.meta.env.VITE_APP_NAME || 'AdonisJS'

createInertiaApp({
  title: (title) => (title ? `${title} - ${appName}` : appName),

  resolve: async (name) => {
    const page = await resolvePageComponent(
      `./pages/${name}.vue`,
      import.meta.glob<DefineComponent>('./pages/**/*.vue')
    )

    // Choix du layout
    const layout =
      name.startsWith('auth/') || name.startsWith('account')
        ? EmptyLayout
        : DefaultLayout

    page.default.layout = page.default.layout || layout

    return page
  },

  setup({ el, App, props, plugin }) {
    const vueApp = createApp({
      render: () =>
        h(
          TuyauProvider,
          { client },
          {
            default: () => h(App, props),
          }
        ),
    })

    vueApp
      .use(plugin)
      .directive('validation-error', validationErrorDirective)
      .directive('price', priceDirective)
      .directive('delete-confirm', deleteConfirmDirective)
      .mount(el)
  },

  progress: {
    color: '#4B5563',
  },
})