import React, { Component } from 'react'
import { hot } from 'react-hot-loader'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import axios from 'axios'

/* IMPORT PAGES */
import DevelopersC from './pages/Developers/DevelopersC'
import HomeC from './pages/Home/HomeC'
import LoginC from './pages/Login/LoginC'
import ProfileC from './pages/Profile/ProfileC'
import ItemTypeC from './pages/ItemType/ItemTypeC'
import ViewItemC from './pages/ViewItem/ViewItemC'
import Results from './pages/Results/Results'
import NoMatch from './pages/NoMatch/NoMatchC'

/* IMPORT COMPONENTS */
import Navigation from './components/Navigation'
import Footer from './components/Footer'

/* IMPORT ROLES */
import Admin from './roles/Admin'
import Manager from './roles/Manager'
import User from './roles/User'

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      token: '',
      userRole: '',
      userKey: -1,
      inDevelopment: true // set this to false when you are done with development or delete this and its aproriate places
    }
  }

  /* UPDATE FUNCTIONS FOR STATE */
  getUserCredentials = (data) => {
    this.setState({
      token: data.newToken,
      userRole: data.role,
      userKey: data.id
    })
  }

  componentDidMount () {
    this.setState({
      token: sessionStorage.getItem('token'),
      userRole: sessionStorage.getItem('userRole'),
      userKey: sessionStorage.getItem('userID')
    })
  }

  render () {
    if (this.state.token === null) {
      return (
        <BrowserRouter>
          <div>
            <Navigation />
            <Switch>
              <Route exact path='/' render={(props) => <LoginC {...props} stateHandler={this.getUserCredentials} />} />
              <Route component={NoMatch} />
            </Switch>
            <Footer />
          </div>
        </BrowserRouter>
      )
    } else if (this.state.userRole === 'admin') {
      return (<Admin development={this.state.inDevelopment} userKey={this.state.userKey} userRole={this.state.userRole}/>)
    } else if (this.state.userRole === 'manager') {
      return (<Manager development={this.state.inDevelopment} userKey={this.state.userKey} userRole={this.state.userRole}/>)
    } else { // this.state.userRole === 'user'
      return (<User userKey={this.state.userKey} userRole={this.state.userRole}/>)
    }
  }
}

export default hot(module)(App)
