import React from 'react';
import $ from 'jquery';
import { Col } from 'react-bootstrap';
import { Thumbnail } from 'react-bootstrap';

class Item extends React.Component {
  constructor(){
    super()
    this.handleRemove = this.handleRemove.bind(this);
    this.handleBought = this.handleBought.bind(this);
  }

  handleRemove(){
    let wishId = this.props.id;
    this.props.removeWish(wishId);
  }

  handleBought(){
    let wishId = this.props.id;
    console.log('wishId',wishId);
    let name = $('#name'+wishId).val();
    let message = $('#message'+wishId).val();
    console.log(name, message);

    this.props.markAsBought(wishId,name,message);
  }

  render(){
    let changeButton;
    let isPurchased = this.props.isPurchased.toString();

    if (this.props.isLoggedIn) {
      changeButton = (<button type='button' className='btn btn-info' onClick={this.handleRemove}>Remove Item</button>);
    } else {
      changeButton = (
        <div>
          <input type='text' placeholder='Name' id={'name'+this.props.id} />
          <input type='text' placeholder='Message' id={'message'+this.props.id} />
          <button type='button' className='btn btn-info' onClick={this.handleBought}>Purchase Item</button>
        </div>
      )
    }

    const thumbnailInstance = (
        <Col xs={6} md={4}>
          <Thumbnail src="../assets/macbook_icon.png" alt="242x200">
            <h3>{this.props.itemname}</h3>
            <p>{this.props.category}</p>
            <p>{this.props.message}</p>
            <a href={this.props.url}>{this.props.url}</a>
            <div>{changeButton}</div>
          </Thumbnail>
        </Col>
    );


    return (
      <div>
        {thumbnailInstance}
      </div>
    )
  }
}

export default Item;

@@ -690,16 +690,43 @@
 Button;%0A
+    let thumbnailInstance;%0A
     let 
@@ -818,332 +818,311 @@
     
-changeButton = (%3Cbutton type='button' className='btn btn-info' onClick=%7Bthis.handleRemove%7D%3ERemove Item%3C/button%3E);%0A    %7D else %7B%0A      changeButton = (%0A        %3Cdiv%3E%0A          %3Cinput type='text' placeholder='Name' id=%7B'name'+this.props.id%7D /%3E%0A          %3Cinput type='text' placeholder='Message' id=%7B'message'+this.props.id%7D /%3E%0A
+thumbnailInstance = (%0A        %3CCol xs=%7B6%7D md=%7B4%7D%3E%0A          %3CThumbnail src=%22../assets/macbook_icon.png%22 alt=%22242x200%22%3E%0A            %3Ch3%3E%7Bthis.props.itemname%7D%3C/h3%3E%0A            %3Cp%3E%7Bthis.props.category%7D%3C/p%3E%0A            %3Cp%3E%7Bthis.props.message%7D%3C/p%3E%0A            %3Ca href=%7Bthis.props.url%7D%3E%7Bthis.props.url%7D%3C/a%3E%0A  
     
@@ -1198,23 +1198,21 @@
 ndle
-Bought%7D%3EPurchas
+Remove%7D%3ERemov
 e It
@@ -1227,29 +1227,52 @@
 on%3E%0A        
-%3C/div
+  %3C/Thumbnail%3E%0A        %3C/Col
 %3E%0A      )%0A  
@@ -1278,19 +1278,21 @@
    %7D
-%0A%0A    const
+ else %7B%0A     
  thu
@@ -1610,22 +1610,301 @@
 div%3E
-%7BchangeButton%7D
+%0A              %3Cinput type='text' placeholder='Name' id=%7B'name'+this.props.id%7D /%3E%0A              %3Cinput type='text' placeholder='Message' id=%7B'message'+this.props.id%7D /%3E%0A              %3Cbutton type='button' className='btn btn-info' onClick=%7Bthis.handleBought%7D%3EPurchase Item%3C/button%3E%0A            
 %3C/di
@@ -1948,19 +1948,25 @@
 ol%3E%0A    
-);%0A
+  )%0A    %7D
 %0A%0A    re

save progress