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

Ext.define('amdaUI.VisuUI', {
	extend: 'Ext.container.Container',
	alias: 'widget.panelVisu',

  requires: [
    'amdaUI.CatalogVisuScatter',
    'amdaUI.CatalogVisuHistogram'
  ],

  visuTabContents: [],

  parametersStore: null,
  catalogStore: null,

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

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

	updateObject : function () {
		 return true;
	},

	reformObject : function () {
		this.fromPlugin = this.object.get('fromPlugin');

		if (this.fromPlugin) {
			if (this.object.get('folderId') == '')
				this.object.set('id','cacheCat');
			else
				this.object.set('id',this.object.get('folderId'));

			this.object.set('objName',this.object.get('objName'));
		}
		else {
			this.object.set('id',this.object.get('id'));
			this.object.set('name',this.object.get('name'));
		}
		// load object into view
		if (this.object.get('id') != '')
				this.loadObject();
	},

	reset : function() {
		//reset all fieldsets except the first one (name, intervals)
		var form = this.items.items[0].items.items[0];
		for (var i = 1;  i < 4; i++) {
			var fieldset = form.items.items[i];
			Ext.each(fieldset.query('field'), function(field) {
				field.reset();
			});
		}
		this.resetChart();
	},

	/**
	 * load object catalog into this view
	 */
	loadObject : function()
	{
		var me = this;

    this.parametersStore.removeAll();
    Ext.Array.each(this.object.get('parameters'), function(param) {
      for (index = 0; index < param.size; ++index) {
        me.parametersStore.add({'id': param.id + (param.size > 1 ? '_COMPONENT_'+index : ''), 'paramId': param.id, 'name' : param.name, 'index': index, 'size': param.size, 'type': param.type});
      }
    });

    Ext.Array.each(this.visuTabContents, function(content) {
      content.initVisu();
    });

		var onAfterInit = function(result, e)
		{
      if (!result) {
				myDesktopApp.errorMsg(e.message);
				Ext.defer(function(){Ext.Msg.toFront()},10);

				return;
			}
			else if (!result.success)
			{
				if (result.message)
					myDesktopApp.errorMsg(result.message);
				else
					myDesktopApp.errorMsg('Unknown error during catalog cache initialisation');

				Ext.defer(function(){Ext.Msg.toFront()},10);

				return;
			}

      var dateConvert = function (value, rec) {
          if (!Ext.isDate(value)) {
              var valueString = new String(value);
              return new Date(valueString.replace(/\-/g, '\/').replace(/[T|Z]/g, ' '));
          }
          return value;
      };

      var fieldsConfig = [];
      fieldsConfig.push({type: 'date', id: 'start', name : 'start',   convert: dateConvert});
      fieldsConfig.push({type: 'date', id: 'stop', name : 'stop',  convert: dateConvert});
      me.parametersStore.each(function (param) {
        switch (param.get('type')) {
          case 0: //double
            fieldsConfig.push({
              type: 'float',
              id: param.get('id'),
              name: param.get('id')
            });
            break;
          case 1: //dateTime
            fieldsConfig.push({
              type: 'date',
              id: param.get('id'),
              name : param.get('id'),
              convert: dateConvert
            });
            break;
          case 2: //string
            break;
          case 3: //int
            fieldsConfig.push({
              type: 'int',
              id: param.get('id'),
              name: param.get('id')
            });
            break;
        }
      });

      me.catalogStore = Ext.create('Ext.data.Store', {
        fields : fieldsConfig
      });
      me.catalogStore.loadData(result.intervals);
		}

    var opt = {
      'typeTT' : 'catalog', 'id' : this.object.get('id'),
						         'name' : this.object.get('objName')
    };
		AmdaAction.readIntervalsForChart(opt, onAfterInit);
    this.formPanel.getForm().loadRecord(this.object);
	},


	/**
	 * Check if changes were made before closing window
	 * @return true if changes
	 */
	fclose : function()
	{
		return false;
	},

	resetChart : function () {

		var emptyAxesConfig =   [{
			type: 'Numeric',
			position: 'bottom',
			fields: [],
			title: 'X axis',
			grid : true
		}, {
			type: 'Numeric',
			position: 'left',
			fields: [],
			title: 'Y axis',
			grid: true
		}];

		this.chartConfig.series[0].xField = '';
		this.chartConfig.series[0].yField = '';

		this.chartConfig.theme = 'Blue';

		this.chartConfig.axes = emptyAxesConfig;

		var chart =  Ext.create('Ext.chart.Chart', this.chartConfig);
		this.replaceChart(chart);

	},

	plotChart : function () {

		/*this.chartConfig.store = this.chartStore;

		var xTitle = this.items.items[0].items.items[0].items.items[1].items.items[2].getValue();
		var yTitle = this.items.items[0].items.items[0].items.items[2].items.items[2].getValue();

		if (xTitle) this.chartConfig.axes[0].title = xTitle;
		if (xTitle) this.chartConfig.axes[1].title = yTitle;

		// axis modifs
		if (this.comboXrange.getValue() == 'manual') {
			var minX = this.comboXrange.next().next().getValue();
			var maxX = this.comboXrange.next().next().next().next().getValue();
			this.chartConfig.axes[0].minimum = minX;
			this.chartConfig.axes[0].maximum = maxX ;
		} else {
			// unset min/max in config
			delete this.chartConfig.axes[0].minimum;
			delete this.chartConfig.axes[0].maximum;
		}
		if (this.comboYrange.getValue() == 'manual') {
			var minX = this.comboYrange.next().next().getValue();
			var maxX = this.comboYrange.next().next().next().next().getValue();
		//	if (minX && maxX) {
			this.chartConfig.axes[1].minimum = minX;
			this.chartConfig.axes[1].maximum = maxX;
		//	}
		} else {
			// unset min/max in config
			delete this.chartConfig.axes[1].minimum;
			delete this.chartConfig.axes[1].maximum;
		}

		var chart =  Ext.create('Ext.chart.Chart', this.chartConfig);

		this.replaceChart(chart);*/
    var chart = Ext.getCmp('visu-chart');
    var tabPanel = Ext.getCmp('visu-tabpanel');

    var chartPanel = chart.up();
    chartPanel.remove(chart);
    console.log(this.catalogStore);
    chartPanel.insert(tabPanel.activeTab.items.items[0].getChart(this.catalogStore));
	},

	replaceChart: function(chart) {
		var chartPanel =  this.items.items[0].items.items[1];
		var oldChart = chartPanel.down('chart');
		oldIndex = chartPanel.items.indexOf(oldChart);
		chartPanel.remove(oldChart);
		chartPanel.insert(oldIndex, chart);
	},

  initChartTypes: function() {
    var me = this;

    var tabPanel = Ext.getCmp('visu-tabpanel');
    if (!tabPanel)
      return;

    var chartTypes = [
      {
        title: 'Scatter',
        widget: 'widget.panelCatalogVisuScatter'
      },
      {
        title: 'Histogram',
        widget: 'widget.panelCatalogVisuHistogram'
      }
    ];

    var isFirst = true;
    Ext.Array.each(chartTypes, function(chartType) {
      var tabContent = Ext.create(chartType.widget, {parametersStore : me.parametersStore});
      var tab = tabPanel.add({
        title: chartType.title,
        items: [
          tabContent
        ],
        layout: 'fit'
      });
      me.visuTabContents.push(tabContent);
      if (isFirst) {
        tabPanel.setActiveTab(tab);
        isFirst = false;
      }
    });
  },

	init : function (config)
	{
    this.catalogStore = Ext.create('Ext.data.Store', {
      fields: []
    });

    this.parametersStore =  Ext.create('Ext.data.Store', {
			fields: [
        {name: 'id', type: 'string'},
				{name: 'paramId', type: 'string'},
				{name: 'name',  type: 'string'},
				{name: 'index',  type: 'int'},
				{name: 'size', type: 'int'},
        {name: 'type', type: 'int'}
			],
			data: []
		});

		this.formPanel = Ext.create('Ext.form.Panel', {
      region: 'center',
			layout:  'border',
			bodyStyle: {background : '#dfe8f6'},
			defaults: { border : false, align: 'stretch',  padding: '3'},
			items: [
        {
          xtype : 'fieldset',
          region: 'north',
  				items : [
            {
              xtype: 'fieldcontainer',
              layout: 'hbox',
              fieldDefaults: { labelWidth: 80, labelAlign : 'right' },
              items: [
                { xtype:'textfield', fieldLabel: 'Catalog Name', name: 'name', readOnly: true},
                { xtype: 'splitter' },
                { xtype:'textfield', fieldLabel: 'Intervals', name: 'nbIntervals', readOnly: true}
              ]
            }
          ],
        },
        {
          xtype: 'container',
          region: 'center',
          layout: 'border',
          items: [
            {
              xtype: 'tabpanel',
              region: 'west',
              width: 250,
//              height: 400,
              id: 'visu-tabpanel'
            },
            {
              xtype: 'chart',
              region: 'center',
              store: this.catalogStore,
              id: 'visu-chart',
              animate: false,
        			mask: false,
        			shadow: false,
        			theme:'Blue',
        			background: { fill : "#fff" }
            }
          ]
        }
      ],
      fbar:[
        {
          type: 'button',
          text: 'Plot',
          scope : this,
          handler: this.plotChart
        },
        {
          type: 'button',
          text: 'Reset',
          scope : this,
          handler: this.reset
      },
      {
        type: 'button',
        text: 'Save Chart',
        scope : this,
        handler: this.saveChart
      }
    ]
    });

    var myConf = {
			layout: 'border',
			items: [
        this.formPanel,
				{
					xtype: 'panel',
					region: 'south',
					title: 'Information',
					collapsible: true,
					collapseMode: 'header',
					height: 100,
					autoHide: false,
					bodyStyle: 'padding:5px',
					iconCls:  'icon-information',
					loader: {
						autoLoad: true,
						url: helpDir+'visuHOWTO'
					}
				}
			]
		};

    this.initChartTypes();

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