
Ext.define('Ext.ux.form.field.snaponicon.Combo', {

	requires: [
		'Ext.form.field.ComboBox',
		'Ext.ux.data.store.SnapOnIcon'
	],

	extend: 'Ext.form.field.ComboBox',
	
	alias: [
		'widget.snaponiconcombo',
		'widget.snaponiconcombobox'
	],

	emptyText: ip2.I18N['searchCriteria'],
	
	valueField: 'icon',

	displayField: 'icon',

	typeAhead: true,

	hideTrigger: false,

	triggerAction: 'query',

	queryParam: 'keyword',

	trigger1Cls: 'ip2-love-trigger-search',
	
	trigger2Cls: 'ip2-love-trigger-clear',

	_PADDINGLEFT: null,

	_KEYWORD: null,

	listeners: {
		'change': {
			fn: function(self, newValue, oldValue) {
				
				if (!newValue && oldValue == '') {
					self.clearInputIcon();
					self._KEYWORD = null;
				}
				else {
					if (newValue && newValue.match(oldValue)) {
						self._KEYWORD = newValue;
					}
				}
			}
		},
		'select': {
			fn: function(self, records) {
				if (records && records.length)
					self.setInputIcon(records[0].data.icon);
			}
		}
	},

	initComponent: function() {

		var combo = this;

		combo.store = Ext.create('Ext.ux.ip2.data.store.SnapOnIcon');

		combo.displayTpl = (function() {
			return new Ext.XTemplate('<tpl for=".">{[this.formatName(values.icon)]}</tpl>', {
				formatName: function(icon) {
					
					var name,
						isPath = icon.match('/');

					if (isPath) {
						name = icon.split('/');
						icon = name[name.length - 1];
					}

					return icon;
				}
			});
		})();

		combo.listConfig = {
			minWidth: 300,
			itemTpl: (function() {
				return new Ext.XTemplate('<tpl for=".">' +
						'<div style="font-size: 11px;">' +
							'<img src="{icon}" style="position: relative; top: 1px;" />' +
							'<span style="margin-left: 5px; position: relative; top: -3px;">{[this.formatName(values.icon)]}</span>' +
							'<span style="margin-left: 5px; position: relative; top: 1px; float: right; font-size: 9px; background: grey; padding: 2px 5px 3px 5px; color: white; border-radius: 3px;">score: {[this.formatScore(values.score)]}</span>' +
						'</div>' +
					'</tpl>', {
					formatName: function(icon) {
						
						var name;

						name = icon.split('/');

						return name[name.length - 1];
					},
					formatScore: function(score) {
						
						score = +(score);

						var color = 'red';

						if (score < 100 && score > 66) {
							color = 'lightgreen';
						}
						else if (score <= 66 && score > 33) {
							color = 'yellow';
						}
						else if (score > 100) {
							color = 'purple';
						}

						return '<span style="color: ' + color + '">' + score + '</span>';
					}
				});
			})()
		};

		combo.callParent();

		return combo;
	},

	clearInputIcon: function() {

		var combo = this,
			inputEl = combo.inputEl;

		// TODO: Check for error state to not be intrusive!

		if (inputEl && inputEl.dom) {

			inputEl.setStyle({
				'padding-left': combo._PADDINGLEFT,
				'background-image': 'none'
			});
		}
	},

	onTrigger1Click: function() {

		var combo = this,
			keyword = combo._KEYWORD,
			keywordValue,
			fieldValue = combo.getValue();

		if (!keywordValue && !fieldValue)
			return combo;
		
		if (!combo.readOnly && !combo.disabled) {
			
			combo.onFocus({});
			
			if (combo.triggerAction === 'all') {
			
				keywordValue = !keyword ? combo.allQuery : keyword;

				combo.doQuery(keywordValue, true);
			}
			else {

				keywordValue = !keyword ? combo.getRawValue() : keyword;
			
				combo.doQuery(keywordValue, true, true);
			}

			combo.inputEl.focus();
		}

		return combo;
	},

	onTrigger2Click: function() {
		
		this.clearValue();

		this.clearInputIcon();

		this._KEYWORD = null;
		
		return this;
	},

	setInputIcon: function(icon) {

		var combo = this,
			inputEl = combo.inputEl;

		// TODO: Check for error state to not be intrusive!

		if (inputEl && inputEl.dom) {

			// Set the fallback padding-left value on first run
			if (!combo._PADDINGLEFT)
				combo._PADDINGLEFT = inputEl.getStyle('paddingLeft');

			// Check icon is an array for multiselect
			if (Ext.isArray(icon))
				icon = icon[0];

			// Make sure we have a string of some length
			if (Ext.isString(icon) && icon.length) {

				inputEl.setStyle({
					'padding-left': parseInt(combo._PADDINGLEFT) + 20 + 'px',
					'background-image': 'url(' + icon + ')',
					'background-repeat': 'no-repeat',
					'background-position': combo._PADDINGLEFT + ' center'
				});
			}
		}

		return combo;
	}
});
