import React Component useEffect from react import Provider from react

import React, { Component, useEffect } from 'react'
import { Provider } from 'react-redux'
import store from './store'
import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
import LoginPage from './components/LoginPage'
import AddItemPage from './components/AddItemPage'
import AddPropPage from './components/AddPropPage'
import ItemListPage from './components/ItemListPage'
import ItemPage from './components/ItemPage'
import PropListPage from './components/PropListPage'
import HomePage from './components/HomePage'
import NotFoundPage from './components/NotFoundPage'
import createMiddleware from './middlewares/createMiddleware'

import './styles/app.scss'
import { actionFetchUserData } from './store/system/actions'

const isAuthenticated = (Component : any ) => {
  return (0 !== store.getState().system.jwt.length ? <Component /> : <Redirect to='/login' />)
}

const isNotAuthenticated  = (Component: any) => {
  return (0 === store.getState().system.jwt.length ? <Component /> : <Redirect to='/' />)
}

const initUser = () => {
  const localJwt : string | null = localStorage.getItem('jwt')
  if (null !== localJwt) {
    store.dispatch(actionFetchUserData({
      jwt: localJwt
    }))
  }
}

const App = () => {
  
  // useEffect(() => initUser())
  initUser()

  return (<Provider store={store}>
    <Router>
      <Switch>
        <Route exact
          path="/"
          render={() => createMiddleware(isAuthenticated, HomePage)} />
        <Route path="/login"
          render={() => createMiddleware(isNotAuthenticated, LoginPage)} />
        <Route path="/items"
          render={() => createMiddleware(isAuthenticated, ItemListPage)} />
        <Route path="/items/add"
          render={() => createMiddleware(isAuthenticated, AddItemPage)} />
        <Route path="/props"
          render={() => createMiddleware(isAuthenticated, PropListPage)} />
        <Route path="/props/add"
          render={() => createMiddleware(isAuthenticated, AddPropPage)} />
        <Route path="/item/:id"
          render={() => createMiddleware(isAuthenticated, ItemPage)} />
        <Route exact
          path="*"
          component={NotFoundPage} />
      </Switch>
    </Router>
  </Provider>)
}

export default App