import { applyMiddleware, compose, combineReducers, createStore } from 'redux'
import { connectRouter, routerMiddleware } from 'connected-react-router'
import { createBrowserHistory } from 'history'
import thunk from 'redux-thunk'

// cms
import uploadReducer from 'app/views/upload/upload.reducer'
import siteReducer from 'app/views/site/site.reducer'
import episodeReducer from 'app/views/episode/episode.reducer'
import projectReducer from 'app/views/project/project.reducer'
import venueReducer from 'app/views/venue/venue.reducer'
import authReducer from 'app/views/auth/auth.reducer'
import userReducer from 'app/views/user/user.reducer'

// editor
import mediaReducer from 'app/views/editor/media/media.reducer'
import annotationReducer from 'app/views/editor/annotation/annotation.reducer'
import alignReducer from 'app/views/editor/align/align.reducer'
import paragraphReducer from 'app/views/editor/paragraph/paragraph.reducer'

// viewer
import viewerReducer from 'app/views/viewer/viewer.reducer'
import audioReducer from 'app/views/audio/audio.reducer'

const createRootReducer = history => (
  combineReducers({
    router: connectRouter(history),
    site: siteReducer,

    upload: uploadReducer,
    annotation: annotationReducer,
    media: mediaReducer,
    episode: episodeReducer,
    project: projectReducer,
    venue: venueReducer,
    user: userReducer,
    auth: authReducer,

    align: alignReducer,
    paragraph: paragraphReducer,

    audio: audioReducer,
    viewer: viewerReducer,
  })
)

const configureStore = (initialState = {}, history) => {
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

  const store = createStore(
    createRootReducer(history),
    initialState,
    composeEnhancers(
      applyMiddleware(
        thunk,
        // createDebounce(),
        routerMiddleware(history)
      ),
    ),
  )

  return store
}

const history = createBrowserHistory()
const store = configureStore({}, history)
const { dispatch } = store

export { store, history, dispatch }