const targets = document.querySelectorAll(".target");
const overlapThreshold = "50%";

// go through all the draggable objects and store their starting positions
// so can return to them when dragged off the targets

const boxes = document.querySelectorAll(".box");
boxes.forEach(function (box, index) {
  box.originalLeft = box.offsetLeft;
  box.originalTop = box.offsetTop;
});

Draggable.create(".box", {
  bounds: "#demo",
  edgeResistance: 0.65,
  type: "x,y",
  throwProps: true,
  onDragStart: function (e) {},

  // changes the colour of the hotspots whilst dragging to give feedback that a
  // dragged object is going to snap to it
  onDrag: function (e) {
    for (let i = 0; i < targets.length; i++) {
      if (this.hitTest(targets[i], overlapThreshold)) {
        targets[i].classList.add("show-over");
      } else {
        targets[i].classList.remove("show-over");
      }
    }
  },

  onDragEnd: function (e) {
    let snapMade = false;
    for (let i = 0; i < targets.length; i++) {
      if (this.hitTest(targets[i], overlapThreshold)) {
        // only snap to an available hotspot, i.e.
        // one without a class of "occupied"
        if (!targets[i].classList.contains("occupied")) {
          // add a class of occupied to hotspot to stop other items
          // being snapped to it
          targets[i].classList.add("occupied");

          // tween onto hotspot
          TweenLite.to(e.target, 0.1, {
            left: targets[i].offsetLeft,
            top: targets[i].offsetTop,
            x: 0,
            y: 0,
          });

          // is a property called targetAttachedTo directly on the dragged item.
          // this stores the target we have snapped to.  Allows us to free up
          // the target if we drag it off it

          // before we update that property first check that we haven't dragged
          // from one target straight to another as this would balls it up
          if (
            e.target.targetAttachedTo !== targets[i] &&
            e.target.targetAttachedTo !== undefined
          ) {
            e.target.targetAttachedTo.classList.remove("occupied");
          }

          // now store new target in targetAttachedTo property
          e.target.targetAttachedTo = targets[i];
          snapMade = true;
        }
      }
    }

    // if the dragged item isn't over a target send it back to its
    // start position
    if (!snapMade) {
      if (e.target.targetAttachedTo !== undefined) {
        e.target.targetAttachedTo.classList.remove("occupied");
        e.target.targetAttachedTo = undefined;
      }
      TweenLite.to(e.target, 0.1, {
        x: 0,
        y: 0,
        top: e.target.originalTop,
        left: e.target.originalLeft,
      });
    }
  },
});