import { Suspense, useEffect } from 'react'
import { Spin } from 'antd'
import { useRoutes, useSearchParams, useLocation } from 'react-router'
import routes from './router/routes'
import './App.scss'

const params = new URLSearchParams(window.location.search)
const experimentId = params.get('experiment_id') || '7028276368903241728'

const App = () => {
  const element = useRoutes(routes)
  const [searchParams, setSearchParams] = useSearchParams()
  const location = useLocation()

  useEffect(() => {
    const currentId = searchParams.get('experiment_id')
    if (!currentId) {
      const newSearchParams = new URLSearchParams(location.search)
      newSearchParams.set('experiment_id', experimentId)
      setSearchParams(newSearchParams)
    }
  }, [location.search, searchParams, setSearchParams])

  return (
    <Suspense
      fallback={
        <div
          style={{ width: '100%', height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Spin size="large" />
        </div>
      }>
      {element}
    </Suspense>
  )
}

export default App
