import 'babel-polyfill'
import React from 'react'
import ReactDOM from 'react-dom'
import { bindActionCreators } from 'redux'
import { Provider, connect } from 'react-redux'
import { Router, Route, IndexRoute, IndexRedirect, Link, hashHistory } from 'react-router'
import { routerActions } from 'react-router-redux'
import { UserAuthWrapper } from 'redux-auth-wrapper'

// Root reducer
import rootReducer from './reducers/index'

// Action creators
import * as actionCreators from './actions/actionCreators'

// Store
import store, { history } from './store'

// Components
import NavBar from './components/navbar'
import Error from './components/errors'
import MovieList from './components/movies/list'
import UserLoginForm from './components/users/login'
import UserEdit from './components/users/edit'
import UserSignUp from './components/users/signup'

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

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

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

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

// Redirects to /login by default
const UserIsAuthenticated = UserAuthWrapper({
  authSelector: state => state.userStore,
  redirectAction: routerActions.replace,
  wrapperDisplayName: 'UserIsAuthenticated',
  predicate: user => user.isLogged,
  failureRedirectPath: '/users/login',
})

// TODO find a better way
const MovieListPopular = (props) => (
  <MovieList {...props} moviesUrl='/movies/explore/popular'/>
)
const MovieListPolochon = (props) => (
  <MovieList {...props} moviesUrl='/movies/polochon'/>
)

ReactDOM.render((
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRedirect to="/movies/polochon" />
        <Route path="/users/login" component={UserLoginForm} />
        <Route path="/users/signup" component={UserSignUp} />
        <Route path="/users/edit" component={UserIsAuthenticated(UserEdit)} />
        <Route path="/movies/popular" component={UserIsAuthenticated(MovieListPopular)} />
        <Route path="/movies/polochon(/:page)" component={UserIsAuthenticated(MovieListPolochon)} />
      </Route>
    </Router>
  </Provider>
),document.getElementById('app'));