import React from "react"
import { connect } from "react-redux"
import { addItems } from "../../redux/actions/items"

const enhance = connect(
  ({ items }) => ({ items }),
  { addItems }
)

class ItemsList extends React.Component {
  render() {
    return (
      <div>
        <ul>
          {this.props.items.map((item, index) => {
            return (
              <li key={index}>
                {this.renderItem(item)}
              </li>
            )
          })}
          
        </ul>
        <button onClick={this.onAddButtonClick}>Add Item</button>
      </div>
    )
  }
  renderItem = item => <div>{item}</div>

  onAddButtonClick = e => {
    const text = window.prompt("Enter item text:")
    this.props.addItems(text)
  }
}

export default enhance(ItemsList)