var React = require('react');
var ItemActions = require('../../actions/itemActions');
var NavigationActions = require('../../actions/navigationActions');
var NavigationStore = require('../../stores/navigationStore');

var Globals = require('../../globals');
var Router = require('react-router');

var SingleItem = React.createClass({
    render: function() {
      var hidePrice = this.props.hidePrice || false;
      var self = this;
      var itemClick = this.itemClick;
      var stopPropagation = this.stopPropagation;
      var itemUrl = NavigationStore.getUrlForItem(this.props.item);
      var firstImage = this.props.item.get('multi_media_descriptions')[0];
      firstImage = firstImage || { resized_url:  "https://res.cloudinary.com/lfvt7ps2n/image/upload/c_fit,h_172,w_226/v1421732950/http_www.asms.ru_bitrix_templates_main_images_nophoto_irnofq.png" } ;
      if (hidePrice) {
        return (
         <div className="col-lg-2 col-md-2 col-sm-3 col-xs-6">
          <div className="productbox">
            <img className="img-responsive" src={firstImage.url} alt="product image" />
            <div>

                <p> <p className="productbox item_brand_name">{ this.props.item.get('brand') ? this.props.item.get('brand').name : '' }</p>{ this.props.item.get('name') }</p>

            </div>
          </div>
        </div>
        );
      }
      else {
        return (
         <a href={itemUrl} onClick={stopPropagation}>
         <div className="col-lg-3 col-md-3 col-sm-4 col-xs-6"  onClick={itemClick}>
          <div className="productbox">
            <img className="img-responsive" src={firstImage.resized_url} alt="product image" />
              <div style={{height: "90px"}} className="item_name_and_price">
               <p><span className="text-uppercase">{ this.props.item.get('brand') ? this.props.item.get('brand').name : '' }</span>
               <br /><span className="text-capitalize">{ this.props.item.get('name') }</span></p>
              <h4 className="item_floating_price">{ Globals.FormatCurrency(this.props.item.get('list_price')) }</h4>
              </div>
          </div>
        </div>
        </a>
        );
      }
    },
    stopPropagation: function(e){
       e.stopPropagation();
       e.nativeEvent.stopImmediatePropagation();
       return false;
    },

    itemClick: function(e) {
      NavigationActions.goToItemDetails(this.props.item);

    }


});


module.exports = SingleItem;