import React from 'react'
import { Route, Switch } from 'react-router-dom'
import { QueryClient, QueryClientProvider } from 'react-query'
import { ReactQueryDevtools } from 'react-query/devtools'

import Footer from '@/layout/Footer'
import Navbar from '@/layout/Navbar'

import Home from '@/screens/Home'
import NotFound from '@/screens/NotFound'
import ScreenCategoryList from '@/screens/category/List'
import ScreenCategoryForm from '@/screens/category/Form'
import ScreenAuthorList from '@/screens/author/List'
import ScreenAuthorForm from '@/screens/author/Form'
import ScreenBookList from '@/screens/book/List'
import ScreenBookForm from '@/screens/book/Form'
import ScreenBookDetail from '@/screens/book/Detail'
import ScreenLogin from '@/screens/auth/Login'
import ScreenJoin from '@/screens/auth/Join'

function App() {
  const queryClient = new QueryClient()

  return (
    <>
      <header>
        <Navbar />
      </header>
      <main className="container flex-grow p-4 mx-auto">
        <QueryClientProvider client={queryClient}>
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route exact path="/category">
              <ScreenCategoryList />
            </Route>
            <Route path="/category/edit/:id">
              <ScreenCategoryForm />
            </Route>
            <Route path="/category/create">
              <ScreenCategoryForm />
            </Route>
            <Route exact path="/author">
              <ScreenAuthorList />
            </Route>
            <Route path="/author/edit/:id">
              <ScreenAuthorForm />
            </Route>
            <Route path="/author/create">
              <ScreenAuthorForm />
            </Route>
            <Route exact path="/book">
              <ScreenBookList />
            </Route>
            <Route path="/book/edit/:id">
              <ScreenBookForm />
            </Route>
            <Route path="/book/detail/:id">
              <ScreenBookDetail />
            </Route>
            <Route path="/book/create">
              <ScreenBookForm />
            </Route>
            <Route path="/login">
              <ScreenLogin />
            </Route>
            <Route path="/join">
              <ScreenJoin />
            </Route>
            <Route component={NotFound} />
          </Switch>
          <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
      </main>
      <Footer />
    </>
  )
}

export default App