text: import React, { Component } from 'react'
  import PropTypes from 'prop-types'
  import { findDOMNode } from 'react-dom'
  import { DragSource, DropTarget } from 'react-dnd'
  import ItemTypes from './ItemTypes'
  import { Label, Icon } from 'semantic-ui-react'
  
  const style = {
  	marginBottom: '.5rem',
  	cursor: 'move',
  	width: '50%'
  }
  
  const cardSource = {
  	beginDrag(props) {
  		return {
  			id: props.id,
  			index: props.index,
  		}
  	},
  }
  
  const cardTarget = {
  	hover(props, monitor, component) {
  		const dragIndex = monitor.getItem().index
  		const hoverIndex = props.index
  
  		// Don't replace items with themselves
  		if (dragIndex === hoverIndex) {
  			return
  		}
  
  		// Determine rectangle on screen
  		const hoverBoundingRect = findDOMNode(component).getBoundingClientRect()
  
  		// Get vertical middle
  		const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
  
  		// Determine mouse position
  		const clientOffset = monitor.getClientOffset()
  
  		// Get pixels to the top
  		const hoverClientY = clientOffset.y - hoverBoundingRect.top
  
  		// Only perform the move when the mouse has crossed half of the items height
  		// When dragging downwards, only move when the cursor is below 50%
  		// When dragging upwards, only move when the cursor is above 50%
  
  		// Dragging downwards
  		if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
  			return
  		}
  
  		// Dragging upwards
  		if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
  			return
  		}
  
  		// Time to actually perform the action
  		props.moveRenderer(dragIndex, hoverIndex)
  
  		// Note: we're mutating the monitor item here!
  		// Generally it's better to avoid mutations,
  		// but it's good here for the sake of performance
  		// to avoid expensive index searches.
  		monitor.getItem().index = hoverIndex
  	},
  }
  
  @DropTarget(ItemTypes.RENDERER, cardTarget, connect => ({
  	connectDropTarget: connect.dropTarget(),
  }))
  @DragSource(ItemTypes.RENDERER, cardSource, (connect, monitor) => ({
  	connectDragSource: connect.dragSource(),
  	isDragging: monitor.isDragging(),
  }))
  
  
  export default class RendererCard extends Component {
  	static propTypes = {
  		connectDragSource: PropTypes.func.isRequired,
  		connectDropTarget: PropTypes.func.isRequired,
  		index: PropTypes.number.isRequired,
  		isDragging: PropTypes.bool.isRequired,
  		id: PropTypes.any.isRequired,
  		moveRenderer: PropTypes.func.isRequired,
  	}
  
  	render() {
  		const {
  			renderer,
  			id,
  			isDragging,
  			connectDragSource,
  			connectDropTarget,
  			handleRendererDeselection
  		} = this.props
  		const opacity = isDragging ? 0 : 1
  
  		const isNodeName = renderer.name === 'NodeNameRenderer';
  		const name = isNodeName ? 'Node Name' : renderer.name;
  
  		return connectDragSource(
  			connectDropTarget(
  				<div style={{ ...style, opacity }}>
  					<Label as='a' tag={isNodeName}>
  						{ name }
  						{ !isNodeName && <Icon name='close'
  							onClick={handleRendererDeselection(id)} /> 
  						}
  					</Label>
  				</div>
  			)
  		)
  	}
  }
  