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';
		this.parent(props);
	},

	render: function(tr) {
		var td = this.parent(tr);

		var 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;
		}
	
		button.disabled = this.disabled;
		td.appendChild(button);
	
		var span = this.createElement('span');
		span.className = 'material-symbols-rounded icon';
		span.innerText = this._icon;
		button.appendChild(span);

		if (this.tip) {
			button.title = _(this.tip);
			span.title = _(this.tip);
		}

		return td;
	},

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