Ext.define('TradePortal.view.products.TopMenu', {
    extend: 'Ext.toolbar.Toolbar',
    alias: 'widget.products_top_menu',
    id: 'products_top_menu',
    width: 919,
    height: 39,
    baseCls: 'breadcrumbs',
    border: false,
    buildTopMenu: function (categories) {
        var menu = Ext.getCmp('products_top_menu');
        menu.removeAll();
        var nestedCategories = [];
        for (var k in categories) {
            var record = {};
            if (categories[k].get('prodCategory') !== '' && categories[k].get('prodType') === '' && categories[k].get('prodClass') === '') {
                categories[k].set('text', categories[k].get('menuDesc'));
                categories[k].set('List', []);
                record = categories[k];
            }

            for (var l in categories) {
                if (record.data !== undefined && categories[l].get('prodCategory') === record.get('prodCategory') && categories[l].get('prodType') !== '' && categories[l].get('prodClass') === '') {

                    var rec = categories[l].data;
                    rec.text = categories[l].get('menuDesc');
                    var list = record.get('List');
                    list.push(rec);
                }
            }

            if (record.data !== undefined && record.get('List') !== undefined && record.get('List').length > 0) {
                nestedCategories.push(record);
            }
        }

        for (var i in nestedCategories) {
            var item = Ext.create('Ext.button.Button', {
                text: nestedCategories[i].get('text'),
                menu: this.buildTopSubMenu(nestedCategories[i].get('List'), menu),
                listeners: {
                    mouseover: function () {
                        if (menu.hideTimeout != undefined) {
                            window.clearTimeout(menu.hideTimeout);
                        }
                        menu.lastButton = this;
                        this.showMenu();
                    },
                    mouseout: function () {
                        menu.hideTimeout = window.setTimeout(function () {
                            menu.lastButton.hideMenu();
                        }, 250);
                    }
                }
            });
            menu.add(item);
            var hideTask = new Ext.util.DelayedTask(item.hideMenu, item);
        }
    },
    buildTopSubMenu: function (subCategories, menu) {
        var subMenu = Ext.create('Ext.menu.Menu', {
            baseCls: 'top-sub-menu',
            margin: '0 0 0 0',
            padding: '0 0 0 0',
            shadow: false,
            listeners: {
                mouseover: function () {
                    window.clearTimeout(menu.hideTimeout);

                },
                el: {
                    mouseout: function () {
                        menu.hideTimeout = window.setTimeout(function () {
                            menu.lastButton.hideMenu();
                        }, 250);
                    }
                }
            }
        });
        var columns = Ext.create('Ext.panel.Panel', {
            xtype: 'panel',
            layout: 'hbox',
            margin: '0 0 0 0',
            padding: '0 4 4 0',
            border: false
        });

        var columnWidth = 200;
        var menuWidth = 0;
        var column = null;
        var itemCount = 0;
        for (i in subCategories) {
            if (itemCount == 6) {
                itemCount = 0;
                columns.add(column);
                column = null;
                menuWidth += columnWidth;
            }
            if (column == null) {
                column = Ext.create('Ext.panel.Panel', {
                    border: false,
                    defaults: {
                        width: 200,
                        height: 22,
                        margin: '-2 0 0 4',
                        padding: '0 0 0 2',
                        baseCls: 'top-sub-menu-item',
                        border: false
                    }
                });
            }
            column.add({
                html: '<span style="color:rgb(243,112,36);">&gt;</span> <span style="font-weight: normal !important;font-size: 13px !important;">' + subCategories[i]['text'] + '</span> ',
                categories: subCategories,
                category: subCategories[i],
                listeners: {
                    el: {
                        click: function () {
                            Ext.getCmp('products_top_menu').lastButton.hideMenu();
                            Ext.getCmp('products_top_menu').topMenuClick(Ext.getCmp(this.id));
                        }
                    }
                }
            });
            itemCount++;
        }
        if (itemCount > 0) {
            columns.add(column);
            menuWidth += columnWidth;
        }
        columns.setWidth(menuWidth + 4);
        subMenu.add(columns);

        return subMenu;
    },

    classes: {},
    topMenuClick: function (button) {
        Ext.getCmp('products_panel').hideNavButtons();
        var index = button.category['prodCategory'] + button.category['prodType'];
        if (this.classes[index] != undefined) {
            Ext.getCmp('prod_breadcrumbs').update('<small class="breadcrumb_text"><span class="breadcrumbsSub" onclick="goToHome()">' + Ext.getStore('Config').data.last().data.breadcrumb_text + '</span> > <span class="breadcrumbsSub" onclick="goToProducts()">Products</span> > <span class="breadcrumbsSub" onclick="goToProduct(\'' + button.id + '\')">' + button.category['prodType'] + '</span></small>');
            Ext.getCmp('products_left_menu').buildLeftMenu(button.categories, button.category, this.classes[index]);
            Ext.getCmp('products_list').removeAll();
            Ext.getCmp('products_grid').store.removeAll();
            return;
        }
        Ext.getBody().mask('Please wait...');
        Ext.getStore('getProductCategories').load({
            scope: this,
            callback: function (records) {
                var filteredRecords = records.filter(function (record) {
                    return button.category['prodCategory'] === record.data.prodCategory && button.category['prodType'] === record.data.prodType && record.data.prodClass !== '';
                });
                Ext.getCmp('prod_breadcrumbs').update('<small class="breadcrumb_text"><span class="breadcrumbsSub" onclick="goToHome()">' + Ext.getStore('Config').data.last().data.breadcrumb_text + '</span> > <span class="breadcrumbsSub" onclick="goToProducts()">Products</span> > <span class="breadcrumbsSub" onclick="goToProduct(\'' + button.id + '\')">' + button.category['prodType'] + '</span></small>');
                this.classes[index] = filteredRecords;
                Ext.getCmp('products_left_menu').buildLeftMenu(button.categories, button.category, filteredRecords);
                Ext.getCmp('products_list').removeAll();
                Ext.getCmp('products_grid').store.removeAll();
                Ext.getBody().unmask();
            }
        });
    }
});
