require('./style.scss');

module.exports = new Class({
	Extends: Htk.Field
	,Tag: 'htk-search-entry'
	
	,render: function() {
		var div = this.createRoot('div');
		div.className = 'htk-search-entry';
		
		var icon = new Htk.Icon({
			name: 'search',
			alt: _('Search')
		});
		div.appendChild(icon.node);
		
		var input = this.createElement('input');
		input.className = 'entry';
		input.type = 'text';
		input.placeholder = _('Search');
		input.addEventListener('change', this._onChange.bind(this));
		div.appendChild(input);

		this._input = input;
	}

	,_onChange: function() {
		var newValue;
	
		if (this._input.value === '')
			newValue = undefined;
		else
			newValue = this._input.value;

		this.valueChanged(newValue);
	}

	,putValue: function(value) {
		if (!value)
			this._input.value = '';
		else
			this._input.value = value;
	}

	,setEditable: function(editable) {
		this.node.readOnly = !editable;
	}
});