import React, { Component } from 'react'
import isEqual from 'lodash/fp/isEqual'

// let you inject local state to you component

const stateful = (mapPropsToInitialState = () => ({})) => Child => {
  return class StateFul extends Component {

    static displayName = `StateFul(${Child.displayName || Child.name})`

    componentWillMount() {
      this.state = mapPropsToInitialState(this.props)
    }

    render() {
      return (
        <Child
          {...this.props}
          {...Object.keys(this.state).reduce((acc, key) => ({
            ...acc,
            [key]: {
              value: this.state[key],
              onChange: this[`_update${key}`] || (this[`_update${key}`] = v => this.setState({ [key]: v })),
            }
          }), {})} />
      )
    }
  }
}


export default stateful