var BlueprintSettings = FormView.extend(ToggleableView.prototype).extend({
	el: "#blueprintSettings",
	
	action: "/api/blueprint/edit",
	destroyAction: "/api/blueprint/destroy",

	events: {
	  "mousedown": "stopPropagation",
		"keydown": 'stopPropagation',
		"keydown [name=name]": 'enterSubmit',
		"click [data-role='save-layout']": 'clickSave',
		"click [data-role='clear-layout']": 'clear',
		"click [data-role='destroy-layout']": 'destroy',
	},
	
	initialize: function(opt){
		this.parent = opt.parent
		this.__super__.initialize.call(this)
		
		this.$id = this.$("[name=_id]")
		this.$csrf = this.$("[name=_csrf]")
		this.$name = this.$("[name=name]")
	},
	
	load: function(data){
		this.$id.val(data._id)
		if (data.name) {
		  this.$name.val(data.name)
      this.hide()
		}
		else {
		  this.$name.val("")
		}
		if (data.shapes) {
      shapes.destroy()
      shapes.deserialize( data.shapes )
		}
		this.data = data
	},
	
	clear: function(){
		shapes.destroy()
	},
	
	destroy: function(){
		var msg = "Are you sure you want to delete the blueprint " + sanitize(this.$name.val()) + "?"
		ConfirmModal.confirm(msg, function(){
			$.ajax({
				url: this.destroyAction,
				type: "delete",
				data: { _id: this.$id.val(), _csrf: this.$csrf.val() },
				success: function(data){
					window.location.href = "/layout"
				}
			})
		}.bind(this))
	},

	enterSubmit: function (e) {
		e.stopPropagation()
		var base = this
		if (e.keyCode == 13) {
			setTimeout(function(){ base.save(e) }, 100)
		}
	},

	validate: function(){
		var errors = []
		var name = this.$name.val()
		if (! name || ! name.length) {
			errors.push("Blueprint needs a name.")
		}
		if (shapes.count() == 0) {
			errors.push("Please add some walls.")
		}
		return errors
	},
	
	showErrors: function(errors){
		var $errors = $("<span>")
		errors.forEach(function(err){
			var $row = $("<div>")
			$row.html(err)
			$errors.append( $row )
		})
		ErrorModal.alert($errors)
	},
	
	serialize: function(){
		var fd = new FormData()
		fd.append( "_csrf", this.$csrf.val() )
		fd.append( "_id", this.$id.val() )
		fd.append( "name", this.$name.val() )
		fd.append( "shapes", JSON.stringify( shapes.serialize() ) )
		fd.append( "startPosition", JSON.stringify( app.position(scene.camera) ) )
		return fd
	},

	clickSave: function(){
    this.toggle(false)
    this.save()
	},
	
	success: function(data){
		this.$id.val(data._id)
		this.$name.val(data.name)
		this.action = this.updateAction
		
		this.hide()
		
		Minotaur.unwatch(this)
		Minotaur.hide()

		window.history.pushState(null, document.title, "/blueprint/" + data.slug)
	},

})