/* eslint-disable @typescript-eslint/no-explicit-any */
import type { ComponentType, PropsWithChildren } from 'react'
import React, { Suspense, useEffect } from 'react'

import { SplashScreen } from './splash-screen'
import { Router } from './router'
import { isStandalone } from '../utils/env'
import { connect } from '../boostrap'
import type { BootstrapOptions } from '../types'
import { proxyV1 } from '@vtex/raccoon-core'

const DevToolbar = React.lazy(() => import('./dev-toolbar'))

export function Challenge({ children }: PropsWithChildren) {
  return (
    <Suspense fallback={<SplashScreen />}>
      <Router>{children}</Router>
    </Suspense>
  )
}

export function withChallenge<P>(
  WrappedComponent: ComponentType<P>,
  options?: BootstrapOptions,
) {
  const { proxy, renderMode } = options ?? {}

  if (isStandalone()) {
    return function Component(props: any) {
      useEffect(() => {
        connect(options)
      }, [])

      return (
        <Suspense>
          <DevToolbar>
            <WrappedComponent {...props} />
          </DevToolbar>
        </Suspense>
      )
    }
  }

  if (proxy?.version === proxyV1 && renderMode === 'client') {
    return function Component(props: any) {
      useEffect(() => {
        connect(options)
      }, [])

      return <WrappedComponent {...props} />
    }
  }

  return function Component(props: any) {
    useEffect(() => {
      connect(options)
    }, [])

    return (
      <Challenge>
        <WrappedComponent {...props} />
      </Challenge>
    )
  }
}