import React, {lazy, Suspense} from 'react';
//import React from 'react';
//import {Route, Link, makeRouteConfig, RouteConfig} from 'found';
//import {hot} from 'react-hot-loader/root';

import {BrowserRouter, Link, Route, Switch} from 'react-router-dom';
//import {BrowserProtocol, queryMiddleware} from 'farce';
//import {createFarceRouter, createRender} from 'found';
//import {Resolver} from 'found-relay';

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

//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'));
//const TestComponent = lazy((): Promise<any> => import('./components/TestComponent'));
import TestComponent from './components/TestComponent';
import RelayTest from './components/RelayTest';

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

function App(): React.ReactElement {
  return (
    <BrowserRouter>
      <ApplicationLayout>
        <Suspense fallback={<div>Loading...</div>}>
          <Switch>
            <Route component={RelayTest} path='/' />
          </Switch>
          <p>
            <Link to='/pokemon'>Show me the pokemon!</Link>
          </p>
        </Suspense>
      </ApplicationLayout>
    </BrowserRouter>
  );

  //const BrowserRouter = createBrowserRouter({
  //  ),
  //});
  //const routeConfig: RouteConfig = makeRouteConfig(
  //<Route Component={ApplicationLayout} path='/'>
  //<Route Component={TestComponent} />
  //</Route>
  //);

  //const Router = createFarceRouter({
  //historyProtocol: new BrowserProtocol(),
  //historyMiddlewares: [queryMiddleware],
  //routeConfig,

  //render: createRender({}),
  //});

  //return <Router resolver={new Resolver(graphqlEnvironment)} />;
}

//export default hot(App);
export default App;