require('./style.scss');
var Component = require('vn/component');
var Toast = require('../toast');
var Tpl = require('./ui.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(props) {
		this.loadTemplateFromString(Tpl);

		this.$.form.onsubmit = () => {
			this._onSubmit(); return false; 
		};

		Component.prototype.initialize.call(this, props);
	},
	
	onNameChange() {
		var newValue = this.$.name.value;
		
		if (!newValue)
			newValue = null
	
		this.emit('name-changed', newValue);
	},
	
	async _onSubmit() {
		this.$.hiddenName.value = this.$.name.value;
		this.$.submit.disabled = true;
		this.$.spinner.start();

		try {
			await this.conn.sendFormMultipart(this.$.form);
			Toast.showMessage(_('ImageAdded'));
			this.emit('file-uploaded', this.$.name.value);
		} finally {
			this.$.submit.disabled = false;
			this.$.spinner.stop();
		}
	},
	
	setData(image, directory) {
		this.$.name.value = image;
		this.$.schema.value = directory;
	}
});