var React = require('react');
var Util = require('../../util');
var AppIcon = require('../common/app-icon.jsx');
var DragSource = require('react-dnd').DragSource;

var DesktopAppItem = React.createClass({

  render: function() {

    var desktopEntry = this.props.desktopEntry;
    var label = desktopEntry.Name;
    var category = desktopEntry.Categories;
    var icon = desktopEntry.Icon;

    var connectDragSource = this.props.connectDragSource;

    return connectDragSource(
      <li className="desktop-app list-group-item">
        <AppIcon className="desktop-app-icon" icon={icon} theme={this.props.theme} />
        <span className="desktop-app-label">{label}</span>
      </li>
    );

  }

});

var dragSourceSpec = {

  beginDrag: function(props) {
    return props;
  },

  endDrag: function(props, monitor) {

    if (!monitor.didDrop()) {
      return;
    }

    var dropResult = monitor.getDropResult();

    return props.onItemDropped(props.desktopEntry, dropResult);

  }

};

function dragSourceCollect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  };
}

module.exports = DragSource('NEW_ITEM', dragSourceSpec, dragSourceCollect)(DesktopAppItem);