import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, IndexRoute, Link, hashHistory } from 'react-router'
import { Provider } from 'react-redux'

import rootReducer from './reducers/index'
import store, { history } from './store'

import NavBar from './components/navbar.jsx'
import MovieList from './components/movie-list.jsx'
import UserLoginForm from './components/user-login.jsx'

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as actionCreators from './actions/actionCreators'

class Main extends React.Component {
  render() {
    return (
      <div>
        <div className="navbar navbar-inverse navbar-fixed-top">
          <NavBar />
        </div>
        <div className="container-fluid">
          <div className="container">
            {React.cloneElement(this.props.children, this.props)}
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    movieStore: state.movieStore,
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch);
}

const App = connect(mapStateToProps, mapDispatchToProps)(Main);

ReactDOM.render((
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App}>
        <Route path="/users/login" component={UserLoginForm} />
        <IndexRoute component={MovieList} />
        <Route path="/movies/popular" component={MovieList} />
      </Route>
    </Router>
  </Provider>
),document.getElementById('app'));