var React = require('react');
var connect = require('react-redux').connect;
var actions = require('../../store/actions');
var TreeItem = require('./tree-item.js');
var DropTarget = require('react-dnd').DropTarget;
var _ = require('lodash');

var TreeNode = React.createClass({

  render: function() {

    var data = this.props.data || {};
    var subItems = data.items || [];

    var listElements = subItems.map(function(subItem, i) {
      return (
        <li key={i} >
          <TreeNode data={subItem}
            selectedItem={this.props.selectedItem}
            onItemClicked={this.props.onItemClicked}
            onItemMoved={this.props.onItemMoved}
            onItemRemoved={this.props.onItemRemoved}
            theme={this.props.theme} />
        </li>
      );
    }.bind(this));

    var appEntry = data.icon || data.label ?
      this.renderTreeItem(data):
      null
    ;

    return (
      <div className="tree-item">
        {appEntry}
        <ul>
          {listElements}
        </ul>
      </div>
    );

  },

  renderTreeItem: function(data) {
    return (
      <TreeItem data={data}
        selected={data.selected}
        {...this.props} />
    );
  }

});

var ProfileTree = React.createClass({

  render: function() {

    var connectDropTarget = this.props.connectDropTarget;

    return connectDropTarget(
      <div className="profile-tree">
        {this.renderTreeNode(this.props.profile)}
      </div>
    );

  },

  renderTreeNode: function(data) {
    return (
      <TreeNode data={data}
        selectedItem={this.props.selectedItem}
        onItemClicked={this.onItemSelected}
        onItemMoved={this.onItemMoved}
        onItemRemoved={this.onItemRemoved}
        theme={this.props.theme} />
    );
  },

  onItemMoved: function(movedItem, targetItem) {
    this.props.dispatch(actions.edit.moveProfileItem(movedItem, targetItem));
  },

  onItemSelected: function(selectedItem) {
    this.props.dispatch(actions.edit.selectProfileItem(selectedItem));
  },

  onItemRemoved: function(selectedItem) {
    this.props.dispatch(actions.edit.removeProfileItem(selectedItem));
  }

});

function select(state) {
  return {
    profile: state.profile,
    theme: state.theme
  };
}

var dropTargetSpec = {

  drop: function(props, monitor, component) {
    if(!monitor.didDrop()) {
      return props.profile;
    }
  },

  canDrop: function(props, monitor) {
    var draggedItem = monitor.getItem();
    return !_.isEqual(draggedItem, props.data);
  }

};

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

function dropTargetCollect(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop()
  };
}

module.exports = connect(select)(
  DropTarget(['ITEM', 'NEW_ITEM'], dropTargetSpec, dropTargetCollect)(ProfileTree)
);