import React from 'react';
import PropTypes from 'prop-types';
import {DragSource} from 'react-dnd';

@DragSource((props) => {
  return props.type;
}, {
  beginDrag: (props, monitor) => {
    props.doAction(props.type, props.data, monitor);
    return {data: props.data};
  },
  endDrag: (props, monitor) => {
    props.doAction(props.type, props.data, monitor);
  }
}, (connect, monitor) => {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  };
})
export class DragItem extends React.PureComponent {
  static propTypes = {
    type: PropTypes.string.isRequired,
    data: PropTypes.object.isRequired,
    doAction: PropTypes.func.isRequired,
    connectDragSource: PropTypes.func,
    isDragging: PropTypes.bool,
    children: PropTypes.any
  }
  static defaultProps = {
    doAction: noop => noop
  }
  render() {
    const className = this.props.isDragging ? 'j-com-drag' : ''
    return this
      .props
      .connectDragSource(
        <div className={className}>{this.props.children}</div>
      );
  }
}