import React from 'react';
import {BrowserProtocol, queryMiddleware} from 'farce';
import {createFarceRouter, createRender, Route, makeRouteConfig} from 'found';
import {Resolver} from 'found-relay';
import {graphql} from 'react-relay';

import {hot} from 'react-hot-loader/root';

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

import NotFound from './components/pages/NotFound';
import TestComponent from './components/TestComponent';

import PokemonIndex from './components/pages/pokemon/Index';
import PokemonCreate from './components/pages/pokemon/Create';

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

function App(): React.ReactElement {
  const routeConfig = makeRouteConfig(
    <Route Component={ApplicationLayout} path='/'>
      <Route Component={TestComponent} />
      <Route
        Component={PokemonIndex}
        path='pokemon'
        query={graphql`
          query AppPokemonIndexQuery {
            pokemonConnection {
              edges {
                node {
                  id
                  ...Show_pokemon
                }
              }
            }
          }
        `}
      />

      <Route Component={PokemonCreate} path='pokemon/create' />
      <Route Component={NotFound} path='*' />
    </Route>
  );

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

    render: createRender({}),
  });

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

export default hot(App);