/**
 * 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',

	histogramStore: null,

  visuUI:null,

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

  getChartConfig: function(catalogStore,isColorBar=false) {

		var paramOpt = {
			paramId: '',

			title: 'Parameter'

		}; 

		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',

      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 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: 'Title',

          id: 'visu-histo-title',
          listeners: {
            change: function(){
              this.visuUI.plotChart();
            },
            scope: this
          }

        }
      ]
    };
  },

	init : function (config)
	{
		var myConf = {

			items: [

          this.getHistoConfig(config.parametersStore)
      ]

		};

    this.visuUI= config.visuUI;

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