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";

const App = () => {
  //il fac pt test dar e gresit. daca va fi un singur state se va redesena toata aplicatia de fiecare data.
  //testeaza ca se redeseneaza de fiecare data
  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>
  );
};

export default App;