import {
  lazy,
  Suspense,
  StrictMode,
} from 'react'
import ReactDOM from 'react-dom'

import { isIOS } from 'config/userAgent'

// import { makeServer } from 'utilits/Mirage/Mirage'

import * as serviceWorker from './serviceWorker'

export const App = process.env.REACT_APP_TYPE === 'auth-service'
  ? lazy(() => import('features/AuthServiceApp'))
  : lazy(() => import('features/App'))

// process.env.NODE_ENV === 'development' && makeServer({ environment: 'development' })

ReactDOM.render(
  <StrictMode>
    <Suspense fallback={null}>
      <App />
    </Suspense>
  </StrictMode>,
  document.getElementById('root'),
)

if (isIOS) {
  serviceWorker.register({
    onUpdate: (registration) => {
      const waitingServiceWorker = registration.waiting
      if (waitingServiceWorker) {
        waitingServiceWorker.addEventListener('statechange', (event) => {
          // @ts-expect-error
          if (event.target?.state === 'activated') {
            window.location.reload()
          }
        })
        waitingServiceWorker.postMessage({ type: 'SKIP_WAITING' })
      }
    },
  })
} else {
  serviceWorker.unregister()
}
