/**
 * 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, collapsed_ = true) {

		return {

			xtype: 'fieldset',
			cls: 'child-fieldset',
			title: title,
			collapsible: true,

			collapsed: collapsed_,

			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':
										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.addStandardColor(namePrefix + '-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColors), 

                                                            this.addColorsPicker('serie-lines-color', 'Color')

		];
	},

	addStandardSymbolsItems: function (namePrefix) {

		return [

			this.addStandardCombo(namePrefix + '-type', 'Type', amdaPlotObj.PlotObjectConfig.availableSymbolsTypes),
			this.addStandardFloat(namePrefix + '-size', 'Size', 1, 10),
			this.addStandardColor(namePrefix + '-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColors)
		];

	},

                     manageRGBcolors: function(namePrefix){
                         var rgb = this.object.get(namePrefix+'-rgb'); 

                         if(rgb && rgb.length == 3){
                             var hexColor = this.rgbToHex(rgb);
                             this.object.set(namePrefix, hexColor);
                             this.getForm().findField(namePrefix+'-displayer').setValue(hexColor);
                         }

                     },
                     manageHEXcolors: function(namePrefix){
                         var hex = this.object.get(namePrefix);

                         if(hex){

                              this.object.set(namePrefix+'-rgb', hexToRgb(hex));

                          }

                     },
                     rgbToHex : function(rgb) {
                                return "#" + ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2] ).toString(16).slice(1).toUpperCase();
                    },
                      hexToRgb: function(hex) {
                          var arrBuff = new ArrayBuffer(4);
                          var vw = new DataView(arrBuff);
                          vw.setUint32(0,parseInt(hex, 16),false);

                          var arrByte = (new Uint8Array(arrBuff));

                          return arrByte.slice(1,4);

                        },

        
        /**
         * 
         * @param {type} namePrefix name of the variable in the opbject exp : 'serie-lines-color'
         * @param {type} name name of the field exp : Color 
         * @returns {PlotStandardFormAnonym$0.addStandardFieldSet.PlotStandardFormAnonym$10}
         */
                    addColorsPicker: function (namePrefix, name) {
                                                                  var me = this;

                        
                                        var colorPicker =  Ext.create('amdaPlotComp.PlotColorPicker', {

                                                value: '000000',  // initial selected color

                                                renderTo: Ext.getBody(),
                                                listeners: {
                                                    select: function(picker, selColor) {
                                                        this.object.set(namePrefix, selColor);

                                                        this.getForm().findField(namePrefix+'-displayer').setValue('#'+selColor);
                                                  
                                                        rgb = this.hexToRgb(selColor);
                                                         if(rgb && rgb.length ==3 ){
                                                             this.getForm().findField(namePrefix+'-R').setValue(rgb[0]);
                                                             this.getForm().findField(namePrefix+'-G').setValue(rgb[1]);
                                                             this.getForm().findField(namePrefix+'-B').setValue(rgb[2]);
                                                         }

                                                    },
                                                    scope: this
                                                }
                                            });

                                        var colorDisplayer = {
                                                                                    xtype: 'displayfield',
                                                                                    name: namePrefix + '-displayer',
                                                                                    border:2,
                                                                                    fieldLabel: 'HEX:',
                                                                                    value:"#000000",
                                                                                    region:'center',
                                                                                    style: {
                                                                                        borderStyle: 'solid',
                                                                                        background: '#000000',
                                                                                    },
                                                                                    listeners: {
                                                                                        change: function (field, newValue, oldValue, eOpts) {
                                                                                           field.getEl().applyStyles({'background':newValue});
                                                                                        },
                                                                                        scope: this 
                                                                                    }
                                                                                };
		var rgbItems = 

                                                                                {
				xtype: 'toolbar',
				bodyStyle: { background: '#dfe8f6' },
				border: false,

                                                                                name:namePrefix+'-rgb',

				items: [
                                                                                                  
					{
						xtype: 'numberfield',

						name: namePrefix+'-R',

						fieldLabel: 'R',

						labelWidth: 12,
						width: 65,

						maxValue: 255,
						minValue: 0,
						value: 0,
						listeners: {
							change: function (field, newValue, oldValue, eOpts) {
                                                                                                                                                                var rgb = this.object.get(namePrefix+"-rgb");
                                                                                                                                                                if(rgb && rgb.length ==3 )
                                                                                                                                                                    rgb[0] = newValue;
                                                                                                                                                                else
                                                                                                                                                                    rgb = [newValue,0,0];
								this.object.set(namePrefix+"-rgb", rgb)
                                                                                                                                                                this.manageRGBcolors(namePrefix);
							},
							scope: this
						}
					},
					' ',
                                                                                                     {
						xtype: 'numberfield',

						name: namePrefix+'-G',

						fieldLabel: 'G',

						labelWidth: 12,
						width: 65,

						maxValue: 255,
						minValue: 0,
						value: 0,
						listeners: {
							change: function (field, newValue, oldValue, eOpts) {
								var rgb = this.object.get(namePrefix+"-rgb");
                                                                                                                                                                if(rgb && rgb.length ==3 )
                                                                                                                                                                    rgb[1] = newValue;
                                                                                                                                                                else
                                                                                                                                                                    rgb = [0, newValue, 0];
								this.object.set(namePrefix+"-rgb", rgb);
                                                                                                                                                                this.manageRGBcolors(namePrefix);
							},
							scope: this
						}
					},
                                                                                                    ' ',
                                                                                                    {
						xtype: 'numberfield',

						name: namePrefix+'-B',

						fieldLabel: 'B',

						labelWidth: 12,
						width: 65,

						maxValue: 255,
						minValue: 0,
						value: 0,
						listeners: {
							change: function (field, newValue, oldValue, eOpts) {
								var rgb = this.object.get(namePrefix+"-rgb");
                                                                                                                                                                if(rgb && rgb.length ==3 )
                                                                                                                                                                    rgb[2] = newValue;
                                                                                                                                                                else
                                                                                                                                                                    rgb = [0,0,newValue];
								this.object.set(namePrefix+"-rgb", rgb);
                                                                                                                                                                this.manageRGBcolors(namePrefix);
							},
							scope: this
						}
					},
					
				]
			}

		
                                        var items = [ this.addStandardCheck(namePrefix + '-auto','Auto', function(name, value, oldValue){
                                                                       me.getForm( ).findField(namePrefix + '-activated').setValue(!value);
                                                                       me.object.set(namePrefix,me.object.getDefaultColor(namePrefix));
                                                                    }),
           
                                              this.addStandardFieldSet('Select Color', namePrefix + '-activated',[colorPicker,colorDisplayer, rgbItems], function(name, value, oldValue){
                                                                        me.getForm( ).findField(namePrefix + '-auto').setValue(!value);                                                
                                                                    }),
                                        ];
		          
                                        return this.addStandardFieldSet(name,'', items, null, false);

	},

	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));

	}

});