import React, {lazy, Suspense} from 'react';
import {BrowserRouter, Route, Link, Switch} from 'react-router-dom';
import {hot} from 'react-hot-loader/root';

import ApplicationLayout from './components/layout/application_layout';

const Pokemon = lazy((): Promise<any> => import('./components/pages/pokemon'));
const NotFound = lazy((): Promise<any> => import('./components/pages/not_found'));
const TestComponent = lazy((): Promise<any> => import('./components/test_component'));
const RelayComponent = lazy((): Promise<any> => import('./components/relay_component'));

import './assets/stylesheets/app.scss';

function App(): React.ReactElement {
  return (
    <BrowserRouter>
      <ApplicationLayout>
        <Suspense fallback={<div>Loading...</div>}>
          <Switch>
            <Route component={TestComponent} exact path='/' />
            <Route component={RelayComponent} exact path='/relay' />
            <Route component={Pokemon} path='/pokemon' />

            <Route component={NotFound} />
          </Switch>

          <p>
            <Link to='/pokemon'>Show me the pokemon!</Link>
          </p>
          <p>
            <Link to='/relay'>Take me to relay</Link>
          </p>
        </Suspense>
      </ApplicationLayout>
    </BrowserRouter>
  );
}

export default hot(App);