'use strict';
import ReactDOM from 'react-dom';
import ReactDND, { DragDropContext, DropTarget, DragSource } from 'react-dnd';
import ReactHTML5Backend from 'react-dnd-html5-backend';
import { keyboardSortableContext } from './keyboardSortableContext';
import { keyboardSortableListItem } from './keyboardSortableListItem';
/**
 * @param {React.Component} Component
 * @return {function}
 */
var dndContext;
function DndSortableListContainer(Component) {
    Component = keyboardSortableContext(Component);
    dndContext = dndContext || DragDropContext(ReactHTML5Backend);
    return dndContext(Component);
}
/**
 * @param {string} name
 * @return {function}
 */
function DndSortableListItem(name) {
    return function (Component) {
        var dropTarget = DropTarget(name, {
            hover: function (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 (props, monitor) {
                if (props.onMove) {
                    props.onMove(monitor.getItem().dndId, props.dndId);
                }
            }
        }, function (connect) {
            return {
                connectDropTarget: connect.dropTarget()
            };
        });
        var dragSource = DragSource(name, {
            beginDrag: function (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;
}
export { DndSortableListContainer, DndSortableListItem, ReactDND, ReactHTML5Backend };
//# sourceMappingURL=index.js.map