/**
 * 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',
        'amdaUI.PlotlyContainer'
    ],

    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 type = "";
        if(this.object.get('id').includes('sharedcatalog'))
            type = 'sharedcatalog'
        else if(this.object.get('id') == "")
            type = 'uploaded'
        else
            type = 'object'
        var opt = {
            'typeTT': 'catalog', 'id': this.object.get('id'),
            'name': this.object.get('name'),
            'type': type,
            'format': this.object.get('objFormat')
        };
        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 (isColorBar) {
        var tabPanel = Ext.getCmp('visu-tabpanel');
        var allData = tabPanel.activeTab.items.items[0].getChartConfig(this.catalogStore,isColorBar);
        this.replaceChart(allData);
    },

    replaceChart: function (allData) {
       
        var config = this.emptyChartConfig;
        if (allData) {
            config.data = allData.data;
            config.layout = allData.layout;
        }
        else{
            config.data =[];
            config.layout ={};
        }
        var chart = Ext.getCmp('visu-chart');
        if (chart){
            var chartPanel = chart.up();
            chartPanel.remove(chart);  
        }
        var testPlotly = new amdaUI.PlotlyContainer(config);
        chartPanel.insert(testPlotly);
    },

    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, { visuUI:me,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: 'PlotlyContainer',
            id: 'visu-chart',
        };

        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: {
                        type: 'hbox',
                        align: 'stretch'
                    },
                    items: [
                        {
                            xtype: 'tabpanel',
                            region: 'west',
                            width: 275,
//              height: 400,
                            id: 'visu-tabpanel',
                            listeners:{
                                tabchange:function(){
                                    this.plotChart();
                                },
                                scope: this
                            }
                        },
                        {
                            xtype: 'container',
                            layout:'fit',
                            flex: 1,
                            items: [
                                this.emptyChartConfig
                            ]
                        }
                    ]
                }
            ],
            fbar: [
                {
                    type: 'button',
                    text: 'Reset',
                    scope: this,
                    handler: this.reset
                },
            ],
            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));
    }
});