import { crudState, crudReducer } from 'app/api/crud.reducer'
import { applyMiddleware, compose, combineReducers, createStore } from 'redux'
import { connectRouter, routerMiddleware } from 'connected-react-router'
import { createBrowserHistory } from 'history'
import thunk from 'redux-thunk'

import audioReducer from 'app/views/audio/audio.reducer'
import siteReducer from 'site/site/site.reducer'

import alignReducer from 'app/views/editor/align/align.reducer'
import paragraphReducer from 'app/views/editor/paragraph/paragraph.reducer'
import viewerReducer from 'app/views/viewer/viewer.reducer'

// document.querySelector("#plain_content").remove()
const siteData = JSON.parse(document.querySelector("#site_data").innerText)

const createRootReducer = history => (
  combineReducers([
    "media",
    "annotation",
    "paragraph",
    "episode",
    "venue",
  ].reduce((a, type) => {
    a[type] = (() => {
      const initialState = {
        ...crudState(),
        index: siteData[type],
      }
      if (type === 'paragraph') {
        return (state=initialState, action) => paragraphReducer(state, action)
      } else {
        const typeReducer = crudReducer(type)
        return (state=initialState, action) => typeReducer(state, action)
      }
    })()
    return a
  }, {
    // auth: (state = {}) => state,
    router: connectRouter(history),
    site: siteReducer,
    audio: audioReducer,
    align: alignReducer,
    viewer: viewerReducer,
  }))
)

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

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

  return store
}

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

export { store, history, dispatch }