require('./style.scss');

module.exports = new Class({
	Extends: Htk.Column
	,Tag: 'htk-column-spin'
	,Properties: {
		/**
		 * The text to append to the number.
		 */
		unit:{
			type: String
			,value: null
		},
		/**
		 * The number of decimal places to display.
		 */
		digits: {
			type: Number
			,value: 0
		}
	}
	
	,initialize(props) {
		this._cssClass = 'cell-spin';
		Htk.Column.prototype.initialize.call(this, props);
	}
	
	,renderHeader() {
		var th = Htk.Column.prototype.renderHeader.call(this, );
		th.className = 'cell-spin';
		return th;
	}

	,render(tr) {
		var td = Htk.Column.prototype.render.call(this, tr);
		
		var valueString = null;
		
		if (this.value !== null && this.value !== undefined)
			valueString = new Number(this.value).toFixed(this.digits);

		if (this.editable) {
			var entry = this.createElement('input');
			entry.type = 'text';
			entry.addEventListener('change', this.inputChanged.bind(this, tr, entry));
			td.appendChild(entry);
			
			if (valueString)
				entry.value = valueString;
		} else if (valueString) {
			if (this.unit)
				valueString = valueString + this.unit;
		
			var text = this.createTextNode(valueString);
			td.appendChild(text);
		}

		return td;
	}
	
	,inputChanged(tr, entry) {
		this.changed(tr, parseInt(entry.value));
	}
});