// -------------------------------------------------------------

let childrenGames = {
  "Racing": "Hurdles",
  "Football": "Ball",
  "Hula hoop": "Hoop",
  "Singing game": "Handkerchief",
  "Somersault": "Mattress",
  "Swimming": "Floaters"
}

/* Dragging buttons function */
// The drag-n-drop targets

let targets = $(".game-box"); // Table targets

// The drag-n-drop buttons

var buttons = $(".game-things"); // drag buttons

// ------------------------------------------------------------

$.each(buttons, function(i, e) {
  var position = $(e).offset();
  e.originalLeft = position.left;
  e.originalTop = position.top - 160;
});

$.each(buttons, function(i, e) {
  TweenMax.set(e, {
    position: "absolute",
    left: e.originalLeft,
    top: e.originalTop
  });
});

let neededThings = 0;
var overlapThreshold = "50%";

Draggable.create(buttons, {
  bounds: ".healthy-development",
  edgeResistance: 0.65,
  type: "x,y",
  // throwProps: true,

  onDragStart: function() {
    if (this.target.targetAttachedTo) this.target.targetAttachedTo.removeClass("occupied");
  },
  // changes the colour of the targets whilst dragging to give feedback that a
  // dragged object is going to snap to it
  onDrag: function() {
    for (let i = 0; i < targets.length; i++) {
      if (this.hitTest(targets[i], overlapThreshold)) {
        $(targets[i]).addClass("addRed");
      } else {
        $(targets[i]).removeClass("addRed");
      }
    }
    $(this.target).addClass("dragging-it");
  },

  onDragEnd() {

    let theDragged = this.target;
    let theSpot = document.querySelector(".addRed");
    let isHitting = false;

    if (theSpot && this.hitTest(theSpot, overlapThreshold)) {
      isHitting = true;
    }

    $(theDragged).removeClass("dragging-it");
    if (isHitting) {
      if ($(theDragged).hasClass("games") && $(theSpot).hasClass("game-name") ||
        $(theDragged).hasClass("tools") && $(theSpot).hasClass("game-tool")) {
        // if the tool is the one used for the game || if the game is the one that played with the tool
        
        let p = $(theSpot).position();
        // tween onto target
        TweenLite.to(theDragged, 0.1, {
          left: p.left,
          top: p.top,
          x: 0,
          y: -5
        });
        $(theSpot).addClass("occupied");
        theDragged.targetAttachedTo = theSpot;
        snapMade = true;
        $(theDragged).addClass("thats-correct");
        neededThings++;
        if (neededThings == 9) {
          setTimeout(() => {
            functions.challengeFinished.play();
          }, 2000);
        }
      } else if ($(theDragged).hasClass("games") && $(theSpot).hasClass("game-tool") ||
        $(theDragged).hasClass("tools") && $(theSpot).hasClass("game-name")) {
        TweenLite.to(theDragged, 0.1, {
          x: 0,
          y: 0,
          top: theDragged.originalTop,
          left: theDragged.originalLeft
        });
        notCorrect.play();
      }
    } else {
      TweenLite.to(theDragged, 0.1, {
        x: 0,
        y: 0,
        top: theDragged.originalTop,
        left: theDragged.originalLeft
      });
     
    }
  }
});