/**
 * While intimidating at first, the process of implementing Conflux is actually really straightforward.
 * In order to use Conflux in our application, we must first import StateProvider and the useStateValue hook.
 */

import { StateProvider, useStateValue } from 'react-conflux';

/**
 * The next step to using Conflux in our application is placing the StateProvider component in our
 * application.
 *
 * The following example demonstrates how you might go about wrapping the State Provider around
 * a part of your component tree.
 */

export const App = () => {
  return (
    <StateProvider reducer={reducer} stateContext={exampleContext}>
      <ChildrenComponents />
    </StateProvider>
  );
};

/**
 * The two parameters required by the StateProvider component are a reducer function and a
 * stateContext object.
 *
 * Reducers are pure functions that must take in some state and an action while returning state.
 *
 * Note that the first parameter of the reducer function, state, has a default value of initialState,
 * the beginning state of our reducer. The second parameter, the action, is an object sent into
 * our reducer from our dispatch function which we will see in just a minute.
 *
 * Here is an example of a reducer and its corresponding switch statement; in this
 * example, we're taking in a new to-do item and setting it to state.
 */

const toDoReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        toDoItems: [...state.toDoItems, action.payload]
      };
    default:
      return state;
  }
};

/**
 * The initialState object contains the starting state necessary for the given StateProvider it's
 * being passed into.
 *
 * An example of this for demonstration purposes is below.
 */

const initialState = {
  inputText: '',
  listArray: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
  nameObject: { firstName: 'Marty', lastName: 'McFly' },
  toDoItems: [
    { id: 1, name: 'Meddle with the future' },
    { id: 2, name: 'Check out the past' }
  ]
};

/**
 * The stateContext object is created in your application by importing createContext from React and
 * defining your state like the example below. This context object is passed into the StateProvider
 * (and, later, your useStateValue hook).
 */

const exampleContext = createContext();

/**
 * Every action object must have a type and payload; the type allows us to navigate the cases
 * in our reducer switch statements, and the payload is the state which we will update in our
 * reducer.
 *
 * Here's an example of what an action object looks like.
 */

const action = {
  type: 'ADD_TODO',
  payload: { id: 3, name: 'Marty, we have to go back!' }
};

/**
 * The last step to using Conflux is to rig it up in your components within the component tree
 * housed in the relevant StateProvider.
 *
 * You can destructure out your state and dispatch by passing the context object created above into
 * the useStateValue hook which is imported from Conflux You can then further destructure out your
 * individual state values to assign throughout your component.
 *
 * Additionally, the dispatch function can be invoked with an action object inside of it to send
 * state to our reducer (and ultimately to be placed into our StateProvider's state).
 */

const [state, dispatch] = useStateValue(ExampleContext);

const { inputText } = state;

dispatch({
  type: 'ADD_TODO',
  payload: { id: 3, name: 'Marty, we have to go back!' }
});