import React, { useReducer, useMemo } from "react";
import Main from "./layout/Main";
import { initialState } from "../state/initialState";
import {
  reducer,
  dispatchActions as reducerDispatchActions
} from "../state/reducer";
import {
  ApplicationStateContext,
  ApplicationDispatchContext
} from "../state/ApplicationContexts";
import { ToastContainer, Slide } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  const dispatchActions = useMemo(
    () => reducerDispatchActions(dispatch),
    [dispatch]
  );

  return (
    <>
      <ApplicationStateContext.Provider value={state}>
        <ApplicationDispatchContext.Provider value={dispatchActions}>
          <Main />
        </ApplicationDispatchContext.Provider>
      </ApplicationStateContext.Provider>
      <ToastContainer
        position="bottom-right"
        transition={Slide}
        autoClose={3000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
        limit={5}
      />
    </>
  );
};

export default App;