// Html page
import 'file-loader?name=[name].[ext]!../index.html'

// Import default image
import 'file-loader?name=img/[name].png!../img/noimage.png'

// Styles
import '../less/app.less'

// React
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 Alert from './components/alerts/alert'
import MovieList from './components/movies/list'
import ShowList from './components/shows/list'
import ShowDetails from './components/shows/details'
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}/>
        <Alert {...this.props}/>
        <div className="container-fluid">
          {React.cloneElement(this.props.children, this.props)}
        </div>
      </div>
    );
  }
}

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

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'/>
)
const MovieListPolochon = (props) => (
  <MovieList {...props} moviesUrl='/movies/polochon'/>
)
const MovieListWishlisted = (props) => (
  <MovieList {...props} moviesUrl='/wishlist/movies'/>
)
const MovieListSearch = (props) => (
  <MovieList {...props} />
)

const ShowListPopular = (props) => (
  <ShowList {...props} showsUrl='/shows/explore'/>
)
const ShowListPolochon = (props) => (
  <ShowList {...props} showsUrl='/shows/polochon'/>
)
const ShowListWishlisted = (props) => (
  <MovieList {...props} moviesUrl='/wishlist/shows'/>
)
const ShowDetailsView = (props) => (
  <ShowDetails {...props} />
)
const ShowListSearch = (props) => (
  <ShowList {...props} />
)

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/search/:search" component={UserIsAuthenticated(MovieListSearch)} />
        <Route path="/movies/popular" component={UserIsAuthenticated(MovieListPopular)} />
        <Route path="/movies/polochon" component={UserIsAuthenticated(MovieListPolochon)} />
        <Route path="/movies/wishlist" component={UserIsAuthenticated(MovieListWishlisted)} />
        <Route path="/shows/search/:search" component={UserIsAuthenticated(ShowListSearch)} />
        <Route path="/shows/popular" component={UserIsAuthenticated(ShowListPopular)} />
        <Route path="/shows/polochon" component={UserIsAuthenticated(ShowListPolochon)} />
        <Route path="/shows/wishlist" component={UserIsAuthenticated(ShowListWishlisted)} />
        <Route path="/shows/details/:imdbId" component={UserIsAuthenticated(ShowDetailsView)} />
      </Route>
    </Router>
  </Provider>
),document.getElementById('app'));