import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

type UiEvalServiceModule = typeof import('./services/UiEvalService')

let uiEvalServicePromise: Promise<UiEvalServiceModule> | undefined
const loadUiEvalService = () =>
  (uiEvalServicePromise ??= import('./services/UiEvalService'))

const lazyUiEvalService = new Proxy<Record<string, (...args: unknown[]) => void>>(
  {},
  {
    get: (_, methodName) => {
      if (typeof methodName !== 'string') return undefined

      return (...args: unknown[]) => {
        void loadUiEvalService()
          .then(({ UiEvalService }) => {
            const serviceMethod = Reflect.get(UiEvalService, methodName)
            if (typeof serviceMethod === 'function') {
              Reflect.apply(serviceMethod, UiEvalService, args)
            }
          })
          .catch((error: unknown) => {
            console.error(`UiEvalService.${methodName} could not be loaded.`, error)
          })
      }
    },
  },
)

const globalWithUiEval = globalThis as typeof globalThis & {
  UiEvalService?: typeof lazyUiEvalService
}
globalWithUiEval.UiEvalService ??= lazyUiEvalService

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />)