import { createStore, applyMiddleware, compose } from "redux";
import { persistStore } from "redux-persist";
import { createLogger } from "redux-logger";
import createSagaMiddleware from "redux-saga";
import {
  createStateSyncMiddleware,
  initMessageListener,
} from "redux-state-sync";

import rootReducer from "./root.reducer";
import rootSaga from "./root.saga";
import * as Sentry from "@sentry/react";

const sentryReduxEnhancer = Sentry.createReduxEnhancer({
  // Optionally pass options
});
const sagaMiddleWare = createSagaMiddleware();

const reduxSyncConfig = {
  whitelist: ["ADD_RECENT_ITEM", "SET_SHOP_DETAILS"],
};

const middlewares = [
  sagaMiddleWare,
  createStateSyncMiddleware(reduxSyncConfig),
];
if (process.env.NODE_ENV === "development") {
  middlewares.push(createLogger({ collapsed: true, diff: true }));
}
//middlewares.push(Tracker.use(trackerRedux()));
const composeEnhancers =
  typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
      })
    : compose;

const enhancer = composeEnhancers(
  applyMiddleware(...middlewares),
  sentryReduxEnhancer
  // other store enhancers if any
);

export const store = createStore(rootReducer, enhancer);
sagaMiddleWare.run(rootSaga);
initMessageListener(store);

export const persistor = persistStore(store);
const e = { store, persistStore };
export default e;