Ext.define('amdaUI.DefaultTreeGrid', {
    extend: 'Ext.tree.Panel',
    
    requires: [
        'Ext.data.*',
        'Ext.grid.*',
        'Ext.tree.*',
        'amdaModel.DefaultValuesModel',
        'amdaUI.GridColorPicker',
        'amdaUI.ColorMap'
    ],    
    xtype: 'tree-grid',
    
    reserveScrollbar: true,
    
    height: 300,
    useArrows: true,
    rootVisible: false,
    multiSelect: true,
    singleExpand: true,

    modifiedDefaults : {},

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

    getFullParentName:function(record){
        var parentNode = record;
        var parameter ="";
        while (parentNode.parentNode) {
            parentNode = parentNode.parentNode;
            if(parentNode.get('parameter'))
                parameter = parentNode.get('parameter')+'.'.concat(parameter);
        }
        return parameter;
    },

    extractData : function(node=null,parentName = '',) {
        var me =this;
        if(node === null){
            node = me.store.getRootNode();
        }
        if(node.data.leaf && node.data.modified){
            if(node.data.value !== node.data.default){
                me.modifiedDefaults[parentName] = node.data.value;
            }
        }
        else{
            Ext.each(node.childNodes, function(childNode) {
                me.extractData(childNode, (parentName !== '') ? parentName+'.'+childNode.data.parameter : childNode.data.parameter );
            });
        }
    },

    isHexCode: function(str) {
        return /^#[0-9a-fA-F]{6}$/.test(str);
    },
    init: function() {
        var me = this;
        me.cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 1,
            listeners:{
                beforeedit:function(editor, context,e){
                    if(!context.record.data.leaf)
                    {
                        return false;
                    }
                    var value = context.record.get(context.field);
                    if (me.isHexCode(value)) {
                        var colorPicker = Ext.create('amdaUI.GridColorPicker', {
                            pickerField: context.field,
                            value: value,
                            listeners: {
                                select: function(picker, color) {
                                    context.record.set(context.field, '#' + color);
                                    me.getView().refresh();
                                }
                            }
                        });
                        editor.field = colorPicker;
                    }
                },
                afteredit:function(editor, context,e){
                    if(context.record.get('value') !== context.record.get('default')){
                        context.record.set('modified',true);
                    }
                    else{
                        context.record.set('modified',false);
                    }
                    me.getView().refresh();
                }
            }
        });

        Ext.apply(this, {
            store: new Ext.data.TreeStore({
                model: amdaModel.DefaultValuesModel,
                proxy: {
                    type: 'direct',
                    directFn: AmdaAction.getDefaultValueTree   
				},
                folderSort: true
            }),
            plugins: [me.cellEditing],
            columns: [
                {
                    xtype: 'treecolumn', //this is so we know which column will show the tree
                    text: 'Parameters',
                    flex: 2,
                    sortable: true,
                    dataIndex: 'parameter',
                    renderer: function(value, metaData, record) {
                        if (record.get('modified')) {
                            return '<b style="color: blue;">'+value+'</b>';
                        }
                        return value;
                    }
                },{
                    xtype: 'gridcolumn',
                    getEditor: function(record) {
                        var grid = this.up().grid,
                            cellediting = grid.findPlugin('cellediting'),
                            editors = cellediting.editors,
                            editor = editors.getByKey(this.id),
                            fieldType;
                        
                        if (editor) {
                            // Do this to avoid memory leaks
                            editors.remove(editor);
                        }

                        var option = amdaDefaultOptions[me.getFullParentName(record)+record.get('parameter')];
                        var value = record.get('value');
                        var store = null;

                        if (option && option.type){
                            fieldType = option.type;
                            if (fieldType == 'colorpicker')
                                fieldType = 'gridcolorpicker';
                            var myStore = Ext.create('Ext.data.Store', {
                                fields: ['key', 'value'],
                                data: option.store
                            });
                            store = myStore;

                        }
                        else{
                            if(me.isHexCode(value)){
                                fieldType = 'gridcolorpicker'
                            }
                            else if(value === true || value === false){
                                fieldType = 'combobox'
                                store= [[true, 'True'], [false, 'False']];
                            }
                            else{
                                fieldType = isNaN(parseFloat(record.get('value'))) ? 'textfield' : 'numberfield';
                            }
                        }
                        return {
                            xtype: fieldType,
                            store: store, 
                            queryMode: 'local',
                            displayField: 'value',
                            valueField: 'key',
                            value: (fieldType=='combobox') ? value : null,
                            allowBlank: false
                        };
                    },
                    text: 'Values',
                    flex: 1,
                    sortable: true,
                    dataIndex: 'value',
                    align: 'center',
                    renderer: function(value, meta,record) {
                        if (me.isHexCode(value)){
                            value = value.substring(1, 7);
                            return '<div style="background-color:#' + value + '; margin-left: auto; \
                                margin-right: auto;width:15px;height:15px;"></div>';
                        }
                        if( record.get('parameter') === 'colorMap'){
                            var iconUrl="";
                            var colorMap = Ext.create('amdaUI.ColorMap');
                            colorMap.data.forEach(function(colorData){
                                if(colorData.key == value ){
                                    iconUrl= colorData.iconUrl;
                                }
                            });
                            return '<div style="background-image:url(' + iconUrl + ');background-size:100%;\
                                    background-repeat:no-repeat; background-position:center; \
                                    font-size:0;width:90px;height:15px;"></div>';
                        }
                        
                        var option = amdaDefaultOptions[me.getFullParentName(record)+record.get('parameter')];

                        if(option){
                            Ext.each(option.store, function(line){
                                if (line.key === value)
                                    value = line.value;
                            })
                        }
                        return value;
                    },
                },{
                    text: 'Reset',
                    width: 55,
                    menuDisabled: true,
                    xtype: 'actioncolumn',
                    tooltip: 'Reset to the default value',
                    align: 'center',
                    icon: 'js/resources/images/16x16/arrow_circle_double.png',
                    handler: function(grid, rowIndex, colIndex, actionItem, event, record, row) {
                        record.set('value', record.get('default'));
                        record.set('modified', false);
                        me.getView().refresh();
                    },
                    // Only leaf level tasks may be edited
                    isDisabled: function(view, rowIdx, colIdx, item, record) {
                        return !record.data.leaf || !record.data.modified;
                    }
                }
            ],
            viewConfig: {
                preserveScrollOnRefresh: true
            }
        });
    }
});