import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from "react";
import { useDrop } from "react-dnd";
import LineRender from "./LineRender";
var lineDirection = ['top', 'left', 'right', 'bottom'];
var space = 10;

var Droppable = function Droppable(props) {
  var dropRef = props.dropRef,
      _props$directions = props.directions,
      directions = _props$directions === void 0 ? lineDirection : _props$directions,
      id = props.id,
      type = props.type,
      last = props.last,
      children = props.children,
      isDragging = props.isDragging,
      onDrop = props.onDrop;

  var _useState = useState(null),
      _useState2 = _slicedToArray(_useState, 2),
      direction = _useState2[0],
      setDirection = _useState2[1];

  var _useDrop = useDrop({
    accept: "element",
    collect: function collect(monitor) {
      return {
        isOver: monitor.isOver() && monitor.isOver({
          shallow: true
        })
      };
    },
    hover: function hover(item, monitor) {
      if (directions.includes('center')) {
        if (direction) {
          setDirection(null);
        }

        return;
      }

      if (!item.target.includes(type)) {
        if (direction) {
          setDirection(null);
        }

        return;
      }

      if (monitor.isOver() && monitor.isOver({
        shallow: true
      })) {
        if (!item.target.includes(type)) {
          if (direction) {
            setDirection(null);
          }

          return;
        }

        if (!dropRef.current) {
          return;
        }

        if (directions.length === 2) {
          space = 0;
        } else {
          space = 10;
        } // 确定屏幕上矩形范围


        // 确定屏幕上矩形范围
        var hoverBoundingRect = dropRef.current.getBoundingClientRect(); // 获取中点垂直坐标

        // 获取中点垂直坐标
        var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2; // 获取中点水平坐标

        // 获取中点水平坐标
        var hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2; // 确定鼠标位置

        // 确定鼠标位置
        var clientOffset = monitor.getClientOffset(); // 获取距顶部距离

        // 获取距顶部距离
        var hoverClientY = clientOffset.y - hoverBoundingRect.top;
        var hoverClientX = clientOffset.x - hoverBoundingRect.left;

        if (directions.includes(lineDirection[1]) && hoverClientX < hoverMiddleX && hoverClientY > space && hoverMiddleY * 2 - hoverClientY > space && direction !== lineDirection[1]) {
          // left
          setDirection(lineDirection[1]);
        }

        if (directions.includes(lineDirection[2]) && hoverClientX > hoverMiddleX && hoverClientY > space && hoverMiddleY * 2 - hoverClientY > space && direction !== lineDirection[2]) {
          // right
          setDirection(lineDirection[2]);
        }

        if (directions.includes(lineDirection[0]) && hoverMiddleY > hoverClientY && hoverClientY <= space && direction !== lineDirection[0]) {
          // top
          setDirection(lineDirection[0]);
        }

        if (last && directions.includes(lineDirection[3]) && hoverMiddleY * 2 > hoverClientY && hoverMiddleY * 2 - hoverClientY <= space && direction !== lineDirection[3]) {
          // bottom
          setDirection(lineDirection[3]);
        }
      } else if (direction) {
        setDirection(null);
      }
    },
    drop: function drop(_, monitor) {
      if (typeof onDrop === "function") {
        if (direction || directions.includes('center')) {
          var itemNew = monitor.getItem();
          setTimeout(function () {
            onDrop(itemNew, direction);
          }, 0);
        }
      }
    }
  }),
      _useDrop2 = _slicedToArray(_useDrop, 2),
      _useDrop2$ = _useDrop2[0],
      item = _useDrop2$.item,
      isOver = _useDrop2$.isOver,
      drop = _useDrop2[1];

  return /*#__PURE__*/React.createElement(React.Fragment, null, isOver && direction && /*#__PURE__*/React.createElement(LineRender, {
    direction: direction,
    id: id,
    rect: ['top', 'bottom'].includes(direction) ? dropRef.current.getBoundingClientRect() : null
  }), children({
    drop: drop,
    direction: direction,
    isOver: isOver
  }));
};

export default /*#__PURE__*/React.memo(Droppable);
//# sourceMappingURL=Droppable.js.map