import React from "react";
import { StyleSheet, useColorScheme } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { Provider } from "react-redux";
import { applyMiddleware, createStore, compose } from "redux";
import { createLogger } from "redux-logger";
import thunk from "redux-thunk";
import { persistStore, persistReducer } from "redux-persist";
import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2";
import allReducers from "./src/reducers";
import Navigation from "./navigation/index";
import AlertModal from "./src/components/AlertModal";

const persistConfig = {
  key: "root",
  storage: AsyncStorage,
  stateReconciler: autoMergeLevel2, // see "Merge Process" section for details.
  whitelist: ["profile"],
};
const pReducer = persistReducer(persistConfig, allReducers);

const middleWare = [];

middleWare.push(thunk);

const loggerMiddleware = createLogger({
  predicate: () => process.env.NODE_ENV === "development",
});
middleWare.push(loggerMiddleware);

const store = createStore(pReducer, compose(applyMiddleware(...middleWare)));

const persistor = persistStore(store);

const ReactNative = require("react-native");
try {
  ReactNative.I18nManager.allowRTL(true);
  //  enableScreens();
} catch (e) {
  console.log(e);
}

console.disableYellowBox = true;

const App = () => {
  const isDarkMode = useColorScheme() === "dark";

  return (
    <Provider store={store}>
      <Navigation />
      <AlertModal />
    </Provider>
  );
};

const styles = StyleSheet.create({});

export default App;