// index.js
import React from "react"
import ReactDOM from "react-dom"
import { createStore } from "redux"
import App from "./App"
import reducer from "./store/reducer"

const store = createStore(reducer)

ReactDOM.render(<App />, document.getElementById("root"))

// Now we can create our reducer function in a separate store folder in a reducer.js file (like we used in import statement):

const initialState = {
  counter: 0,
  name: "Snowbean",
}

// The reducer takes an initial state as a default value, and the action as the second, and it should return the updated state:
const reducer = (state = initialState, action) => {
  if (action.type === "INCREMENT") {
    return {
      ...state,
      counter: state.counter + 1,
    }
  } else if (action.type === "DECREMENT") {
    return {
      ...state,
      counter: state.counter - 1,
    }
  } else if (action.type === "ADD_PAYLOAD") {
    return {
      ...state,
      counter: state.counter + action.payload.value,
    }
  }
  return state
}

export default reducer

// index.js
import React from "react"
import ReactDOM from "react-dom"
import { createStore } from "redux"
import { Provider } from "react-redux"
import App from "./App"
import reducer from "./store/reducer"

const store = createStore(reducer)

// Provider is a helper component. We inject our redux store into the React app by wrapping it with Provider component, so that we can access the store inside our react components. The Provider component expects a store property:
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
)

// Counter.js

import React, { Component } from "react"
import { connect } from "react-redux"

import CounterControl from "../../components/CounterControl/CounterControl"
import CounterOutput from "../../components/CounterOutput/CounterOutput"

class Counter extends Component {
  render() {
    return (
      <div>
        // The outputted this.props.ctr comes from the application state!
        <div>
          <h1>Counter:</h1>
          <span>{this.props.count}</span>
        </div>
        <button onClick={this.props.onIncrementCounter}>INCREMENT</button>
        <button onClick={this.props.onDecrementCounter}>DECREMENT</button>
        <button onClick={this.props.onIncrementCounterBy10}>
          INCREMENT BY 10
        </button>
      </div>
    )
  }
}

// Connect itself is a function, which returns a function and takes the given component as an input.
// It simply looks like this: connect(stateConfigParam, actionConfigParam)(componentName)
// stateConfigParam: defines which slice of the state the component want to subscribe to
// actionConfigParam: defines which actions you can dispatch from the component

// This returns the global state's counter as a count variable, as a prop to the current component. This component is able to reach it from `this.props.count`.
// the state parameter in this function refers to the global application state
const mapStateToProps = state => {
  return {
    count: state.counter,
  }
}

// dispatch is actually `store.dispatch`, but it can be used directly as `dispatch` as well, a the react-redux package converts it to store.dispatch behind the scenes:
const mapDispatchToProps = dispatch => {
  return {
    // These functions will be returned as props to this component and will call `store.dispatch` when they are executed:
    onIncrementCounter: () => dispatch({ type: "INCREMENT" }),
    onDecrementCounter: () => dispatch({ type: "DECREMENT" }),
    onIncrementCounterBy10: () =>
      dispatch({ type: "ADD_PAYLOAD", payload: { value: 10 } }),
  }
}

// If you want the component to just subscribe to the global state but not change it, you can only define mapStateToProps: connect(mapStateToProps)(Counter)
// If you only want to change but not read the application state, you pass null as the first argument, and define mapDispatchToProps: connect(null, mapDispatchToProps)(Counter)
// In this component, we are doing them both, so we define both arguments:
export default connect(mapStateToProps, mapDispatchToProps)(Counter)

// context/counter-context.jsx
import React from "react";
// The context is basically a value that can be passed in between components without using props.
// React.createContext() allows us to initialize our context with an optional default value that's passed to it as an argument.
// If you initialize the context component with another value, the default values will be overwritten.
const CounterContext = React.createContext({
	value: 0,
	name: "Snowbean",
  shout: () => console.log("COUNTERS ARE COOL, NO?")
 });

export default CounterContext;

// Now, CounterContext can be imported and used as a component and it should wrap all the parts of your application that need access to this context.
// After importing the CounterContext, we use a special syntax to wrap the jsx that needs access to this context.
// If you are going to provide the state, you should use the <CounterContext.Provider>.
// If you are just going to take the value inside it, use the <CounterContext.Consumer>.
// Provider takes a value property, that will override the default values set in the original counter-context.jsx file.

<CounterContext.Provider value={{
		authenticated: this.state.authenticated,
		login: this.loginHandler}}>
	{...some jsx code}
  {/* Any component that is in here (doesn't have to be an immediate child) can access the CounterContext by using <CounterContext.Consumer>*/}
</CounterContext.Provider>

// React will re-render when the state or props change. So only changing something in the context object will not cause a re-render cycle.

// Any component that needs to reach the CounterContext needs to be wrapped in <CounterContext.Consumer>
// <CounterContext.Consumer> does not take jsx code as a child. Instead it takes a function that takes context as an argument and returns jsx code.
<CounterContext.Consumer>
  {(context) => {
    {...some jsx code}
    // reach the context data by context.authenticated or context.login
  }}
</CounterContext.Consumer>