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

import styled from 'styled-components'

import { isIOS } from 'config/userAgent'

import * as serviceWorker from './serviceWorker'

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

const ScContent = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #000000;
  flex-direction: column;
`
// временная заглушка пока бэкенд переезжает
ReactDOM.render(
  <StrictMode>
    <Suspense fallback={null}>
      {/* <App /> */}
      <ScContent>
        <p>The site is temporarily unavailable</p>
        <p>El sitio está temporalmente fuera de servicio</p>
      </ScContent>
    </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()
}