var Collaborators = ModalFormView.extend({
	el: ".mediaDrawer.collaborators",
	
	template: $("#collaborator-template").html(),

  indexAction: function(){ return "/api/collaborator/" + this.parent.data.slug + "/index" },
	createAction: function(){ return "/api/collaborator/" + this.parent.data.slug + "/create" },
	destroyAction: function(){ return "/api/collaborator/" + this.parent.data.slug + "/destroy" },
	
	events: {
	  "mousedown": "stopPropagation",
	  "keydown [name=email]": "enterSubmit",
	  "click [data-role=destroy-collaborator]": "destroy",
	},
	
	show: function(){
	  this.action = this.createAction
	  this.$("#collaborator-url-rapper").hide()
	  
		if (! this.loaded) {
			this.load()
		}
		else {
			this.__super__.show.call(this)
		}
	},
	
	load: function(){
		$.get(this.indexAction(), this.populate.bind(this))
	},

  populate: function(collaborators){
    this.loaded = true
    collaborators.forEach(function(collab){
      var $el = $( this.template )
      $el.data("collaborator-id", collab._id)

      if (collab.user) {
        $el.find(".email").remove()
        
        $el.find(".user")
           .attr("href", "/profile/" + collab.user.username)
        
        $el.find(".avatar")
           .css("background-image", "url(" + collab.user.photo + ")")
        
        $el.find(".username")
           .html( collab.user.displayName )
        
        if (collab.owner) {
          $el.find("button").remove()
        }
        else {
          $el.find(".role").remove()
        }
      }
      else {
        $el.find(".user").remove()
        $el.find(".role").remove()
        $el.find(".email").html( collab.email )
      }
      
      $("#collaborator-list").append($el)
    }.bind(this))
    
    this.__super__.show.call(this)
  },
  
	enterSubmit: function (e) {
		e.stopPropagation()
		var base = this
		if (e.keyCode == 13) {
			setTimeout(function(){
			  base.save(e)
			  base.reset()
			}, 100)
		}
	},
	
	validate: function(){
	  var errors = []
	  
    var email = this.$("[name=email]").val()		
		if (! email.length) {
			errors.push("Please enter an email address");
		}
		else if (email.indexOf("@") === -1) {
			errors.push("Please enter a valid email address");
		}
		
		return errors
	},
  
  success: function(data){
    this.reset()
    this.populate([data])
    // weird! this.$("#collaborator-url") not working here, but works without this
    setTimeout(function(){
      $("#collaborator-url").val("http://vvalls.com/join/" + data.nonce)
    }, 100)
    this.$("#collaborator-dummy-email").html(data.email)
    this.$("#collaborator-url-rapper").slideDown(300)
  },

  destroy: function(e){
    var base = this
    var $el = $(e.currentTarget).closest("li")
    
    if ($el.find(".user").length) {
      var name = $el.find(".username").html()
      ConfirmModal.confirm("Are you sure you want to remove " + name + " from this project?", _destroy)
    }
    else {
      _destroy()
    }
    
    function _destroy () {
      var _id = $el.data("collaborator-id")
      $el.remove()
      $.ajax({
        type: "DELETE",
        url: base.destroyAction(),
        data: { _id: _id, _csrf: $("[name=_csrf]").val() },
      })
    }
  },

})