var React = require('react'),
    Carousel = require('../shared/carousel'),
    Traits = require('../items/traits'),
    ItemDetailsActions = require('../../actions/itemDetailsActions'),
    NavigationStore = require('../../stores/navigationStore'),
    ItemDetailsStore = require('../../stores/itemDetailsStore'),
    AddToCart = require('../cart/addToCart');

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


var ItemWithDetailsPage = React.createClass({

    render: function() {

      return (
     
        <div className="item-with-details row-fluid center">
          <div className="col-md-5 col-md-offset-2 item_image col-sm-offset-2 col-sm-3">
             <img src={this.state.firstImage} width="100%" />      
          </div>

          <div className="col-md-5 col-sm-7 center">
           <div className='item_brand_name'> {this.state.item.get('brand').name}</div>
            <div className='item_name'> {this.state.item.get('name')}</div>
            <div>
             <div className='item_price'> {Globals.FormatCurrency(this.state.item.get('list_price'))}</div>

             <div>Količina</div>

              <div> <AddToCart item={this.state.item}  /></div>
            </div>

          </div>
          <div className="item-with-details row-fluid center">
           <div className="col-lg-offset-2 col-lg-10 hidden-md hidden-sm hidden-xs">
                <div className="item_description_tab">Opis proizvoda</div>
                <div className="item_description_tab_area">        </div>
                <div className="item_description_text">{this.state.item.get('description')}</div>
            </div>
            <div className="col-xs-offset-2 col-xs-10 hidden-lg">
                <h2>Opis proizvoda: </h2>
                <div>        </div>
                <p className="lead">{this.state.item.get('description')}</p>
            </div>
            <div className="col-xs-offset-2 col-xs-10">
              <Traits traits={this.state.item.get('traits')} />
            </div>
          </div>
        </div>
        );       

    },

    // Add change listeners to stores
    componentDidMount: function() {
      ItemDetailsStore.addChangeListener(this._onChange);
      NavigationStore.addChangeListener(this._onChange);
      ItemDetailsActions.loadItemWithDetails();
    },

    componentWillUnmount: function () {
      ItemDetailsStore.removeChangeListener(this._onChange);
      NavigationStore.removeChangeListener(this._onChange);
    },


    onClickLeft: function() {
      ItemDetailsActions.previousCarouselImage();
    
  },

    onClickRight: function() {
      ItemDetailsActions.nextCarouselImage();
   },

   onSelectImage: function(i) {
    ItemDetailsActions.selectCarouselImage(i);
   },

    _onChange: function () {

         if (this.isMounted()) {
             this.setState(ItemDetailsStore.getState());
        }

    },

    getInitialState: function () {
      return ItemDetailsStore.getState();
    }

});


module.exports = ItemWithDetailsPage;