import { lazy } from 'react'

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

import styled from 'styled-components/macro'

import { PAGES } from 'config'
import { publicLexics } from 'config/lexics/public'

import { useLexicsConfig } from 'features/LexicsStore'
import { LanguageSelect } from 'features/LanguageSelect'
import { HeaderStyled, HeaderGroup } from 'features/ProfileHeader/styled'

const Login = lazy(() => import('features/Login'))
const Register = lazy(() => import('features/Register'))

const Main = styled.main`
  width: 100%;
`

export const UnauthenticatedApp = () => {
  useLexicsConfig(publicLexics)

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

        <Route path={PAGES.register}>
          <Register />
        </Route>

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