require('./style.scss');

module.exports = new Class({
	Extends: Htk.Column,
	Tag: 'htk-column-button',
	Properties: {
		image: {
			type: String
			,value: null
		},
		icon: {
			type: String
			,set: function(x) {
				this._icon = x;
			}
			,get: function() {
				return this._icon;
			}
		},
		tip: {
			type: String,
			value: null
		},
		disabled: {
			type: Boolean,
			value: false
		},
		href: {
			type: String,
			value: null
		},
		target: {
			type: String,
			value: ''
		}
	},
	
	initialize: function(props) {
		this._cssClass = 'cell-button';
		Htk.Column.prototype.initialize.call(this, props);
	},

	render: function(tr) {
		const td = Htk.Column.prototype.render.call(this, tr);

		let button;
		
		if (this.href == null) {
			button = this.createElement('button');
			button.addEventListener('click', 
				this.buttonClicked.bind(this, this.value, tr, button));
		} else {
			button = this.createElement('a');
			button.href = this.href;
			button.target = this.target;
		}
	
		if (this.tip)
			button.title = _(this.tip);

		button.disabled = this.disabled;
		td.appendChild(button);
	
		const icon = new Htk.Icon({
			name: this._icon
		});
		button.appendChild(icon.node);

		return td;
	},

	buttonClicked: function(value, tr, button) {
		this.emit('clicked', value, tr.rowIndex - 1, button);
	}
});