"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = _default;

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactDom = require("react-dom");

var _reactDnd = require("react-dnd");

var _ItemTypes = _interopRequireDefault(require("./ItemTypes"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

const style = {
  border: '1px dashed gray',
  padding: '0.5rem 1rem',
  marginBottom: '.5rem',
  backgroundColor: 'white',
  cursor: 'move'
};
const cardSource = {
  beginDrag(props) {
    return {
      itemType: _ItemTypes.default.CARD,
      id: props.id,
      index: props.index
    };
  }

};
const cardTarget = {
  drop(props, monitor, component) {
    if (!component) {
      return;
    }

    const item = monitor.getItem();
    const dragIndex = item.index;
    const hoverIndex = props.index;

    if (props.data.isContainer || item.itemType === _ItemTypes.default.CARD) {
      // console.log('cardTarget -  Drop', item.itemType);
      return;
    }

    if (item.data && typeof item.setAsChild === 'function') {
      // console.log('BOX', item);
      if (dragIndex === -1) {
        props.insertCard(item, hoverIndex, item.id);
      }
    }
  },

  hover(props, monitor, component) {
    const item = monitor.getItem();
    const dragIndex = item.index;
    const hoverIndex = props.index;

    if (item.data && typeof item.setAsChild === 'function') {
      // console.log('BOX', item);
      return; // if (dragIndex === -1) {
      //   props.insertCard(item, hoverIndex, item.id);
      //   if (item.parentIndex === hoverIndex) {
      //     return;
      //   }
      // }
    } // Don't replace items with themselves


    if (dragIndex === hoverIndex) {
      return;
    }

    if (dragIndex === -1) {
      if (props.data && props.data.isContainer) {
        return;
      } // console.log('CARD', item);


      item.index = hoverIndex;
      props.insertCard(item.onCreate(item.data), hoverIndex);
    } // Determine rectangle on screen


    const hoverBoundingRect = (0, _reactDom.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.moveCard(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.

    item.index = hoverIndex;
  }

}; // eslint-disable-next-line no-unused-vars

function _default(ComposedComponent) {
  class Card extends _react.Component {
    render() {
      const {
        isDragging,
        connectDragSource,
        connectDropTarget
      } = this.props;
      const opacity = isDragging ? 0 : 1;
      return connectDragSource(connectDropTarget( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ComposedComponent, _extends({}, this.props, {
        style: { ...style,
          opacity
        }
      })))));
    }

  }

  _defineProperty(Card, "propTypes", {
    connectDragSource: _propTypes.default.func,
    connectDropTarget: _propTypes.default.func,
    index: _propTypes.default.number.isRequired,
    isDragging: _propTypes.default.bool,
    id: _propTypes.default.any.isRequired,
    // text: PropTypes.string.isRequired,
    moveCard: _propTypes.default.func.isRequired,
    seq: _propTypes.default.number
  });

  _defineProperty(Card, "defaultProps", {
    seq: -1
  });

  const x = (0, _reactDnd.DropTarget)([_ItemTypes.default.CARD, _ItemTypes.default.BOX], cardTarget, connect => ({
    connectDropTarget: connect.dropTarget()
  }))(Card);
  return (0, _reactDnd.DragSource)(_ItemTypes.default.CARD, cardSource, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  }))(x);
}