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

Ext.define('amdaUI.CatalogVisuHistogram', {
	extend: 'Ext.form.Panel',
	alias: 'widget.panelCatalogVisuHistogram',
  requires: [
		'amdaPlotObj.PlotObjectConfig',
		'amdaPlotComp.PlotColorPicker'
	],

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

  getChartConfig: function(catalogStore,isColorBar=false) {
		var paramOpt = {
			paramId: '',
			title: 'Parameter'
		}; 

    var plotColorField = Ext.getCmp('visu-histo-color');
    var plotColor=plotColorField.ownerCt.colorDisplayer.value;

		var paramField = Ext.getCmp('visu-histo-param');
		var paramFieldId = paramField.getValue();
		if (paramFieldId && (paramFieldId != "")) {
			var paramField = paramField.getStore().getById(paramFieldId);
			if (paramField) {
				paramOpt.paramId = paramField.get('id');
				paramOpt.title = paramField.get('name');
			}
		}
    else {
      //myDesktopApp.errorMsg('Missing parameter selection');
      return null;
    }

		var paramTitleField = Ext.getCmp('visu-histo-title');
		var paramTitle = paramTitleField.getValue();
		if (paramTitle && (paramTitle != "")) {
			paramOpt.title = paramTitle;
		}

    var nbBinsField = Ext.getCmp('visu-histo-bin-slider');
    var nbBinsValue = nbBinsField.getValue();
		if (nbBinsValue <= 0) {
			nbBinsValue = 1
		}

		var minValue = null;
		var maxValue = null;
		catalogStore.each(function (item) {
			minValue = (minValue == null) ? item.get(paramOpt.paramId) : Math.min(minValue, item.get(paramOpt.paramId));
			maxValue = (maxValue == null) ? item.get(paramOpt.paramId) : Math.max(maxValue, item.get(paramOpt.paramId));
		});

    if ((minValue == null) || (maxValue == null) || (minValue == maxValue)) {
      myDesktopApp.errorMsg('Not enough data or constant data');
      return null;
    }
    var isLogScaleX = Ext.getCmp('visu-histo-logbox-X').getValue();
    var isLogScaleY = Ext.getCmp('visu-histo-logbox-Y').getValue();
		var binSize = (maxValue-minValue) / (nbBinsValue);
    var x=[];
    catalogStore.each(function (item) {
			x.push(item.get(paramOpt.paramId));
		});

    var trace = {
      x: x,
      type: 'histogram',
      marker:{
        color:plotColor,
      },
      histnorm: Ext.getCmp('normalizedCheckbox').getValue() ? 'probability': null,
      xbins: { end: maxValue, size: binSize, start: minValue }
    };
   
    var data = [trace];
    var layout = {
      margin: {l: 60,r: 40, b: 40,t: 40,pad: 5},
      yaxis: {
        title: Ext.getCmp('normalizedCheckbox').getValue() ? 'Frequency': 'Events',
        type: isLogScaleY ? 'log' : null
      },
      xaxis: {
        title: paramOpt.title,
        type: isLogScaleX ? 'log' : null},
    };
		
      var result =  {data:data,layout:layout}
    return result;
  },

  generateLogBox: function(axis){
    return {xtype: 'fieldcontainer',
    fieldLabel: axis+' Log Scale',
    defaultType: 'checkboxfield',
    items: [
      {
        name      : 'logscale'+axis,
        inputValue: false,
        id        : 'visu-histo-logbox-'+axis,
        listeners:{
        change:function(){
          this.visuUI.plotChart();
        },
        scope: this
        }
      }
    ],}
  },

  getHistoConfig: function(parametersStore) {
    var paramComboConfig = {
      xtype: 'combo',
      emptyText: 'select parameter',
      editable: false,
      store: parametersStore,
      queryMode: 'local',
      displayField: 'name',
      valueField: 'id',
      id: 'visu-histo-param',
      listeners:{
        change:function(){
          this.visuUI.plotChart();
        },
        scope: this
      }
    };
    var normalizedbox={
      xtype: 'fieldcontainer',
            fieldLabel: 'Normalized',
            defaultType: 'checkboxfield',
            items: [
                {
                    name      : 'normalized',
                    inputValue: false,
                    id        : 'normalizedCheckbox',
                    listeners:{
                      change:function(){
                        this.visuUI.plotChart();
                      },
                      scope: this
                    }
                }
            ],
    };
    var colorPicker = this.addColorsPicker('visu-histo-color', 'Color', amdaDefaultConfigs.availableColorsNew, 'standard');
		var plotThemeComboConfig = {xtype:'fieldset',
									id:'visu-hiso-color-fieldset',
									margin:'5 0 0 0',
                  padding:0,
									border:false,
									items:[colorPicker],
								};
		colorPicker.add({id:'visu-histo-color'});

    var sliderConfig = {
      xtype : 'fieldcontainer',
      layout: 'hbox',
      items: [
        {
          xtype:'fieldset',
          title: 'Nb. bins',
          border: false,
          layout: 'hbox',
          items: [
            {
              xtype: 'slider',
              width: 150,
              value: 10,
              increment: 1,
              minValue: 2,
              maxValue: 100,
              id: 'visu-histo-bin-slider',
              listeners: {
                change: function ( slider, newValue, thumb, eOpts ) {
                  var binValueField = Ext.getCmp('visu-histo-bin-value');
                  binValueField.setValue(newValue);
                },
                changecomplete: function(){
                  this.visuUI.plotChart();
                },
                scope: this
              }
            },
            {
              xtype: 'splitter'
            },
            {
              xtype: 'numberfield',
              hideTrigger: true,
              width: 50,
              disabled: true,
              value: 10,
              id: 'visu-histo-bin-value'
            }
        ]
      }
      ]
     };

    return {
      xtype : 'fieldset',
      title : 'Histogram axis',
      items : [
        paramComboConfig,
        sliderConfig,
        normalizedbox,
        this.generateLogBox('X'),
        this.generateLogBox('Y'),
        {
          xtype: 'textfield',
          fieldLabel: 'X Title',
          id: 'visu-histo-title',
          listeners: {
            change: function(){
              this.visuUI.plotChart();
            },
            scope: this
          }
        },
        
        plotThemeComboConfig,
      ]
    };
  },

  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.visuUI.plotChart();
		}});
	},

	init : function (config)
	{
		var myConf = {
			items: [
          this.getHistoConfig(config.parametersStore)
      ]
		};
    this.visuUI= config.visuUI;
		Ext.apply (this, Ext.apply(arguments, myConf));
    }
});