import $ from 'jquery';
import _ from 'underscore';
import Backbone from 'backbone';

import TempSnippetView from './temp-snippet';
import PubSub from '../helper/pubsub';

import { renderform as _renderForm } from '../templates/templates';

export default  Backbone.View.extend({
  tagName: "fieldset"
  , initialize: function(){
    this.collection.on("add", this.render, this);
    this.collection.on("remove", this.render, this);
    this.collection.on("change", this.render, this);
    PubSub.on("mySnippetDrag", this.handleSnippetDrag, this);
    PubSub.on("tempMove", this.handleTempMove, this);
    PubSub.on("tempDrop", this.handleTempDrop, this);
    this.$build = $("#build");
    this.renderForm = _.template(_renderForm);
    this.render();
    console.log(this.$build.position());
    console.log(this.$build.width());
  }

  , render: function(){
    //Render Snippet Views
    this.$el.empty();
    var that = this;
    var containsFile = false;
    _.each(this.collection.renderAll(), function(snippet){
      that.$el.append(snippet);
    });
    $("#render").val(that.renderForm({
      multipart: this.collection.containsFileType(),
      text: _.map(this.collection.renderAllClean(), function(e){return e.html()}).join("\n")
    }));
    this.$el.appendTo("#build form");
    this.delegateEvents();
  }

  , getBottomAbove: function(eventY){
    var myFormBits = $(this.$el.find(".component"));
    var topelement = _.find(myFormBits, function(renderedSnippet) {
      if (($(renderedSnippet).position().top + $(renderedSnippet).height()) > eventY  - 90) {
        return true;
      }
      else {
        return false;
      }
    });
    if (topelement){
      return topelement;
    } else {
      return myFormBits[0];
    }
  }

  , handleSnippetDrag: function(mouseEvent, snippetModel) {
    $("body").append(new TempSnippetView({model: snippetModel}).render());
    this.collection.remove(snippetModel);
    PubSub.trigger("newTempPostRender", mouseEvent);
  }

  , handleTempMove: function(mouseEvent){
    $(".target").removeClass("target");
    if(mouseEvent.pageX >= this.$build.position().left &&
        mouseEvent.pageX < (this.$build.width() + this.$build.position().left) &&
        mouseEvent.pageY >= this.$build.position().top &&
        mouseEvent.pageY < (this.$build.height() + this.$build.position().top)){
      $(this.getBottomAbove(mouseEvent.pageY)).addClass("target");
    } else {
      $(".target").removeClass("target");
    }
  }

  , handleTempDrop: function(mouseEvent, model, index){
    if(mouseEvent.pageX >= this.$build.position().left &&
       mouseEvent.pageX < (this.$build.width() + this.$build.position().left) &&
       mouseEvent.pageY >= this.$build.position().top &&
       mouseEvent.pageY < (this.$build.height() + this.$build.position().top)) {
      var index = $(".target").index();
      $(".target").removeClass("target");
      this.collection.add(model,{at: index+1});
    } else {
      $(".target").removeClass("target");
    }
  }
});

@@ -750,87 +750,8 @@
 ();%0A
-    console.log(this.$build.position());%0A    console.log(this.$build.width());%0A
   %7D%0A
@@ -1427,24 +1427,22 @@
 nippet).
-position
+offset
 ().top +
@@ -2019,32 +2019,30 @@
 this.$build.
-position
+offset
 ().left &&%0A 
@@ -2098,32 +2098,30 @@
 this.$build.
-position
+offset
 ().left) &&%0A
@@ -2156,32 +2156,30 @@
 this.$build.
-position
+offset
 ().top &&%0A  
@@ -2235,32 +2235,30 @@
 this.$build.
-position
+offset
 ().top))%7B%0A  
@@ -2479,32 +2479,30 @@
 this.$build.
-position
+offset
 ().left &&%0A 
@@ -2561,24 +2561,22 @@
 .$build.
-position
+offset
 ().left)
@@ -2614,32 +2614,30 @@
 this.$build.
-position
+offset
 ().top &&%0A  
@@ -2700,16 +2700,14 @@
 ild.
-position
+offset
 ().t

fix drag and drop