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

import actions from 'app/actions'

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'
import DashboardContainer from 'app/views/dashboard/dashboard.container'

export default class Router extends Component {
  constructor(props) {
    super(props)
    this.ready = this.ready.bind(this)
  }

  ready() { 
    actions.site.loadSite()
  }

  render() {
    return (
      <AuthGate onAuthenticate={this.ready}>
        <ConnectedRouter history={this.props.history}>
          <div className='app'>
            <Header />
            <Route path='/project/' component={ProjectContainer} />
            <Route path='/episode/' component={EpisodeContainer} />
            <Route path='/editor/:episode_id/' component={EditorContainer} />
            <Route path='/venue/' component={VenueContainer} />
            <Route path='/upload/' component={UploadContainer} />
            <Route path='/users/' component={UserContainer} />
            <Route path='/editor/' component={DashboardContainer} exact />
            <Route path='/' component={DashboardContainer} exact />
          </div>
        </ConnectedRouter>
      </AuthGate>
    )
  }
}