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

/**
 * 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.$('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;
	}
});