import { Suspense, useEffect } from 'react'
import { Spin } from 'antd'
import { useRoutes, useLocation, useNavigate } 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 location = useLocation()
  const navigate = useNavigate()

  useEffect(() => {
    const params = new URLSearchParams(location.search)
    if (!params.get('experiment_id')) {
      params.set('experiment_id', experimentId)
      navigate({ search: params.toString() }, { replace: true })
    }
  }, [location, navigate])

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

export default App
