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.$('hidden-name').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;
	}
});