var Component = require('./component');
var Toast = require('./toast');
var Tpl = require('./image-editor.xml').default;

/**
 * A form to handle the image database, it allows to add new images or
 * replace it.
 */
module.exports = new Class({
	Extends: Component,
	Properties: {
		/**
		 * The REST connection used to upload the image.
		 */
		conn: {
			type: Vn.JsonConnection
		}
	},
	
	initialize: function(props) {
		this.builderInitString(Tpl);

		var self = this;
		this.$.form.onsubmit = function() {
			self._onSubmit(); return false; 
		};

		this.parent(props);
	},
	
	onNameChange: function() {
		var newValue = this.$.name.value;
		
		if (!newValue)
			newValue = null
	
		this.signalEmit('name-changed', newValue);
	},
	
	_onSubmit: function() {
		this.$.hiddenName.value = this.$.name.value;
		this.$.submit.disabled = true;
		this.$.spinner.start();

		this.conn.sendFormMultipart(this.$.form,
			this._onResponse.bind(this));
	},
	
	_onResponse: function(json, error) {
		this.$.submit.disabled = false;
		this.$.spinner.stop();

		if (error)
			throw error;

		Toast.showMessage(_('ImageAdded'));
		this.signalEmit('file-uploaded', this.$.name.value);
	},
	
	setData: function(image, directory) {
		this.$.name.value = image;
		this.$.schema.value = directory;
	}
});