Ext.define('StatusColorEditor', {
    extend: 'Ext.grid.CellEditor',
    alias: 'widget.statuscoloreditor',

    requires: [

        'amdaUI.ColorPicker'

    ],

    field: {

        xtype: 'colorpicker'

    },
});

Ext.define('amdaUI.StatusGrid', {

    extend: 'Ext.grid.Panel',

    alias: 'widget.statusgrid',

    type: '',

    catFields:['value','label','color'],
    paramFields:['minVal','maxVal','label','color'],

    xtype:'grid',

    cellEditing : null,
    isCat : null,
    statusStore: null,

    constructor: function(config) {

        if(config.type == 'cat'){
            this.isCat = true;
            this.createStore(this.catFields);

        }

        else{
            this.isCat = false;
            this.createStore(this.paramFields);
        }
        if(config.status != null )
            this.parseStatus(config.status);
        

		this.init(config);
		this.callParent();
	},

    createStore: function(fields){
        this.statusStore=Ext.create('Ext.data.Store', {
            fields: fields,
            data:{'items':[]},
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }
        });
    },
    

    onAddClick: function(grid){
        // Create a model instance

        if(this.isCat)

            var rec = {'value':0, 'label':'', 'color':'#000000'};

        else

            var rec = {'minVal':0, 'maxVal':0, 'label':'', 'color':'#000000'};

        
        this.statusStore.insert(0, rec);
        this.cellEditing.startEditByPosition({
            row: 0, 
            column: 0
        });
    },
    clearStore: function(){
        this.statusStore.removeAll();
    },
    onRemoveClick: function(grid, rowIndex){
        this.statusStore.removeAt(rowIndex);
    },

    rgbToHex: function(rgbArray) {
        var hex = "";
        for (var i = 0; i < rgbArray.length; i++) {
            var hexValue = Number(rgbArray[i]).toString(16);
            if (hexValue.length < 2) {
            hexValue = "0" + hexValue;
            }
            hex += hexValue;
        }
        return hex.toUpperCase();
    },
    hexToRgb: function(hex) {

        var r = parseInt(hex.substring(1,3), 16);
        var g = parseInt(hex.substring(3,5), 16);
        var b = parseInt(hex.substring(5,7), 16);

        return [r, g, b];
    },

    getStatusString: function() {
        var me = this;
        var data = this.statusStore.data.items.map(function(item) {
            var label = item.get('label');

            var color = item.get('color');

            if (me.isCat)
                return item.get('value') + ' : ' + label + ' [' + me.hexToRgb(color).toString().replaceAll(",",", ") + ']';
            else
                return '['+item.get('minVal')+','+item.get('maxVal')+ '] : ' + label + ' [' + me.hexToRgb(color).toString().replaceAll(",",", ") + ']';
            

        });

        var outputString = data.join(' - ');
        return outputString;
    },
    
    parseStatus: function(inputStr) {
        var me = this;
        var items = inputStr.split(" - ");

        for (var i = 0; i < items.length; i++) {
            var parts = items[i].split(" : ");
            if(parts.length > 1){

                var vals = {};
                if(me.isCat){
                    me.statusStore.insert(i,{
                        'value': parseInt(parts[0]),
                        'label': parts[1].split(" [")[0],

                        'color': "#"+this.rgbToHex(parts[1].split(" [")[1].slice(0, -1).split(", "))

                    });
                }
                else{
                    var minMaxVals = parts[0].split('[')[1].slice(0,-1).split(",");
                    me.statusStore.insert(i,{
                        'minVal':minMaxVals[0],
                        'maxVal':minMaxVals[1],
                        'label': parts[1].split(" [")[0],

                        'color': "#"+this.rgbToHex(parts[1].split(" [")[1].slice(0, -1).split(", "))

                    });
                }

            }
        } 
    },

    getMinValColumn: function(){
        if (!this.isCat){
            return {text : 'Min Value', dataIndex:'minVal', width: 70, editor: {xtype:'numberfield', allowBlank:false,hideTrigger:true}, menuDisabled: true};
        }
    },
    getMaxValColumn: function(){
        if (!this.isCat) {
            return {text : 'Max Value', dataIndex:'maxVal', width: 70, editor:{xtype:'numberfield', allowBlank:false,hideTrigger:true},menuDisabled: true};
        }
    },
    getValueColumn: function(){
        if (this.isCat){
            return { text: 'Value',  dataIndex: 'value',width: 55, editor: {xtype:'numberfield',allowBlank:false, hideTrigger:true},menuDisabled: true};
        }
    },

    getLabelColumn: function(){
        return { text: 'Label', dataIndex: 'label', width: 55, editor: 'textfield',menuDisabled: true,};
    },
    getColorColumn: function(){
        return {
            text: 'Color',dataIndex: 'color', width: 40, menuDisabled: true,
            renderer: function(value) {

                console.log(value);
                return '<div style="background-color:' + value + '; margin-left: auto; \

                        margin-right: auto;width:15px;height:15px;"></div>';
            },
            editor: { xtype: 'statuscoloreditor' }
        };
    },

    getDeleteColumn:function(){
        return {
            xtype: 'actioncolumn', width: 25, sortable: false, menuDisabled: true,
            items: [{ iconCls: 'icon-delete', scope: this, handler: this.onRemoveClick }]
        };
    },

    getColumns: function(){
        if (this.isCat)
            return [ this.getValueColumn(), this.getLabelColumn(), this.getColorColumn(), this.getDeleteColumn()]
        else
            return [this.getMinValColumn(), this.getMaxValColumn(), this.getLabelColumn(), this.getColorColumn(), this.getDeleteColumn()]
    },

    init: function(config) {

        var me = this;
        me.cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 1,
            listeners:{
                // Backgrounds of min and max cells become red if Max < Min
                edit:function(editor, context,e){
                    if(!me.isCat){
                        var color='';
                        if (context.record.get('maxVal') - context.record.get('minVal')< 0)
                            color= 'red';
                        else 
                            color='white';
                        for ( var i = 1; i<3; i++ )
                            Ext.get(context.row).down('td:nth(' + i + ')').setStyle('background-color',color);
                    }
                }
            }
        });

        Ext.apply(this,  {

            store:this.statusStore,

            columns: this.getColumns(),

            selType: 'cellmodel',
            plugins: [this.cellEditing],

            height: (this.isCat) ? 130 : 180,

            renderTo: Ext.getBody(),
            tbar: [
            {
                xtype:'text',

                text :(me.isCat) ? 'Status Grid' : '',

            },'->',
            {
                iconCls: 'icon-add',
                text: 'New line',
                scope: this,
                handler: this.onAddClick
            }]
        });
    }

});