import React, { Component } from 'react'
import { ConnectedRouter } from 'connected-react-router'
import { Route } from 'react-router'

import AuthGate from 'app/views/auth/auth.gate'
import Header from 'app/views/nav/header.component'

import ProjectContainer from 'app/views/project/project.container'
import EpisodeContainer from 'app/views/episode/episode.container'
import VenueContainer from 'app/views/venue/venue.container'
import UploadContainer from 'app/views/upload/upload.container'
import UserContainer from 'app/views/user/user.container'
import EditorContainer from 'app/views/editor/editor.container'

export default class Router extends Component {
  render() {
    return (
      <AuthGate>
        <ConnectedRouter history={this.props.history}>
          <div className='app'>
            <Header />
            <Route path='/project/' component={ProjectContainer} />
            <Route path='/episode/' component={EpisodeContainer} />
            <Route path='/editor/' component={EditorContainer} />
            <Route path='/venue/' component={VenueContainer} />
            <Route path='/upload/' component={UploadContainer} />
            <Route path='/users/' component={UserContainer} />
          </div>
        </ConnectedRouter>
      </AuthGate>
    )
  }
}

/*
  <Route exact path='/' render={DashboardContainer} />
*/