// import 'devextreme/dist/css/dx.material.blue.light.compact.css'
import '@/assets/css/main.css'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import { createApp, provide, h } from 'vue'
import { DefaultApolloClient } from '@vue/apollo-composable'
import { apolloClient } from '@/utils/api/api.graphql'
import { VanillaComponents, defineConfiguration } from '@flavorly/vanilla-components'

const app = createApp({
  setup() {
    provide(DefaultApolloClient, apolloClient())
  },
  render: () => h(App)
})

app.use(
  VanillaComponents,
  defineConfiguration({
    RichSelect: {
      classes: {
        trigger: 'rich-select-trigger',
        searchInput: 'rich-select-search-input',
        selectedHighlightedOption: 'rich-select-selected-highlighted-option'
      }
    },
    TagsInput: {
      fixedClasses: {
        input:
          'appearance-none py-0 ring-0 border-0 outline-none focus:ring-0 focus:outline-none focus:shadow-none shadow-none w-full bg-transparent text-gray-800 text-base',
        inputWrapper: 'inline-flex flex-grow bg-transparent',
        tagsWrapper: 'flex flex-wrap overflow-hidden -my-2 py-1 px-1 w-full text-xs',
        tagDeleteButtonIcon: 'w-3 h-3',
        tagLabel: 'px-3 text-xs'
      },
      classes: {
        input: 'min-h-[32px]',
        inputWrapper: '',
        tagsWrapper: '',
        tagDeleteButtonIcon: '',
        tagLabel: '',
        trigger: 'bg-gray-200 rounded-lg mb-2 mt-2'
      }
    }
  })
)

app.use(createPinia())
app.use(router)
app.mount('#app')