"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _reactDnd = require("react-dnd");
var _noop = _interopRequireDefault(require("lodash/noop"));
var _DragLayer = _interopRequireDefault(require("./DragLayer"));
var _types = require("../types");
var _constants = require("../constants");
var _DragUtils = require("../DragUtils");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/DragAndDrop/Draggable/components/DraggableSource.jsx";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var source = {
  beginDrag: function beginDrag(_ref) {
    var id = _ref.id,
      index = _ref.index,
      containerId = _ref.containerId,
      groupName = _ref.groupName,
      item = _ref.item,
      onMoveOut = _ref.onMoveOut,
      onDragStart = _ref.onDragStart,
      onDrop = _ref.onDrop;
    if (onDragStart) {
      onDragStart({
        id: id,
        index: index,
        containerId: containerId,
        groupName: groupName,
        item: item
      });
    }
    /** we setup monitor.getItem() snapshot, so we will be always able to get info about item that we drag */
    return {
      id: id,
      index: index,
      containerId: containerId,
      groupName: groupName,
      originalIndex: index,
      // as index is mutable during d&d, we need another storage for original index
      originalItem: item,
      onMoveOut: onMoveOut,
      realTime: {
        onMoveOut: onMoveOut,
        onDrop: onDrop,
        containerId: containerId
      }
    };
  },
  endDrag: function endDrag(_ref2, monitor) {
    var id = _ref2.id,
      index = _ref2.index,
      containerId = _ref2.containerId,
      groupName = _ref2.groupName,
      item = _ref2.item,
      onDragEnd = _ref2.onDragEnd;
    /** if drop was called, on drop target and drag is end, then we notify parent about this */
    var onDrop = monitor.getItem().realTime.onDrop;
    if (onDragEnd) {
      onDragEnd({
        id: id,
        index: index,
        containerId: containerId,
        groupName: groupName,
        item: item
      });
    }
    if (monitor.getDropResult()) {
      var isSameGroup = groupName && monitor.getItem().groupName && groupName === monitor.getDropResult().groupName;
      var isSameContainer = containerId === monitor.getDropResult().containerId;
      if (isSameGroup || isSameContainer) {
        onDrop({
          payload: monitor.getItem().originalItem,
          // original item
          removedIndex: monitor.getItem().originalIndex,
          // original item index
          addedIndex: monitor.getItem().index,
          // new item index
          addedToContainerId: monitor.getDropResult().containerId,
          // new container for item
          removedFromContainerId: containerId // original item container
        });
      }
    }
  },
  canDrag: function canDrag(_ref3) {
    var id = _ref3.id,
      index = _ref3.index,
      containerId = _ref3.containerId,
      groupName = _ref3.groupName,
      item = _ref3.item,
      _canDrag = _ref3.canDrag;
    return _canDrag ? _canDrag({
      id: id,
      index: index,
      containerId: containerId,
      groupName: groupName,
      item: item
    }) : true;
  },
  isDragging: function isDragging(_ref4, monitor) {
    var id = _ref4.id,
      containerId = _ref4.containerId,
      groupName = _ref4.groupName;
    var item = monitor.getItem();
    var isSameGroup = groupName && item.groupName && groupName === item.groupName;
    var isSameContainer = containerId === item.containerId;
    return (isSameGroup || isSameContainer) && item.id === id;
  }
};
var collect = function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging()
  };
};
var DraggableSource = /*#__PURE__*/function (_React$Component) {
  function DraggableSource() {
    var _this;
    (0, _classCallCheck2["default"])(this, DraggableSource);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, DraggableSource, [].concat(args));
    _this.state = {
      offsetOfHandle: {
        x: 0,
        y: 0
      },
      itemWidth: null
    };
    _this.rootNode = null;
    _this.updateItemWidth = function () {
      if (_this.rootNode) {
        _this.setState({
          itemWidth: _this.rootNode.getBoundingClientRect().width
        });
      }
    };
    _this._setRootNode = function (node) {
      // Don't need to reset the values if node remains the same
      if (node && _this.rootNode !== node) {
        _this.rootNode = node;
      }
    };
    _this._renderPreview = function (_ref5) {
      var previewStyles = _ref5.previewStyles;
      var _this$props = _this.props,
        renderItem = _this$props.renderItem,
        id = _this$props.id,
        item = _this$props.item,
        delayed = _this$props.delayed;
      return renderItem({
        id: id,
        item: item,
        previewStyles: _objectSpread({
          width: _this.state.itemWidth
        }, previewStyles),
        isPreview: true,
        connectHandle: _noop["default"],
        delayed: delayed
      });
    };
    return _this;
  }
  (0, _inherits2["default"])(DraggableSource, _React$Component);
  return (0, _createClass2["default"])(DraggableSource, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.props.connectDragPreview) {
        this.props.connectDragPreview((0, _DragUtils.getEmptyImage)(), {
          captureDraggingState: true
        });
      }
      this.updateDiff();
      this.updateItemWidth();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (prevProps.id !== this.props.id || prevProps.containerId !== this.props.containerId) {
        this.updateDiff();
      }
      if (prevProps.isDragging !== this.props.isDragging) {
        this.updateItemWidth();
      }
    }
  }, {
    key: "updateDiff",
    value: function updateDiff() {
      /* in case if we have handle, the drag will start in wrong position and we need to fix this */
      if (this.props.withHandle && this.handleNode) {
        this.setState({
          offsetOfHandle: {
            x: this.handleNode.getBoundingClientRect().x - this.rootNode.getBoundingClientRect().x,
            y: this.handleNode.getBoundingClientRect().y - this.rootNode.getBoundingClientRect().y
          }
        });
      }
    }
  }, {
    key: "_getWrapperStyles",
    value: function _getWrapperStyles() {
      var _this$props2 = this.props,
        shift = _this$props2.shift,
        ignoreMouseEvents = _this$props2.ignoreMouseEvents,
        animationDuration = _this$props2.animationDuration,
        animationTiming = _this$props2.animationTiming;
      var _ref6 = shift || [0, 0],
        _ref7 = (0, _slicedToArray2["default"])(_ref6, 2),
        xShift = _ref7[0],
        yShift = _ref7[1];
      var hasShift = xShift || yShift;
      var transition = ignoreMouseEvents ? "transform ".concat(animationDuration, "ms ").concat(animationTiming) : undefined;
      var transform = hasShift ? "translate(".concat(xShift, "px, ").concat(yShift, "px)") : undefined;
      var willChange = hasShift ? 'transform' : undefined;
      var pointerEvents = ignoreMouseEvents || hasShift ? 'none' : undefined;
      return {
        willChange: willChange,
        transition: transition,
        transform: transform,
        pointerEvents: pointerEvents
      };
    }
  }, {
    key: "_renderDraggableItem",
    value: function _renderDraggableItem() {
      var _this2 = this;
      var _this$props3 = this.props,
        isDragging = _this$props3.isDragging,
        connectDragSource = _this$props3.connectDragSource,
        withHandle = _this$props3.withHandle,
        renderItem = _this$props3.renderItem,
        id = _this$props3.id,
        item = _this$props3.item,
        delayed = _this$props3.delayed,
        withStrip = _this$props3.withStrip,
        isInitialPositionToDrop = _this$props3.isInitialPositionToDrop;
      var content = /*#__PURE__*/_react["default"].cloneElement(withHandle ? renderItem({
        id: id,
        item: item,
        isPlaceholder: isDragging,
        connectHandle: function connectHandle(handle) {
          var handleWithRef = /*#__PURE__*/_react["default"].cloneElement(handle, {
            ref: function ref(node) {
              return _this2.handleNode = node;
            }
          });
          return connectDragSource(handleWithRef);
        },
        delayed: delayed,
        withStrip: withStrip,
        isInitialPositionToDrop: isInitialPositionToDrop
      }) : connectDragSource(renderItem({
        id: id,
        item: item,
        isPlaceholder: isDragging,
        connectHandle: _noop["default"],
        delayed: delayed,
        withStrip: withStrip,
        isInitialPositionToDrop: isInitialPositionToDrop
      })), (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _constants.dataAttributes.draggableSource, true), _constants.dataAttributes.id, id));
      return /*#__PURE__*/_react["default"].createElement("div", {
        style: this._getWrapperStyles(),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 227,
          columnNumber: 12
        }
      }, content);
    }
  }, {
    key: "_renderPreviewItem",
    value: function _renderPreviewItem() {
      var _this$props4 = this.props,
        id = _this$props4.id,
        usePortal = _this$props4.usePortal;
      return /*#__PURE__*/_react["default"].createElement(_DragLayer["default"], {
        offsetOfHandle: this.state.offsetOfHandle,
        usePortal: usePortal,
        renderPreview: this._renderPreview,
        id: id
        // pass 'width' this prop to rerender element with changed width from state
        ,
        width: this.state.itemWidth,
        draggedType: _types.ItemTypes.DRAGGABLE,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 251,
          columnNumber: 7
        }
      });
    }
  }, {
    key: "render",
    value: function render() {
      var connectDragSource = this.props.connectDragSource;
      return connectDragSource ? /*#__PURE__*/_react["default"].createElement("div", {
        ref: this._setRootNode,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 266,
          columnNumber: 7
        }
      }, this._renderDraggableItem(), this._renderPreviewItem()) : null;
    }
  }]);
}(_react["default"].Component);
var _default = exports["default"] = (0, _reactDnd.DragSource)(_types.ItemTypes.DRAGGABLE, source, collect)(DraggableSource);