import React, { useReducer } from 'react';
import { initialRouteReducerState, IRouteState, routeReducer, RouteReducerDispatchType } from '../reducers/RouteReducer';

export interface IRouteStateContext {
    routeState: IRouteState;
}
const initialStateContext: IRouteStateContext = {
    routeState: initialRouteReducerState
};
const initalDispatchContext: RouteReducerDispatchType = null;

export const RouteContext = React.createContext(initialStateContext);
export const RouteDispatchContext = React.createContext(initalDispatchContext);

export function RouteContextProvider({ children }) {
  const [routeState, dispatch] = useReducer(routeReducer, initialRouteReducerState);
  return (
    <RouteContext.Provider value={{routeState}}>
      <RouteDispatchContext.Provider value={dispatch}>{children}</RouteDispatchContext.Provider>
    </RouteContext.Provider>
  );
}
