import React, { Component } from 'react';

module.exports = (_items) => {
    const _ItemList = _items.map((_item, i) => {
    let bgColor   = 'ffffff';
    let randomHex = (Math.random()*0xFFFFFF<<0).toString(16);
    return (
        <div className='col-md-3 col-sm-6' key={i} id={'item-'+i}>
          <div className='thumbnail'>
            <div className='caption'>
              <img src={'http://placehold.it/400/'+bgColor+'/'+randomHex+'?text='+ _item.sku} alt={_item.name} className='img-responsive' />
              <h4>{_item.name}</h4>
              <span>{_item.description}</span>     
              <h5>{'$' + _item.price}</h5>         
              <div className="text-right">
                <AddToCartButton />
              </div>
            </div>
          </div>
        </div>
      )
    });
    return _ItemList;
}

class AddToCartButton extends Component {
  render() {
    return (
      <button type='button' className='btn btn-default btn-lg'>
        <i className='fa fa-cart-plus'></i>
      </button>
    );
  }
}

@@ -280,17 +280,17 @@
 id=%7B
-'
+_
 item
--'+i
+._id
 %7D%3E%0A 
@@ -721,16 +721,30 @@
 tButton 
+id=%7B_item._id%7D
 /%3E%0A     
@@ -932,16 +932,49 @@
  %3Cbutton
+ onClick=%7Bthis._addToCartHandler%7D
  type='b
@@ -1087,10 +1087,115 @@
  );%0A  %7D%0A
+  _addToCartHandler()%7B%0A    let newItem = %7B%0A      id: this.props.id,%0A      qty: this.state.qty%0A    %7D;%0A  %7D%0A
 %7D%0A

add _addToCartHandler