import Layout from '@/components/layouts'
import Theme from '@/components/template/Theme'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { StoreProvider } from 'easy-peasy'
import { BrowserRouter } from 'react-router-dom'
import { store } from './store'
import { DynamicRoutesProvider } from './routes/dynamicRoutesContext'
import { ComponentProvider } from './contexts/ComponentContext'
import { registerServiceWorker } from './views/version/swRegistration'
import { useEffect } from 'react'
import DevExtremeBoundary from './components/devExtreme/DevExtremeBoundary'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 30_000,
      refetchOnWindowFocus: false,
    },
  },
})

function App() {
  useEffect(() => {
    registerServiceWorker()
  }, [])

  return (
    <StoreProvider store={store}>
      <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
        <DynamicRoutesProvider>
          <ComponentProvider>
            <QueryClientProvider client={queryClient}>
              <DevExtremeBoundary>
                <Theme>
                  <Layout />
                </Theme>
              </DevExtremeBoundary>
            </QueryClientProvider>
          </ComponentProvider>
        </DynamicRoutesProvider>
      </BrowserRouter>
    </StoreProvider>
  )
}

export default App