import React, { useReducer } from "react";
const ModalContext = React.createContext({});

const reducer = (state, { component }) => {
  return { ...state, component };
};

const ModalProvider = ({ children }) => {
  const showModal = component => {
    return dispatch({ component });
  };

  const hideModal = () => {
    return dispatch({ ...state, component: null });
  };

  const [state, dispatch] = useReducer(reducer, {
    component: null,
    showModal,
    hideModal
  });

  return (
    <ModalContext.Provider
      value={{
        state,
        showModal
      }}
    >
      {children}
    </ModalContext.Provider>
  );
};

const ModalConsumer = ModalContext.Consumer;

export { ModalProvider, ModalContext, ModalConsumer };