'use strict';

var ReactDOM = require('react-dom');

var ReactDND = require('react-dnd');

var ReactHTML5Backend = require('react-dnd-html5-backend');

var DragDropContext = ReactDND.DragDropContext;
var DropTarget = ReactDND.DropTarget;
var DragSource = ReactDND.DragSource;

var _require = require('./keyboardSortableContext'),
    keyboardSortableContext = _require.keyboardSortableContext;

var _require2 = require('./keyboardSortableListItem'),
    keyboardSortableListItem = _require2.keyboardSortableListItem;
/**
 * @param {React.Component} Component
 * @return {function}
 */


function DndSortableListContainer(Component) {
  Component = keyboardSortableContext(Component);
  return DragDropContext(ReactHTML5Backend)(Component);
}
/**
 * @param {string} name
 * @return {function}
 */


function DndSortableListItem(name) {
  return function (Component) {
    var dropTarget = DropTarget(name, {
      hover: function hover(props, monitor, component) {
        var dragItem = monitor.getItem();
        var hoverItem = {
          dndId: props.dndId,
          index: props.index
        }; // Don't replace items with themselves

        if (dragItem.dndId === hoverItem.dndId) {
          return;
        }

        if (props.onHover) {
          props.onHover(dragItem, hoverItem, isVerticalMiddleCrossed(dragItem, hoverItem, monitor, component));
        }
      },
      drop: function drop(props, monitor) {
        if (props.onMove) {
          props.onMove(monitor.getItem().dndId, props.dndId);
        }
      }
    }, function (connect) {
      return {
        connectDropTarget: connect.dropTarget()
      };
    });
    var dragSource = DragSource(name, {
      beginDrag: function beginDrag(props) {
        return {
          dndId: props.dndId,
          index: props.index
        };
      }
    }, function (connect, monitor) {
      return {
        connectDragSource: connect.dragSource(),
        connectDragPreview: connect.dragPreview(),
        isDragging: monitor.isDragging()
      };
    });
    return keyboardSortableListItem(dropTarget(dragSource(Component)));
  };
}

function isVerticalMiddleCrossed(dragItem, hoverItem, monitor, component) {
  var result = true; // Determine rectangle on screen

  var hoverBoundingRect = ReactDOM.findDOMNode(component).getBoundingClientRect(); // Get vertical middle

  var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2; // Determine mouse position

  var clientOffset = monitor.getClientOffset(); // Get pixels to the top

  var 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

  var dragIndex = dragItem.index;
  var hoverIndex = hoverItem.index;

  if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
    result = false;
  } // Dragging upwards


  if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
    result = false;
  }

  return result;
}

exports.DndSortableListContainer = DndSortableListContainer;
exports.DndSortableListItem = DndSortableListItem;
exports.ReactDND = ReactDND;
exports.ReactHTML5Backend = ReactHTML5Backend;