import React from 'react'

export default class ProductList extends React.Component {
  constructor(props) {
    super()
    this.state = { value: -1 }
    this.pick = this.pick.bind(this)
  }
  pick(event) {
    const value = Number(event.target.value)
    this.setState({ value: value })
    if (value === -1) return
    const product = this.props.products[value]
    this.props.handleSelect(product)
  }
  render() {
    const items = this.props.products.map((product, i) => {
      return (
        <option key={i} value={i}>
          {product.product_name} ({product.product_merchant_product_id})
        </option>
      )
    })
    items.unshift(<option key={-1} value={-1}>Please choose a product...</option>)
    return (
      <select value={this.state.value} onChange={this.pick}>
        {items}
      </select>
    )
  }
}