/**
 * Project       AMDA-NG
 * Name          CatalogUI.js
 * @class 	 amdaUI.catalogUI
 * @extends      Ext.container.Container
 * @brief	 Catalog Module UI definition (View)
 * @author 	 elena
 */

Ext.define('amdaUI.CatalogUI', {
	extend: 'Ext.container.Container',
	alias: 'widget.panelCatalog',
	
	requires : [	
//	  'amdaModel.Function'
	],
	
	statics : {	 
//	  functionStore : null
	},
		
	constructor: function(config) {
	        this.init(config); 
		this.callParent(arguments);
	//	if (this.object) this.loadObject();
	},
	
	addParam : function(ParamName,isLeaf) 
        {                        	 
	    var r = Ext.create('amdaModel.AmdaObject', { name: ParamName });
	    this.paramGrid.getStore().add(r);
	    this.paramGrid.getSelectionModel().select(this.paramGrid.getStore().getCount()-1);  
        },
	
	addTT : function(TTname,TTid)
	{ 
	    Ext.define('tempObject', {
	      extend: 'Ext.data.Model',
	      fields: [
		  {name: 'name',  type: 'string'},
		  {name: 'hidden_id',   type: 'string'}
	      ]});
	    var r = Ext.create('tempObject', { name:TTname, hidden_id : TTid });
	    this.ttGrid.getStore().add(r);
	    this.ttGrid.getSelectionModel().select(this.paramGrid.getStore().getCount()-1); 
	 
	},
	 
	generateCatalog : function(){	     
	  var module = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.catalog.id);
	  if (module) 
		module.linkedNode.execute();	     
	},
	
	/**
	 * update this.object from form
	 */
	
	updateObject : function(){    
	    // get the basic form of the left 
	    var basicForm = this.formPanel.items.items[0].getForm();
	   
	    var formValues = basicForm.getValues();
	    this.object.set('name',formValues.name);
	    this.object.set('description',formValues.description);
	    
	    var recs = this.paramGrid.getStore().getNewRecords();
	    var paramArr = new Array();
	    Ext.Array.each(recs, function(rec, index,allItems){
	      var obj =  new Object();
	      obj.param = rec.get('name');
	      obj.function = rec.get('function');
              paramArr.push(obj);            	      
	    });
	    this.object.set('parameter', paramArr);
	    
	    // hidden_id - if real 'id' - getNewRecords (and other getRecords) methods doesn't work
	    var tts = this.ttGrid.getStore().getNewRecords();
	    var ttArr = new Array();
	    Ext.Array.each(tts, function(rec, index, allItems){	 
	      var obj =  new Object();
	      obj.id = rec.get('hidden_id');
              ttArr.push(obj);            	      
	    });
	    this.object.set('timetable', ttArr);
	    
	    var updateStatus = true;
	    
	    return updateStatus;	    
	},
	
	init : function (config) {
	  
// 	  var functions = Ext.create('Ext.data.Store', {
// 	    fields: ['id', 'name'],
// 	    data : [
// 		{"id":"min", "name":"MIN"},
// 		{"id":"max", "name":"MAX"},
// 		{"id":"mean","name":"MEAN"}        
// 	    ]
// 	    });
	     
	  this.fieldName = new Ext.form.field.Text({
	      fieldLabel: 'Name*',
	      allowBlank : false,
	      stripCharsRe: /(^\s+|\s+$)/g,
	      emptyText: 'Please no spaces!',
	      name: 'name',
	      anchor: '100%',
	      validateOnChange: false,
	      validateOnBlur: false,
	      validFlag: false,
		  validator : function() {
		      return this.validFlag;
		  }
	  });
	  
	  var ttStore = Ext.create('Ext.data.Store', 
	    {
		fields: [ 'name', 'hidden_id']	
	    });
	  
         this.ttGrid = Ext.create('Ext.grid.Panel', { 
	    title: 'Select Time Table',  
	    height: 100,
	    store : ttStore,
	    columns: [
	      { xtype: 'rownumberer' },             
	      { header: "Time Table Name", dataIndex: 'name', flex:1, sortable : false, menuDisabled: true },
	      { menuDisabled: true,  width: 30, renderer: function()
		  {
		      return '<div class="icon-remover" style="width: 15px; height: 15px;"></div>';
		  }
	      }
	    ],
	    listeners : {
                    render : function(o,op) {
                    var me = this;
                    var el = me.getEl();
                    var dropTarget = Ext.create('Ext.dd.DropTarget', el, {
                        ddGroup: 'explorerTree',
                        notifyOver  : function(ddSource, e, data)
                        {
                                if ((data.records[0].get('nodeType') == 'timeTable' || data.records[0].get('nodeType') == 'sharedtimeTable') && (data.records[0].get('leaf')))
                                {
                                    this.valid = true;
                                    return this.dropAllowed;
                                }
                                this.valid = false;
                                return this.dropNotAllowed;
                        },
                        notifyDrop  : function(ddSource, e, data) 
                        {
                                if (!this.valid) return false;
						
				var module = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.catalog.id);
				if (module)
				{				    
				  module.getUiContent().addTT(data.records[0].get('text'),data.records[0].get('id'));					    
				} 
			    return true;
			  }
                        });
                        },
			
		      cellclick : function(grid, cell, cellIndex, record){
			    if (cellIndex == 2) 
				  grid.getStore().remove(record);
		      }
	    }
          });
	
	var store = Ext.create('Ext.data.Store', 
        {
            fields: ['name', 'function'] 
        });
	
	this.paramGrid = Ext.create('Ext.grid.Panel', { 
	      title: 'Select Parameter & Apply Function',
	      selType : 'rowmodel',
	      height: 200,
	      store : store, 
	      columns: [
	        { xtype: 'rownumberer' },
		{ header: 'parameter',  dataIndex: 'name', menuDisabled : true, sortable : false },
		{ header: 'function',  dataIndex: 'function', menuDisabled : true, sortable : false,
		  editor: {
		    xtype: 'combo', queryMode : 'local',		    
//		    emptyText : 'please click to select function',
		    store: [ 'min', 'max', 'mean' ],
		    triggerAction: 'all',  		         
//		    lazyInit: false,
		    listeners: {
			focus: function(obj) {
			    obj.expand();
			}
		    }
		  },
		  renderer: function(v)
		      {
			  if(v != null && v.length > 0 )
			      return v;
			  else
			      return 'click to select';                    
		      } 	  
		},
		{ menuDisabled : true, width: 30, renderer: function(){
			return '<div class="icon-remover" style="width: 15px; height: 15px;"></div>';
		    }
		}
	      ], 
	      plugins: [
		Ext.create('Ext.grid.plugin.CellEditing', {
		    clicksToEdit: 1
		})
	      ],
	    listeners :
	      {
		render : function(o,op)
		{
		  var me = this;
		  var el = me.body.dom;
		  var dropTarget = Ext.create('Ext.dd.DropTarget', el, {
		      ddGroup: 'explorerTree',		    
		      notifyOver  : function(ddSource, e, data)
		      {                                    
			  if (data.records[0].data.nodeType == 'localParam' && data.records[0].get('notyet')) {
			      this.valid = false;
			      return this.dropNotAllowed;   
			  }	
			  if (((data.records[0].data.nodeType == 'localParam')   ||
				      (data.records[0].data.nodeType == 'remoteParam') || 
				      (data.records[0].data.nodeType == 'remoteSimuParam') ||
				      (data.records[0].data.nodeType == 'derivedParam') || 
				      (data.records[0].data.nodeType == 'myDataParam') ||
				      (data.records[0].data.nodeType == 'alias'))&&
				      (data.records[0].isLeaf() || data.records[0].data.isParameter) &&
				      !data.records[0].data.disable)
			  {
			      this.valid = true;
			      return this.dropAllowed;
			  }
			  
			  this.valid = false;
			  return this.dropNotAllowed;
		      },
		      notifyDrop  : function(ddSource, e, data)
		      {
			if (!this.valid)
			  return false;
			  var nameToSent;
			  switch (data.records[0].data.nodeType)
			  {
			      case 'localParam' :
			      case 'remoteParam':
			      case 'remoteSimuParam':                                           
				  nameToSent = data.records[0].get('id');
				  if (data.records[0].get('alias')!= "" )
				  var nameToSent = "#"+data.records[0].get('alias');
				  break;
			      case 'alias' :
				  nameToSent = "#"+data.records[0].get('text');
				  break;
			      case 'derivedParam' :
				  nameToSent = "ws_"+data.records[0].get('text');
				  break;
			      case 'myDataParam' :
				  nameToSent = "wsd_"+data.records[0].get('text');
				  break;
			      default :
				  return false;
			  }
		 	  var module = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.catalog.id);
			  if (module)
			  {
			      if (data.records[0].get('needsArgs') && !data.records[0].get('isSpectra')) { 				    
				      module.getUiContent().fireEvent('openParamEditor',nameToSent);
			      }
			      else {
				      module.addParam(nameToSent,true);	
			      }
			  }
			return true;
		      }
		  });
		},	
		cellclick : function(grid, cell, cellIndex, record){		     
		      if (cellIndex == 3) 
			    grid.getStore().remove(record);
		}
	      }    
	}); 
       
	this.catalogGrid =  Ext.create('Ext.grid.Panel', { 
	      title: 'Catalog', 
	      height: 500,
	      columns: [
		{ text: '',  dataIndex: '' }
	    
	  ]
	});
 
	  this.formPanel =  Ext.create('Ext.form.Panel', { 
	      height: 550,
	      width: 800,
	      layout:  'border',
	      defaults: { layout: 'fit', border: false },
	      fieldDefaults: { labelWidth: 80, labelAlign : 'top' },
	      items: [ 
		{            
		    xtype: 'form',
		    region: 'center',           
		    flex: 1,
		    buttonAlign: 'left',
		    bodyStyle: {background : '#dfe8f6'},
		    padding: '5 5 5 5',
		    layout: {type: 'vbox', pack: 'start', align: 'stretch'},
		    items : [
		      this.fieldName,
		    {
		      xtype: 'fieldcontainer',
		      layout: 'hbox',		      
		      items: [
			  {
			      xtype:'datefield', fieldLabel:'Creation date',
			      name: 'created', disabled: true, 
			      hideTrigger: true, format: 'Y/m/d H:i:s'
			  },			  
			  { xtype: 'splitter' },			 			 
			  { xtype:'textfield', fieldLabel: 'Intervals', name: 'nbIntervals', disabled: true}
		      ]                                                                       
		  },
		  {
		      xtype: 'textarea',
		      name: 'description',
		      fieldLabel: 'Description',
//		      anchor: '100% 50%'
		  },		  		    
		   
		      this.paramGrid,
		      this.ttGrid
		    ],
		    fbar:[
			{   
			    type: 'button',
			    text: 'Generate Catalog',
			    scope : this,
			    handler: function(button){
                            // update object with user's values
                            // if the return is true (object had been updated)
                         //   if(this.updateObject()){ 
			        this.updateObject();
                                this.generateCatalog();			   			 
                        //    }
                        }
			},
			{   
			    type: 'button',
			    text: 'Reset' 
			} 
		      ]
		}, {
		    xtype: 'form',
		    region: 'east',            
		    bodyStyle: {background : '#dfe8f6'},
		    padding: '5 5 5 5',
		    flex: 2,
		    items : [
		      this.catalogGrid
		    ],
		    fbar:[
			{   
			    type: 'button',
			    text: 'Save' 
			},{   
			    type: 'button',
			    text: 'Share',
			    disabled: true 
			},
			{   
			    type: 'button',
			    text: 'Visualize' 
			} 
		      ]
		}
	    ]  
	  }); 
	 
	 
	
	var myConf = {
		    layout: 'border',
		    items: [		   
			  this.formPanel, 		     
			  {
			    xtype: 'panel', 
			    region: 'south',
			    title: 'Information',
			    collapsible: true,
			    height: 100,
			    autoHide: false,
			    bodyStyle: 'padding:5px',
			    iconCls: 'icon-information',
			      loader: {
				autoLoad: true,
				url: helpDir+'downloadHOWTO'
			      } 
			  }
		    ] 
	      };
	    
	    Ext.apply (this, Ext.apply(arguments, myConf));	
    }
	 
});