import { applyMiddleware, compose as composeRedux, createStore } from 'redux';
import { persistReducer, persistStore } from 'redux-persist';
import { routerMiddleware } from 'connected-react-router';
import { createEpicMiddleware } from 'redux-observable';
import { composeWithDevTools } from 'redux-devtools-extension';
import { createStoreEpic } from './store.epic';
import { rootReducer } from './store.reducer';
import { batchedSubscribe } from 'redux-batched-subscribe';
import { createBrowserHistory } from 'history';
import debounce from 'lodash.debounce';
import multi from 'redux-multi';
import storage from 'redux-persist/lib/storage';
import { appInitializing, appInitialPageView } from 'app/common/store/app';
import { uiScreenResize } from 'app/shared/store/ui/ui.actions';
import { BehaviorSubject, fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { ServicesFacade } from 'app/common/services/services';
import { RestClient } from 'app/common/clients/rest.client';
import { ajax } from 'rxjs/ajax';
import { MiddlewareDependencies } from './store.types';

let store;

function dispatch(action) {
  store.dispatch(action);
}

const compose = (__DEV__) ? composeWithDevTools : composeRedux;

export const user$ = new BehaviorSubject(null);
const restClient = new RestClient(user$, dispatch, ajax);
export const servicesFacade = new ServicesFacade(restClient);

const epicMiddleware = createEpicMiddleware<any, any, any, MiddlewareDependencies>({
  dependencies: {
    contact: servicesFacade.contact,
    vesselDetailsService: servicesFacade.vesselDetails,
    earningsService: servicesFacade.earnings,
    technicalManagement: servicesFacade.technicalManagement,
    bunkerAdjustment: servicesFacade.bunkerAdjustment,
    bi: servicesFacade.bi,
    updateNotification: servicesFacade.updateNotification,
    faqService: servicesFacade.faq,
    dashboard: servicesFacade.dashboard,
    tceDevelopmentService: servicesFacade.tceDevelopment,
    voyageService: servicesFacade.voyage,
    surveyService: servicesFacade.survey,
    forecastService: servicesFacade.forecast,
    marketsService: servicesFacade.markets,
    poolPartnersService: servicesFacade.poolPartners,
    vesselGroupsService: servicesFacade.vesselGroups,
    calendarService: servicesFacade.calendar,
    newsService: servicesFacade.news,
    documentsService: servicesFacade.documents,
    emissionUniverseService: servicesFacade.emissionUniverse,
    welcomePopupService: servicesFacade.welcomePopup,
  },
});
const history = createBrowserHistory();
const middleware = [
  epicMiddleware,
  multi,
  routerMiddleware(history),
];

const enhancers = compose(
  applyMiddleware(...middleware),
  // @ts-ignore
  batchedSubscribe(debounce((notify) => {
    notify();
  }))
);

const persistConfig = {
  key: 'root',
  storage,
  whitelist: [ 'user', 'app', 'bi' ],
};

export const persistBiConfig = {
  key: 'bi',
  storage,
  whitelist: [ 'year' ],
};

const persistedReducer = persistReducer(persistConfig, rootReducer(history));

store = createStore(persistedReducer, enhancers);
epicMiddleware.run(createStoreEpic());
const persistor = persistStore(store);
store.dispatch(appInitializing());
store.dispatch(appInitialPageView(history));

fromEvent(window, 'resize').pipe(
  debounceTime(1000),
).subscribe(() => store.dispatch(uiScreenResize(window.innerWidth)));

export {
  store,
  history,
  persistor,
};