/**
 * Project   : AMDA-NG
 * Name      : PlotStandardForm.js
 * @class   amdaPlotComp.PlotStandardForm
 * @extends Ext.form.Panel
 * @brief   Standard Form used to define some options for a plot element
 * @author  Benjamin Renard
 * @version $Id: PlotStandardForm.js benjamin $
 */

Ext.define('amdaPlotComp.PlotStandardForm', {
	extend: 'Ext.form.Panel',

	requires: [
		'amdaPlotObj.PlotObjectConfig',
		'amdaPlotComp.EraseTrigger',
                'amdaPlotComp.PlotColorPicker'
	],

	//Object associated to this form
	object: null,

	//Link to the tree
	crtTree: null,
	desableTickNumber: true,
	desableTickSpacing: true,

	constructor: function (config) {
		this.init(config);
		this.callParent(arguments);
	},

	setObject: function (object) {
		this.object = object;
		this.loadRecord(this.object);
	},

	//To override to add form components
	getFormItems: function () {
		return [];
	},

	//Function called after element creation by PlotElementPanel
	updateElement: function (onAfterUpdate) {
		if (onAfterUpdate)
			onAfterUpdate();
	},

	//
	addStandardText: function (name, label, onChange) {
		return {
			xtype: 'textfield',
			name: name,
			fieldLabel: label,
			listeners: {
				change: function (field, newValue, oldValue, eOpts) {
					this.object.set(name, newValue);
					if (onChange != null)
						onChange(name, newValue, oldValue);
				},
				scope: this
			}
		};
	},

	addStandardFloat: function (name, label, min, max, allowBlank, onChange) {
		allowBlank = (typeof allowBlank !== 'undefined') ? allowBlank : false;

		return {
			xtype: 'numberfield',
			name: name,
			fieldLabel: label,
			decimalPrecision: 20,
			minValue: min,
			maxValue: max,
			allowBlank: allowBlank,
			listeners: {
				change: function (field, newValue, oldValue, eOpts) {
					this.object.set(name, newValue);
					if (onChange != null)
						onChange(name, newValue, oldValue);
				},
				scope: this
			}
		};
	},
	addStandardInteger: function (name, label, min, max, allowBlank, hidden, onChange) {
		allowBlank = (typeof allowBlank !== 'undefined') ? allowBlank : false;

		return {
			xtype: 'numberfield',
			name: name,
			fieldLabel: label,
			hidden: (hidden) ? true : false,
			regex: /^\d+$/,
			decimalPrecision: 20,
			minValue: min,
			maxValue: max,
			allowBlank: allowBlank,
			listeners: {
				change: function (field, newValue, oldValue, eOpts) {
					this.object.set(name, newValue);
					if (onChange != null)
						onChange(name, newValue, oldValue);
				},
				scope: this
			}
		};
	},

	addStandardFloat2: function (name, label, min, max, allowBlank, hidden, onChange) {
		allowBlank = (typeof allowBlank !== 'undefined') ? allowBlank : false;

		return {
			xtype: 'textfield',
			name: name,
			fieldLabel: label,
			regex: /[-+]?(?:\d*\.?\d+|\d+\.?\d*)(?:[eE][-+]?\d+)?/,
			hidden: (hidden) ? true : false,
			validator: function (val) {
				var errMsg = null;
				if (!allowBlank && Ext.isEmpty(val)) {
					errMsg = 'Blank value not allowed';
				}
				else if ((typeof min !== 'undefined') && (parseFloat(val) < min)) {
					errMsg = 'Min. allowed value is ' + min;
				}
				else if ((typeof max !== 'undefined') && (parseFloat(val) > max)) {
					errMsg = 'Max. allowed value is ' + max;
				}

				return errMsg ? errMsg : true;
			},
			listeners: {
				change: function (field, newValue, oldValue, eOpts) {
					this.object.set(name, newValue);
					if (onChange != null)
						onChange(name, newValue, oldValue);
				},
				scope: this
			}
		};
	},

	addStandardCombo: function (name, label, availableData, onChange) {
		var comboStore = Ext.create('Ext.data.Store', {
			fields: [amdaPlotObj.PlotObjectConfig.fieldComboBox.key, amdaPlotObj.PlotObjectConfig.fieldComboBox.value],
			data: availableData
		});

		return {
			xtype: 'combo',
			name: name,
			fieldLabel: label,
			store: comboStore,
			queryMode: 'local',
			displayField: 'value',
			valueField: 'key',
			editable: false,
			listeners: {
				change: function (combo, newValue, oldValue, eOpts) {
					if (onChange != null)
						onChange(name, newValue, oldValue);
					this.object.set(name, newValue);
				},
				scope: this
			}
		};
	},

	addStandardCheck: function (name, label, onChange, tooltip) {

		return {
			xtype: 'checkbox',
			name: name,
			boxLabel: label,
			listeners: {
				change: function (combo, newValue, oldValue, eOpts) {
					this.object.set(name, newValue);
					if (onChange != null)
						onChange(name, newValue, oldValue);
				},
				render: function (c) {
					if (tooltip) {
						Ext.create('Ext.tip.ToolTip', {
							target: c.getEl(),
							dismissDelay: 0,
							html: tooltip
						});
					}
				},
				scope: this
			}
		};
	},

	addStandardFieldSet: function (title, checkboxName, items, onChangeCheck) {
		return {
			xtype: 'fieldset',
			cls: 'child-fieldset',
			title: title,
			collapsible: true,
			collapsed: true,
			checkboxName: checkboxName,
			checkboxToggle: checkboxName != '',
			layout: {
				type: 'vbox',
				pack: 'start',
				align: 'stretch'
			},
			items: items,
			listeners: {
				expand: function (fieldset, eOpts) {
					if (checkboxName != '') {
						this.object.set(checkboxName, true);
						if (onChangeCheck != null)
							onChangeCheck(checkboxName, true, false);
					}
				},
				collapse: function (fieldset, eOpts) {
					if (checkboxName != '') {
						this.object.set(checkboxName, false);
						if (onChangeCheck != null)
							onChangeCheck(checkboxName, false, true);
					}
				},
				scope: this
			}
		};
	},

	addStandardFont: function (namePrefix) {
		var fontItems = [
			this.addStandardCombo(namePrefix + '-name', 'Name', amdaPlotObj.PlotObjectConfig.availableFontNames),
			{
				xtype: 'toolbar',
				bodyStyle: { background: '#dfe8f6' },
				border: false,
				items: [
					{
						xtype: 'numberfield',
						name: namePrefix + '-size',
						fieldLabel: 'Size',
						labelWidth: 60,
						width: 150,
						maxValue: 32,
						minValue: 6,
						value: 12,
						listeners: {
							change: function (field, newValue, oldValue, eOpts) {
								this.object.set(namePrefix + '-size', newValue);
							},
							scope: this
						}
					},
					' ',
					{
						xtype: 'checkbox',
						name: namePrefix + '-bold',
						boxLabel: '<b>B</b>',
						width: 30,
						listeners: {
							change: function (combo, newValue, oldValue, eOpts) {
								this.object.set(namePrefix + '-bold', newValue);
							},
							scope: this
						}
					},
					{
						xtype: 'checkbox',
						name: namePrefix + '-italic',
						boxLabel: '<i>I</i>',
						width: 30,
						listeners: {
							change: function (combo, newValue, oldValue, eOpts) {
								this.object.set(namePrefix + '-italic', newValue);
							},
							scope: this
						}
					}
				]
			}
		];

		return this.addStandardFieldSet('Font', namePrefix + '-activated', fontItems);
	},

	addStandardColor: function (name, label, availableData, onChange) {
		var comboStore = Ext.create('Ext.data.Store', {
			fields: ['color', 'value'],
			data: availableData
		});

		return {
			xtype: 'combo',
			name: name,
			fieldLabel: label,
			store: comboStore,
			queryMode: 'local',
			displayField: 'value',
			valueField: 'color',
			editable: false,
			tpl: Ext.create('Ext.XTemplate',
				'<ul class="x-list-plain"><tpl for=".">',
				'<li role="option" class="x-boundlist-item" style="color: {color};">{value}</li>',
				'</tpl></ul>'
			),
			// template for the content inside text field
			displayTpl: Ext.create('Ext.XTemplate',
				'<tpl for=".">',
				'{value}',
				'</tpl>'
			),


			listeners: {
				change: function (combo, newValue, oldValue, eOpts) {
					this.object.set(name, newValue);
					if (onChange != null)
						onChange(name, newValue, oldValue);
				},
				scope: this
			}
		};
	},

	addStandardParamDropTarget: function (name, label, onChange) {
		return {
			xtype: 'erasetrigger',
			name: name,
			fieldLabel: label,
			emptyText: 'Drop a parameter',
			listeners: {
				change: function (field, newValue, oldValue, eOpts) {
					this.object.set(name, newValue);
					if (onChange != null)
						onChange(name, newValue, oldValue);
				},
				afterrender: function (field, eOpts) {
					var paramTarget = new Ext.dd.DropTarget(field.el.dom,
						{
							ddGroup: 'explorerTree',
							notifyEnter: function (ddSource, e, data) {
							},
							notifyDrop: function (ddSource, e, data) {
								var selectedRecord = ddSource.dragData.records[0];
								switch (selectedRecord.$className) {
									case 'amdaModel.LocalParamNode':
									case 'amdaModel.RemoteParamNode':
									case 'amdaModel.RemoteSimuParamNode':
										if (!selectedRecord.get('isParameter') || selectedRecord.get('disable'))
											return false;
										if (selectedRecord.get('alias') != "")
											field.setValue("#" + selectedRecord.get('alias'));
										else
											field.setValue(selectedRecord.get('id'));
										return true;
									case 'amdaModel.AliasNode':
										if (!selectedRecord.isLeaf())
											return false;
										field.setValue("#" + selectedRecord.get('text'));
										return true;
									case 'amdaModel.DerivedParamNode':
									case 'amdaModel.DerivedParamComponentNode':
										if (!selectedRecord.isLeaf())
											return false;
										field.setValue("ws_" + selectedRecord.get('text'));
										return true;
									case 'amdaModel.MyDataParamNode':
										if (!selectedRecord.isLeaf())
											return false;
										field.setValue("wsd_" + selectedRecord.get('text'));
										return true;
									default:
										return false;
								}
								return true;
							}
						}
					);
				},
				scope: this
			}
		};
	},

	addStandardDate: function (name, label, onChange) {
		return {
			xtype: 'datefield',
			name: name,
			format: 'Y/m/d H:i:s',
			enforceMaxLength: true,
			maxLength: 19,
			fieldLabel: label,
			listeners: {
				change: function (field, newValue, oldValue, eOpts) {
					this.object.set(name, newValue);
					if (onChange != null)
						onChange(name, newValue, oldValue);
				},
				scope: this
			}
		};
	},

	addStandardLineItems: function (namePrefix) {
		return [
			this.addStandardCombo(namePrefix + '-style', 'Style', amdaPlotObj.PlotObjectConfig.availableLinesStyles),
			this.addStandardFloat(namePrefix + '-width', 'Width', 1, 10),
                        this.addColorsPicker(namePrefix + '-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColorsNew, 'auto')
		];
	},

	addStandardSymbolsItems: function (namePrefix) {
		return [
			this.addStandardCombo(namePrefix + '-type', 'Type', amdaPlotObj.PlotObjectConfig.availableSymbolsTypes),
			this.addStandardFloat(namePrefix + '-size', 'Size', 1, 10),
			this.addColorsPicker(namePrefix + '-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColorsNew, 'auto')
		];
	},
        
	addColorsPicker: function (name, label, availableColors, mode) {
		if (!mode) {
			mode = 'standard';
		}
		var me =this;
		return new amdaPlotComp.PlotColorPicker({name: name, label: label, mode: mode, colors: availableColors, onChange: function(name, newValue, oldValue) {
			me.object.set(name, newValue);
		}});
	},

	init: function (config) {
		var me = this;

		var myConf = {
			bodyPadding: 5,
			bodyStyle: { background: '#dfe8f6' },
			border: false,
			layout: {
				type: 'vbox',
				pack: 'start',
				align: 'stretch'
			},
			items: this.getFormItems()
		};

		Ext.apply(this, Ext.apply(arguments, myConf));
	}
});