import { lazy } from 'react'

import {
  Redirect,
  Route,
  Switch,
} from 'react-router-dom'

import styled, { css } from 'styled-components/macro'

import { isMobileDevice } from 'config/userAgent'

import { useLexicsConfig } from 'features/LexicsStore'

import { PAGES } from '../../config/pages'
import { lexics } from '../../config/lexics'

const Login = lazy(() => import('../Login'))
const Registration = lazy(() => import('../Registration'))

const Main = styled.main`
  width: 100%;
  ${isMobileDevice
    ? css`
      padding: 0 12px;
        @media screen and (orientation: landscape){
          min-height: 100vh;
        }
      `
    : ''};
`

export const App = () => {
  useLexicsConfig(lexics)

  return (
    <Main>
      <Switch>
        <Route path={PAGES.login}>
          <Login />
        </Route>

        <Route path={PAGES.registration}>
          <Registration />
        </Route>

        <Redirect to={PAGES.login} />
      </Switch>
    </Main>
  )
}
