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 ChangePassword = lazy(() => import('../ChangePassword'))
const Oauth = lazy(() => import('../Oauth'))

const Main = styled.main`
  width: 100%;
  height: 100vh;
  overflow-y: auto;

  ::-webkit-scrollbar {
    display: none;
  }
  
  ${isMobileDevice
    ? css`
      padding: 0 12px;
      max-height: 100vh;
      `
    : ''};
`

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

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

        <Route path={PAGES.oauth}>
          <Oauth />
        </Route>

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

        <Route path={PAGES.change_password}>
          <ChangePassword />
        </Route>

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