import React, { useReducer, useMemo } from "react";
import PropTypes from "prop-types";
import {
  ApplicationStateContext,
  ApplicationDispatchContext
} from "../state/ApplicationContexts";
import {
  reducer,
  dispatchActions as reducerDispatchActions
} from "../state/reducer";
import { initialState } from "../state/initialState";

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

  return (
    <ApplicationStateContext.Provider value={state}>
      <ApplicationDispatchContext.Provider value={dispatchActions}>
        {children}
      </ApplicationDispatchContext.Provider>
    </ApplicationStateContext.Provider>
  );
};

ApplicationStateProvider.propTypes = {
  children: PropTypes.node.isRequired
};

export default ApplicationStateProvider;