console.clear();
var log = console.log.bind(console);

var body  = $("body")[0];
var ease  = Back.easeOut.config(0.5);
var tiles = [];
var zones = [];

var zoneData = [
  { id: "zone-1", grid: true,  color: "#C71585", threshold: "60%",  sortProp: "value" },
  { id: "zone-3", grid: false, color: "#6495ED", threshold: "100%", sortProp: null }
];

//
// DROP ZONE
// ========================================================================
class DropZone {
  
  constructor(config) {
        
    $.extend(this, config);
    
    this.element = $("#" + this.id)[0];    
    this.parent  = this.element.parentNode;    
    this.tiles   = [];
  }
  
  addTile(tile) {
    
    var index = this.tiles.indexOf(tile);
    if (index > -1) return;
    
    this.tiles.push(tile);
    this.element.appendChild(tile.element);
    this.updateTiles();
    tile.updatePosition(this.grid);
    this.layoutTiles();    
  }
  
  removeTile(tile) {
    
    var index = this.tiles.indexOf(tile);    
    if (index < 0) return;
    
    this.tiles.splice(index, 1);
    this.element.removeChild(tile.element);
    this.updateTiles();
    this.layoutTiles();
  }
    
  updateTiles() {
    
    if (this.sortProp) {
      this.sortTiles();
      this.tiles.forEach(tile => this.element.appendChild(tile.element));
    }
  }
  
  layoutTiles() {
    this.tiles.forEach(tile => tile.layout());
  }
  
  sortTiles() {
    
    this.tiles.sort((left, right) => {
      var a = left[this.sortProp];
      var b = right[this.sortProp];
      if (a !== b) {
        if (a > b || a === void 0) return 1;
        if (a < b || b === void 0) return -1;
      }
      return left.index - right.index;
    });
  }
}

//
// TILE
// ========================================================================
class Tile {
   
  constructor(config) {    
    
    this.x    = 0;
    this.y    = 0;
    this.left = 0;
    this.top  = 150;
    
    $.extend(this, config);   
    // Should this be changed
    // this.element = $(`<div id="${this.id}" class="tile">${this.value}</div>`)[0];
    // this.zone.element.appendChild(this.element);
    
    this.clone = this.element.cloneNode(true);    
    this.clone.classList.add("clone");
    
    this.lastZone = this.zone;   
    // Check if a x position is predefined
    if (typeof this.xpos === 'undefined') {
      this.xpos = 0;
    }
    // Check if a y position is predefined
    if (typeof this.ypos === 'undefined') {
      this.ypos = 0;
    }
    //alert('xpos: ' + this.xpos + ', ypos: ' + this.ypos);
    
    TweenLite.set([this.element, this.clone], { x: "+="+this.xpos, y: "+="+this.ypos });
    
    this.draggable = new Draggable(this.clone, {
      onDrag: this.onDrag,
      onRelease: this.stopDraggable,
      callbackScope: this
    }).disable();
    
    this.zone.addTile(this);
        
    $(this.element).on("mousedown touchstart", this.startDraggable.bind(this));
  }
  
  startDraggable(event) {    
    event.preventDefault();
        
    var position = getPosition(this.element);
    
    body.appendChild(this.clone);
    TweenLite.set(this.clone, { x: position.x, y: position.y, backgroundColor: this.zone.color });    
    TweenLite.set(this.element, { autoAlpha: 0, zIndex: Draggable.zIndex + 1 });
        
    this.draggable.enable();
    this.draggable.update();
    this.draggable.startDrag(event);
  }
  
  stopDraggable(event) {
    
    this.draggable.disable();
    
    TweenLite.set(this.element, { left: 0, top: 0 });
    
    var orphaned = zones.every(zone => !this.hitTest(zone));       
    if (orphaned && !this.isGrid) {
      TweenLite.set(this.element, { left: this.left, top: this.top });
    }
    
    if (!this.zone) {     
      
      this.zone = this.lastZone;
      
      zones.forEach(zone => {        
        if (this.hitTest(zone)) this.zone = zone;
      });      
    }
       
    this.zone.addTile(this);    
    
    var offset = this.getOffset();        
    var config = {
      backgroundColor: this.zone.color,
      onComplete: () => {
        body.removeChild(this.clone);
        TweenLite.set(this.element, { autoAlpha: 1 });
      }
    };
    
    if (orphaned && !this.isGrid) {
                  
      config.x = "-=" + offset.x;
      config.y = "-=" + offset.y;
        
    } else if (!this.isGrid) {     
      
      var rect  = this.zone.element.getBoundingClientRect();
      this.left = `${offset.x / rect.width  * 100}%`;
      this.top  = `${offset.y / rect.height * 100}%`;
      
      TweenLite.set(this.element, { left: this.left, top: this.top });
            
    } else {
      
      TweenLite.set(this.element, { left: 0, top: 0 });      
      config.x = "-=" + offset.x;
      config.y = "-=" + offset.y;
    }
        
    TweenLite.to(this.clone, 0.3, config);     
    
    logTiles();
  }
    
  layout() {
    
    if (!this.isGrid) return;
    
    var transform = this.element._gsTransform;
    
    var lastX = this.x;
    var lastY = this.y;
    
    this.x = this.element.offsetLeft;
    this.y = this.element.offsetTop;
        
    var dx = transform.x + lastX - this.x;
    var dy = transform.y + lastY - this.y; 
    
    TweenLite.fromTo(this.element, 0.5, { x: dx, y: dy }, { x: 0, y: 0, ease: ease });
  }
  
  onDrag() {
    
    if (this.zone) {
      
      if (this.zone && !this.hitTest(this.zone, 0)) {
        this.lastZone = this.zone;
        this.zone.removeTile(this);
        this.zone = null;
      }
    }    
  }
  
  getOffset() {
    
    var position1 = getPosition(this.clone);
    var position2 = getPosition(this.zone.element);
    
    return {
      x: position1.x - position2.x - this.element.offsetLeft,
      y: position1.y - position2.y - this.element.offsetTop
    };
  }
  
  hitTest(zone, threshold) {
    var overlap = threshold != null ? threshold : zone.threshold;
    return Draggable.hitTest(this.clone, zone.parent, overlap);
  }
  
  updatePosition(isGrid) {
    
    this.x = this.element.offsetLeft;
    this.y = this.element.offsetTop;
    
    this.isGrid = isGrid;
  }
}

//
// GET POSITION
// ========================================================================
function getPosition(element) {
    
  if (element.length) element = element[0];
  
  var rect = element.getBoundingClientRect();
  var doc  = document.documentElement;
  
  var scrollLeft = window.scrollX || doc.scrollLeft || body.scrollLeft || 0;
  var scrollTop  = window.scrollY || doc.scrollTop  || body.scrollTop  || 0;
  
  var clientLeft = doc.clientLeft || body.clientLeft || 0;
  var clientTop  = doc.clientTop  || body.clientTop  || 0;
  
  return {
    x: rect.left + scrollLeft - clientLeft,
    y: rect.top  + scrollTop  - clientTop
  };
}

//
// LOG TILES
// ========================================================================
function logTiles() {
  
  console.log("\n");
  zones.forEach(zone => {
    console.log(zone.id, zone.tiles.map(tile => tile.value));
  });
}

//
// RUN
// ========================================================================
zones = zoneData.map(zone => new DropZone(zone));

// Map will store your objects in case you need to reference them later
tiles = $('#zone-1').children(".tile").map(function(i, tile) {
  
  return new Tile({    
    element: tile,
    zone: zones[0],
    
    // Whatever props you want for your object... doesn't matter
    // can be any type of data, which you can also use to sort the tiles later on
    id: tile.id, 
    value: tile.textContent,
    name: tile.dataset.name
  });
});

tiles = $('#zone-3').children(".tile").map(function(i, tile) {
  
  return new Tile({    
    element: tile,
    zone: zones[1],
    
    // Whatever props you want for your object... doesn't matter
    // can be any type of data, which you can also use to sort the tiles later on
    id: tile.id, 
    value: tile.textContent,
    name: tile.dataset.name,
    xpos: tile.dataset.x,
    ypos: tile.dataset.y
  });
});

function toJSON(description) {
  
  var zone = zones[1];
    
  var data = {
    description: $("input#description").val(),
    total: zone.tiles.length,
    tiles: zone.tiles.map(tile => {
      return {
        id: tile.id,
        value: tile.value,
        name: tile.name,
        top: tile.element.offsetTop,
        left: tile.element.offsetLeft
      };
    })
  };
  
  $("pre").text(JSON.stringify(data, null, 2));
}

$("#btnSubmit").click(toJSON);

$("___#btnSubmit").click(function() {
  var description = $("input#description").val();
  if (description == '') {
    alert('Please fill in a description!');
    $('input#description').focus();
  } else {
    var html = '<form action="" method="post">';
    html += '<input type="text" name="description" value="' + description + '" />';
    var offsettl = $("#topleft").offset();
    html += '<input type="text" name="topleft" value="' + offsettl.left + ';' + offsettl.top + '" />'
    var counter = 0;
    $('#zone-3').children(".tile").each(function() {
      counter++;
      var id = $(this).attr('data-id');
      alert(id);
      var offset = $(this).offset();
      html += '<input type="text" name="' + id + '" value="' + offset.left + ';' + offset.top + '" />'
    });
    html += '</form>';
    var form = $(html);
    // $('body').append(form);
    alert("You dropped " + counter + " item(s)");
  }
  //form.submit()
});