// In this example we pass one callbacks object through the components.
// It makes it very easy to add new callbacks without updating the components in the chain
// that don't need to access the new callbacks.

class Parent extends React.Component {
  _createItem = () => console.log('Create')
  _updateItem = () => console.log('Update')
  _deleteItem = () => console.log('Delete')

  _callbacks = (component) => {
    const callbacks = {
      ChildOne: {
        create: this._createItem,
        delete: this._deleteItem,
        update: this._updateItem,
      }
    }

    return callbacks[component] || {}
  }

  render(){
    return (
      <ChildOne
        createCallback={this._createItem}
        deleteCallback={this._deleteItem}
        updateCallback={this._updateItem}
      />
    )
  }
}

const ChildOne = (props) => {
  const { callbacks } = props

  return (
    <div>
      <ChildTwo callbacks={callbacks} />
    </div>
  )
}

ChildOne.propTypes = {
  callbacks: PropTypes.object.isRequired,
}

const ChildTwo = (props) => {
  const { callbacks: { create, update, delete } } = props

  return (
    <div>
      <a tabIndex="0" onClick={create}>Create</a>
      <a tabIndex="0" onClick={update}>Delete</a>
      <a tabIndex="0" onClick={delete}>Update</a>
    </div>
  )
}

ChildTwo.propTypes = {
  callbacks: PropTypes.shape({
    create: PropTypes.func.isRequired,
    update: PropTypes.func.isRequired,
    delete: PropTypes.func.isRequired,
  }).isRequired,
}

// When passing a lot of callbacks things can get very messy quickly e.g.

class Parent extends React.Component {
  _createItem = () => console.log('Create')
  _updateItem = () => console.log('Update')
  _deleteItem = () => console.log('Delete')

  render(){
    return (
      <ChildOne
        createCallback={this._createItem}
        deleteCallback={this._deleteItem}
        updateCallback={this._updateItem}
      />
    )
  }
}

const ChildOne = (props) => {
  const { createCallback, deleteCallback, updateCallback } = props

  return (
    <div>
      <ChildTwo
        createCallback={createCallback}
        deleteCallback={deleteCallback}
        updateCallback={updateCallback}
      />
    </div>
  )
}

ChildOne.propTypes = {
  createCallback: PropTypes.func.isRequired,
  deleteCallback: PropTypes.func.isRequired,
  updateCallback: PropTypes.func.isRequired,
}

const ChildTwo = (props) => {
  const { createCallback, deleteCallback, updateCallback } = props

  return (
    <div>
      <a tabIndex="0" onClick={createCallback}>Create</a>
      <a tabIndex="0" onClick={deleteCallback}>Delete</a>
      <a tabIndex="0" onClick={updateCallback}>Update</a>
    </div>
  )
}

ChildTwo.propTypes = {
  createCallback: PropTypes.func.isRequired,
  deleteCallback: PropTypes.func.isRequired,
  updateCallback: PropTypes.func.isRequired,
}