import Context from './redux/context'
import { useReducer, useState } from 'react'
import Header from './components/Header'
import Footer from './components/Footer'
import Grid from './components/Grid'
import reducer from './redux/reducer'
import Database from './controllers/Database'
import nav from './config/navigation'
import env from './env'
import grid from './config/grid'
import { ___fetchFilter, ___fetchLimit, ___route, ___set404 } from './helpers'

function App () {
  const initialPath = window.location.pathname.slice(1).split('/')[0]

  /* Display Error404 Page if condition is TRUE, the initialPath is not listed in routes config */
  ___set404(nav.routes.filter(r => initialPath === r.slug).length === 0)

  /* Managing states of Modal Edit Form */
  const [show, setShow] = useState(false)

  /* The Hooks*/
  const [route, dispatchRoute] = useReducer(reducer, ___route(initialPath))
  const [storage, dispatchStorage] = useReducer(
    reducer,
    route !== 'summary' ? Database.getNotesSanitized( ___fetchFilter(route), ___fetchLimit(route) ) : Database.getAnalytics()
  )

  return (
    <Context.Provider value={{ env, nav, grid, route, storage, dispatchStorage, dispatchRoute, show, setShow }}>
      <Header/>
      <Grid/>
      <Footer/>
    </Context.Provider>
  )
}

export default App


