var React = require('react'),
    ItemMultiMediaDescriptions = require('./itemMultiMediaDescriptions'),
    ItemActions = require('../../actions/itemActions'),
    ItemStore = require('../../stores/itemStore');

var Item = require('../../models/item');

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

var ItemWithDetailsPage = React.createClass({


  mixins : [Router.State],
    render: function() {

      return (


        <div className="item-with-details row-fluid center">
        <div className="span3">

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

        <div className='h4'> {this.state.item.get('list_price')} KM</div>
        <div> {this.state.item.get('description')}</div>
        </div>
        <ItemMultiMediaDescriptions descriptions={this.state.item.get('multi_media_descriptions')} />



        </div>
        <div className="span4">
        quantitative descriptions
        </div>
        </div>
        ) ;       

    },

    // Add change listeners to stores
    componentDidMount: function() {
      //ItemStore.addChangeListener(this._onChange);
      //ItemActions.loadFrontPageItems();

      var self = this;
      var item = new Item({ id: self.getParams().id });
      item.fetch({success: function() {
        if (self.isMounted()) {
          console.log('article loaded', item);
          self.setState({
            item : item
          });
        }
      }});
    },

    _onChange: function () {
      this.setState({
        item: ItemStore.getSelectedItem()
      });
    },

    getInitialState: function () {
      return { 
        //item: ItemStore.getSelectedItem() 
        item : (new Item())
      }; 
    }

});


module.exports = ItemWithDetailsPage;