import './index.css'

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'

import {
  FrappeUI,
  Button,
  Input,
  TextInput,
  FormControl,
  ErrorMessage,
  Dialog,
  Alert,
  Badge,
  setConfig,
  frappeRequest,
  FeatherIcon,
} from 'frappe-ui'

const globalComponents = {
  Button,
  TextInput,
  Input,
  FormControl,
  ErrorMessage,
  Dialog,
  Alert,
  Badge,
  FeatherIcon,
}

const app = createApp(App)

setConfig('resourceFetcher', frappeRequest)
app.use(FrappeUI, {
  socketio: false, // Disable WebSocket - not supported by proxy
})
app.use(router)

for (const key in globalComponents) {
  app.component(key, globalComponents[key])
}

if (import.meta.env.DEV) {
  frappeRequest({
    url: '/api/method/cloud_portal.www.portal.get_context_for_dev',
  })
    .then((values) => {
      for (const key in values) {
        window[key] = values[key]
      }
    })
    .catch((e) => {
      console.warn('Failed to fetch dev context:', e)
    })
    .finally(() => {
      app.mount('#app')
    })
} else {
  app.mount('#app')
}
