import { createStore, applyMiddleware, combineReducers } from "redux";
import { createWrapper, HYDRATE } from "next-redux-wrapper";
import thunkMiddleware from "redux-thunk";
import progress from "./progress/reducer";
import { reducer as formReducer } from "redux-form";
import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2";

//COMBINING ALL REDUCERS
const combinedReducer = combineReducers({
  progress,
});

const reducer = (state = { progress: "{}" }, action) => {
  switch (action.type) {
    case HYDRATE:
      //if (action.payload.progress === '{}') delete action.payload.progress;
      return { ...state, ...action.payload };
    case "SERVER_ACTION":
      return {
        ...state,
        server: {
          ...state.server,
          progress: action.payload,
        },
      };
    case "CLIENT_ACTION":
      return {
        ...state,
        client: {
          ...state.client,
          progress: action.payload,
        },
      };
    case "GET_ITEMS":
      return {
        ...state,
        items: action.payload,
        loading: false,
      };
    case "SET_ITEMS":
      return {
        ...state,
        items: action.payload,
        loading: false,
      };
    default:
      return combinedReducer(state, action);
  }
};

// BINDING MIDDLEWARE
const bindMiddleware = (middleware) => {
  if (process.env.NODE_ENV !== "production") {
    const { composeWithDevTools } = require("redux-devtools-extension");
    return composeWithDevTools(applyMiddleware(...middleware));
  }
  return applyMiddleware(...middleware);
};

const makeStore = ({ isServer }) => {
  if (isServer) {
    //If it's on server side, create a store
    return createStore(reducer, bindMiddleware([thunkMiddleware]));
  } else {
    //If it's on client side, create a store which will persist
    const { persistStore, persistReducer } = require("redux-persist");
    const storage = require("redux-persist/lib/storage").default;

    const persistConfig = {
      key: "nextjs",
      whitelist: [
        "progress"
      ],
      storage,
      stateReconciler: autoMergeLevel2, // if needed, use a safer storage
    };

    const persistedReducer = persistReducer(persistConfig, reducer); // Create a new reducer with our existing reducer

    const store = createStore(
      persistedReducer,
      bindMiddleware([thunkMiddleware])
    ); // Creating the store again

    store.__persistor = persistStore(store); // This creates a persistor object & push that persisted object to .__persistor, so that we can avail the persistability feature

    return store;
  }
};
export const setClientState = (clientState) => ({
  type: SET_CLIENT_STATE,
  payload: clientState,
});
// Export the wrapper & wrap the pages/_app.js with this wrapper only
export const wrapper = createWrapper(makeStore);