import React, {lazy, Suspense} from 'react'

import {BrowserRouter, Route} from 'react-router-dom'
import {Loader} from 'rsuite';

import '@/Components/_config/axios';
import '@/Components/_config/sentry';
import '@/Components/_config/mixpanel';
import 'react-toastify/dist/ReactToastify.min.css';
import 'rsuite/dist/rsuite.min.css';
import '@/assets/scss/main.scss'

import {CentrifugeWrapper} from '@/Components/Websocket/Centrifuge';
import {useRegisterSW} from 'virtual:pwa-register/react'

const Main = lazy(async () => import('@/Layouts/Main'))
const Login = lazy(async () => import('@/Layouts/Login'))

function App() {

  const intervalMS = 5000; // 1 minute

  const {
    offlineReady: [offlineReady, setOfflineReady],
    needRefresh: [needRefresh, setNeedRefresh],
    updateServiceWorker,
  } = useRegisterSW({
    immediate: true,
    onRegistered(r) {
      if (r) {
        console.log("SW Registered: " + r);
        setInterval(async () => {
          await r.update();
        }, intervalMS);
      }
    },

    onRegisterError(error) {
      console.log("SW registration error", error);
    },
  });

  let token = localStorage.getItem('token')

  if (needRefresh) {
    return <>not found</>
  }

  if (token === null) {
    window.history.pushState({}, '', '/')
    return (
        <BrowserRouter>
          <Suspense fallback={<Loader backdrop content='loading...' vertical/>}>
            <Route exact path='/' name='Login' render={props => <Login {...props} />}/>
          </Suspense>
        </BrowserRouter>
    )
  }
  else {
    return (
        <>
          <CentrifugeWrapper/>
          <Suspense fallback={<Loader backdrop content='loading...' vertical/>}>
            <Main/>
          </Suspense>
        </>
    );
  }
}

export default App;