/*
This file is part of the Juju GUI, which lets users view and manage Juju
environments within a graphical interface (https://launchpad.net/juju-gui).
Copyright (C) 2015 Canonical Ltd.

This program is free software: you can redistribute it and/or modify it under
the terms of the GNU Affero General Public License version 3, as published by
the Free Software Foundation.

This program is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranties of MERCHANTABILITY,
SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
General Public License for more details.

You should have received a copy of the GNU Affero General Public License along
with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

'use strict';

const MachineViewMachineUnitGlobals = {};

MachineViewMachineUnitGlobals.dragSource = {
  /**
    Called when the component starts the drag.
    See: http://gaearon.github.io/react-dnd/docs-drag-source.html

    @method beginDrag
    @param {Object} props The component props.
  */
  beginDrag: function(props) {
    return {unit: props.unit};
  },

  /**
    Called to check if the component is allowed to be dragged.
    See: http://gaearon.github.io/react-dnd/docs-drag-source.html

    @method canDrag
    @param {Object} props The component props.
  */
  canDrag: function(props) {
    return !props.acl.isReadOnly() && !props.unit.agent_state;
  }
};

/**
  Provides props to be injected into the component.

  @method collect
  @param {Object} connect The connector.
  @param {Object} monitor A DropTargetMonitor.
*/
MachineViewMachineUnitGlobals.collect = function(connect, monitor) {
  return {
    canDrag: monitor.canDrag(),
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  };
};

const MachineViewMachineUnit = React.createClass({
  propTypes: {
    acl: React.PropTypes.object.isRequired,
    canDrag: React.PropTypes.bool.isRequired,
    connectDragSource: React.PropTypes.func.isRequired,
    isDragging: React.PropTypes.bool.isRequired,
    machineType: React.PropTypes.string.isRequired,
    removeUnit: React.PropTypes.func,
    service: React.PropTypes.object.isRequired,
    unit: React.PropTypes.object.isRequired
  },

  /**
    Generate the classes for the unit.

    @method _generateClasses
    @returns {String} The collection of class names.
  */
  _generateClasses: function() {
    var unit = this.props.unit;
    var agentState = unit.agent_state;
    var status = unit.deleted || !agentState ? 'uncommitted' : agentState;
    var classes = {
      'machine-view__machine-unit--draggable': this.props.canDrag,
      'machine-view__machine-unit--dragged': this.props.isDragging
    };
    classes['machine-view__machine-unit--' + status] = true;
    return classNames(
      'machine-view__machine-unit',
      classes);
  },

  render: function() {
    var menu;
    var title;
    var service = this.props.service;
    var unit = this.props.unit;
    if (this.props.machineType === 'container') {
      var menuItems = [{
        label: 'Destroy',
        action: !this.props.acl.isReadOnly() &&
          this.props.removeUnit.bind(null, unit.id)
      }];
      menu = (
        <juju.components.MoreMenu
          items={menuItems} />);
      title = unit.displayName;
    }
    // Wrap the returned components in the drag source method.
    return this.props.connectDragSource(
      <li className={this._generateClasses()}>
        <span className="machine-view__machine-unit-icon">
          <img
            alt={unit.displayName}
            className="machine-view__machine-unit-icon-img"
            src={service.get('icon')}
            title={unit.displayName} />
        </span>
        {title}
        {menu}
      </li>
    );
  }
});

YUI.add('machine-view-machine-unit', function() {
  juju.components.MachineViewMachineUnit = ReactDnD.DragSource(
    'unit', MachineViewMachineUnitGlobals.dragSource,
    MachineViewMachineUnitGlobals.collect)(MachineViewMachineUnit);
}, '0.1.0', {
  requires: [
    'machine-view-add-machine',
    'more-menu'
  ]
});

@@ -1820,28 +1820,28 @@
 )%0A  %7D;%0A%7D;%0A%0Ac
-onst
+lass
  MachineView
@@ -1856,427 +1856,33 @@
 nit 
-= React.createClass(%7B%0A  propTypes: %7B%0A    acl: React.PropTypes.object.isRequired,%0A    canDrag: React.PropTypes.bool.isRequired,%0A    connectDragSource: React.PropTypes.func.isRequired,%0A    isDragging: React.PropTypes.bool.isRequired,%0A    machineType: React.PropTypes.string.isRequired,%0A    removeUnit: React.PropTypes.func,%0A    service: React.PropTypes.object.isRequired,%0A    unit: React.PropTypes.object.isRequired%0A  %7D,%0A
+extends React.Component %7B
 %0A  /
@@ -2029,26 +2029,16 @@
 eClasses
-: function
 () %7B%0A   
@@ -2476,25 +2476,24 @@
 lasses);%0A  %7D
-,
 %0A%0A  render: 
@@ -2490,26 +2490,16 @@
   render
-: function
 () %7B%0A   
@@ -3394,17 +3394,418 @@
 );%0A  %7D%0A%7D
-)
+;%0A%0AMachineViewMachineUnit.propTypes = %7B%0A  acl: React.PropTypes.object.isRequired,%0A  canDrag: React.PropTypes.bool.isRequired,%0A  connectDragSource: React.PropTypes.func.isRequired,%0A  isDragging: React.PropTypes.bool.isRequired,%0A  machineType: React.PropTypes.string.isRequired,%0A  removeUnit: React.PropTypes.func,%0A  service: React.PropTypes.object.isRequired,%0A  unit: React.PropTypes.object.isRequired%0A%7D
 ;%0A%0AYUI.a

Update MachineViewMachineUnit to use es6 class.