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

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

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

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

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

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

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

export default hot(App);