var React = require('react'),
    Carousel = require('../shared/carousel'),
    ItemDetailsActions = require('../../actions/itemDetailsActions'),
    NavigationStore = require('../../stores/navigationStore'),
    ItemDetailsStore = require('../../stores/itemDetailsStore');

var Router = require('react-router');


var ItemWithDetailsPage = React.createClass({

    render: function() {

      return (


        <div className="item-with-details row-fluid center">
        <div className="col-md-5">

    
          <Carousel images={this.state.images}
                  selected={this.state.currentImage}
                  onClickLeft={this.onClickLeft}
                  onClickRight={this.onClickRight}
                  onSelectImage={this.onSelectImage} />
        
        </div>
        <div className="col-md-7">
        <h3> {this.state.item.get('name')} </h3>
        <div>
        <div className='h4'> {this.state.item.get('list_price')} KM</div>
        <div className='h5'>{this.state.item.get('pricePerUnit')}</div>



        <div> {this.state.item.get('description')}</div>
        </div>

        quantitative descriptions
        </div>
        </div>
        );       

    },

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


    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;