/** @module SZTMExcel */

// Import dependencies
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, applyMiddleware, combineReducers, bindActionCreators, compose } from 'redux'
import { Provider, connect } from 'react-redux'
import createSagaMiddleware from 'redux-saga'
import { all } from 'redux-saga/effects'

/** react-router is not used in this project.
import { browserHistory, Router, Route, IndexRoute } from 'react-router'
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
*/

// Import the main app
import Main from './Main'

// Import the submodules
import playerList from './playerList'
import calendar from './calendar'
import layout from './layout'
import scraper from './scraper'
import alerts from './alerts'

/**
 * Redux Section
 */

/** The root reducer is combined from all sub-module reducers */
const rootReducer = combineReducers({
  playerList: playerList.reducer,
  calendar: calendar.reducer,
  layout: layout.reducer,
  scraper: scraper.reducer,
  alerts: alerts.reducer
})
console.log('Root reducer:', rootReducer)

/** The default state is combined from all sub-module states */
const defaultState = {
  playerList: playerList.state,
  calendar: calendar.state,
  layout: layout.state,
  scraper: scraper.state,
  alerts: alerts.state
}
console.log('Default state:', defaultState)

/** The root saga, calling all other sagas */
function * rootSaga () {
  console.log('rootSaga called')
  yield all([
    playerList.saga(),
    calendar.saga(),
    layout.saga(),
    scraper.saga(),
    alerts.saga()
  ])
}

/** Create the saga middleware */
const sagaMiddleware = createSagaMiddleware()

const logger = store => next => action => {
  console.log('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  return result
}

const crashReporter = store => next => action => {
  try {
    return next(action)
  } catch (err) {
    console.error('Caught an exception!', err)
    throw err
  }
}

const middleware = [
  logger,
  crashReporter,
  alerts.middleware,
  sagaMiddleware
]
/** The enhancer allows to use Redux development tools in Chrome */
// see: https://github.com/zalmoxisus/redux-devtools-extension/issues/220
let enhancer
if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
  enhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(
    applyMiddleware(...middleware)
  )
} else {
  enhancer = compose(
    applyMiddleware(...middleware)
  )
}
// const enhancer = compose(
//   applyMiddleware(alerts.middleware),
//   applyMiddleware(sagaMiddleware),
//   applyMiddleware(logger),
//   applyMiddleware(crashReporter),
//   window.devToolsExtension ? window.devToolsExtension() : f => f
// )
console.log('Enhancers:', enhancer)

/** Build the Redux store from the rootReducer, the defualtState and the enhancers. */
const store = createStore(rootReducer, defaultState, enhancer)
console.log('Store:', store)
sagaMiddleware.run(rootSaga)
/** react-route is not used in this project.
const history = syncHistoryWithStore(browserHistory, store)
console.log('history:', history)
*/

/** Collect the action creators from all modules in actionCreators */
const actionCreators = {
  playerList: playerList.actions,
  calendar: calendar.actions,
  layout: layout.actions,
  scraper: scraper.actions,
  alerts: alerts.actions
}

/** Creates a function  */
function mapStateToProps (state) {
  const propState = {}
  Object.keys(state).forEach(key => {
    propState[key] = state[key]
  })
  console.log('Mapping state to props:', state, propState)
  return propState
}

function mapDispatchToProps (dispatch) {
  const boundActionCreators = {}
  console.log('ActionCreators', actionCreators)
  Object.keys(actionCreators).forEach(key => {
    boundActionCreators[`${key}Actions`] = bindActionCreators(actionCreators[key], dispatch)
  })
  console.log('Mapping dispatch to props:', dispatch, boundActionCreators)
  return boundActionCreators
}

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

/**
 * React-Router Section
 **/

/** Combine the routes from all modules.
const router = (
  <Provider store={store}>
    <Router history={history}>
      <Route component={App}>
        <Route path='/'>
          <IndexRoute component={demo_module.components.DemoModule} />
          <Route path='/project/:projectId' component={project.components.Project} />
          <Route path='/project' component={project.components.Project} />
          <Route path='/registermap/:registermapId' component={registermap.components.Registermap} />
          <Route path='/registermap' component={registermap.components.Registermap} />
          <Route path='/sample' component={Sample} />
        </Route>
        {demo_module.routes}
        <Route path='/login' />
      </Route>
    </Router>
  </Provider>
)
*/
const provider = (
  <Provider store={store}>
    <App />
  </Provider>
)

/**
 * Render the app
 **/
ReactDOM.render(
  provider,
  document.getElementById('root')
)