/**
 * 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,
    emptyChartConfig: null,

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

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

    updateObject: function () {
        return true;
    },
    addCatalog: function (cat) {
        this.setObject(cat)
    },

    reset: function () {
        var tabPanel = Ext.getCmp('visu-tabpanel');
        Ext.Array.each(tabPanel.items.items, function (item) {
            Ext.each(item.query('field'), function (field) {
                field.reset();
            });
        });
        this.replaceChart(null);
    },

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

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

            me.parametersStore.removeAll();
            Ext.Array.each(result.parameters, function (param) {
                if ((param.type == 0) || (param.type == 1) || (param.type == 3)) {
                    me.parametersStore.add(param);
                }
            });

            var dateConvert = function (value, rec) {
                if (!Ext.isDate(value)) {
                    var valueString = new String(value);
                    return new Date(valueString + 'Z');
                }
                return value;
            };

            var fieldsConfig = [];
            fieldsConfig.push({type: 'date', id: 'start', name: 'start', dateFormat: 'Y-m-d\\TH:i:s', convert: dateConvert});
            fieldsConfig.push({type: 'date', id: 'stop', name: 'stop', dateFormat: 'Y-m-d\\TH:i:s', 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 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);

            me.reset();
        }

        var opt = {
            'typeTT': 'catalog', 'id': this.object.get('id'),
            'name': this.object.get('name')
        };

        this.formPanel.getForm().loadRecord(this.object);
        AmdaAction.readIntervalsForChart(opt, onAfterInit);
    },

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

    plotChart: function () {
        var tabPanel = Ext.getCmp('visu-tabpanel');
        var newChartConfig = tabPanel.activeTab.items.items[0].getChartConfig(this.catalogStore);
        this.replaceChart(newChartConfig);
    },

    replaceChart: function (newChartConfig) {
        if (!newChartConfig) {
            newChartConfig = this.emptyChartConfig;
        }
        var chart = Ext.getCmp('visu-chart');
        var chartPanel = chart.up();
        chartPanel.remove(chart);
        chartPanel.insert(Ext.create('Ext.chart.Chart', newChartConfig));
    },

    saveChart: function () {
        var chart = Ext.getCmp('visu-chart');
        if (chart) {
            chart.save({
                type: 'image/png',
                defaultUrl: window.location
            });
        }
    },

    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: 'name', type: 'string'},
                {name: 'type', type: 'int'}
            ],
            data: []
        });

        this.emptyChartConfig = {
            xtype: 'chart',
            region: 'center',
            store: this.catalogStore,
            id: 'visu-chart',
            animate: false,
            mask: false,
            shadow: false,
            theme: 'Blue',
            background: {fill: "#fff"}
        };

        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'
                        },
                        this.emptyChartConfig
                    ]
                }
            ],
            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
                }
            ],
            listeners:
                    {
                        render: function (o, op)
                        {
                            var me = this;
                            var el = me.body.dom;
                            var dropTarget = Ext.create('Ext.dd.DropTarget', el, {
                                ddGroup: 'explorerTree',
                                notifyEnter: function (ddSource, e, data)
                                {

                                },
                                notifyOver: function (ddSource, e, data)
                                {
                                    var nodeType = data.records[0].get('nodeType');
                                    if ((nodeType == 'catalog' || nodeType == 'sharedcatalog') &&
                                            (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 visuModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.visu.id);
                                    if (visuModule) {
                                        
                                        var catNode = data.records[0];
                                        AmdaAction.getObject( catNode.get('id'), catNode.get('nodeType'), function(result, remoteEvent) {
                                            var catObj = Ext.create(catNode.get('objectDataModel'), result);
                                            if(catObj !== null){
                                            visuModule.addCatalog(catObj);
                                        }else{
                                        Ext.MessageBox.show({title: 'Warning',
                                        msg:  '<br/>Undifined Catalog '+catNode.get('text'),
                                        width: 300,
                                        buttons: Ext.MessageBox,
                                        fn: me.overwriteProcess,
                                        icon: Ext.MessageBox.WARNING,
                                        scope: me
                                    });
                                    return false;
                                        }
                                            
                                        }, this);
                                    }
                                    return true;
                                }
                            });
                        }
                    }
        });

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