Ext.define('uas.panel.GroupList', {
    extend: 'Ext.view.View',
    xtype: 'grouplist',

    constructor: function (config) {
        var me = this, cfg = Ext.apply({}, config);

        if (cfg.groups) {
            var data = [];
            cfg.groups.forEach(function(group){
                if (group.items) {
                    var index = 0;
                    group.items.forEach(function(item){
                        data.push({
                            text: item.text, 
                            value: item.itemId,
                            group: group.text,
                            groupIndex: index++
                        });
                    });
                }
            });
            cfg.store = new Ext.data.Store({
                fields: ['text', 'value', 'group', 'groupIndex'],
                data: data
            });
        }
        me.callParent([
            cfg
        ]);
    },

    scrollable: true,
    baseCls: Ext.baseCSSPrefix + 'grouplist',
    itemCls: Ext.baseCSSPrefix + 'grouplist-item',
    trackOver: true,

    tpl: [
        '<div class="x-grouplist-innerCt"><tpl for=".">',
            '<tpl if="groupIndex == 0">',
                '<div class="x-grouplist-header">{group}</div>',
            '</tpl>',
            '<div role="option" class="x-grouplist-item">{text}</div>',
        '</tpl></div>',
    ],

    initComponent: function() {
        var me = this,
            baseCls = me.baseCls,
            itemCls = me.itemCls;
        me.selectedItemCls = baseCls + '-selected';
        if (me.trackOver) {
            me.overItemCls = baseCls + '-item-over';
        }
        me.itemSelector = '.' + itemCls;
        if (me.floating) {
            me.addCls(baseCls + '-floating');
        }
        me.callParent();
    },

    getItemValue: function (item) {
        return item.get('value');
    }
});