Ext.define('TradePortal.view.products.Panel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.productspanel',
    id: 'products_panel',
    layout: {
        type: 'vbox',
        pack: 'center',
        align: 'center'
    },
    border: false,
    items: [{
        border: false,
        layout: 'vbox',
        items: [{
            border: false,
            id: 'prod_breadcrumbs',
            html: '<small class="breadcrumb_text"> > Products</small>'
        }, {
            layout: 'hbox',
            items: [{
                width: 43,
                height: 39,
                baseCls: 'breadcrumbs-home',
                border: false,
                items: [],
                listeners: {
                    el: {
                        click: function () {
                            Ext.getCmp('main_panel').items.items[1].down('panel').items.each(function (panel) {
                                panel.hide();
                            });
                            Ext.getCmp('home_panel').show();
                        }
                    }
                }
            }, {
                xtype: 'products_top_menu'
            }]
        }]
    }, {
        layout: 'hbox',
        border: false,
        width: 960,
        height: 48,
        items: [{
            layout: 'vbox',
            items: [{
                xtype: 'triggerfield',
                width: 220,
                id: 'searchfield',
                triggerCls: 'x-form-trigger-search',
                emptyText: 'Search',
                listeners: {
                    scope: this,
                    specialkey: function (f, e) {
                        if (e.getKey() == e.ENTER) {
                            f.onTriggerClick();
                        }
                    }
                },
                onTriggerClick: function () {
                    var value = this.getRawValue();
                    Ext.getBody().mask('Please wait...');
                    Ext.getStore('searchProductTP').setExtraParam('userName', Ext.getStore('HomeStatistic').last().data.id_user);
                    Ext.getStore('searchProductTP').setExtraParam('deviceID', Ext.getStore('Config').data.last().data.device_id);
                    Ext.getStore('searchProductTP').setExtraParam('idString', '');
                    Ext.getStore('searchProductTP').setExtraParam('descString', value);
                    Ext.getStore('searchProductTP').setExtraParam('incGST', Ext.getStore('getPriceViewOptionsTP').last().data.GSTInc);
                    Ext.getStore('searchProductTP').removeAll();
                    UOMStore = new Array();
                    if (Ext.getCmp('all-products').checked) {
                        Ext.getCmp('products_grid').reconfigure('searchProductTP');
                        Ext.getStore('searchProductTP').load({
                            callback: function (records, operation, success) {
                                Ext.getCmp('products_left_menu').removeAll();
                                Ext.getCmp('products_list').buildProductsList(records);
                                Ext.getCmp('products_panel').navStore = Ext.getStore('searchProductTP');
                                Ext.getCmp('products_panel').configureNavButtons();
                                Ext.getBody().unmask();
                            }
                        });
                    } else {
                        Ext.getStore('Products').setExtraParam('searchString', value);
                        Ext.getCmp('products_grid').reconfigure('Products');
                        Ext.getStore('Products').loadPage(1, {
                            callback: function (records, operation, success) {
                                Ext.getCmp('products_list').buildProductsList(records);
                                Ext.getCmp('products_panel').configureNavButtons();
                                Ext.getBody().unmask();
                            }
                        });
                    }

                    Ext.getStore('CartTotal').removeAll();
                    Ext.getStore('Cart').load({
                        params: {
                            userName: Ext.getStore('HomeStatistic').last().data.id_user,
                            sessionID: Ext.getStore('createCart').last().data.sessionID
                        }
                    });

                }
            }, {
                xtype: 'fieldcontainer',
                fieldLabel: '',
                width: 200,
                //margin: '2 0 0 0',
                defaultType: 'radiofield',
                defaults: {
                    flex: 1,
                    name: 'search-type'
                },
                layout: 'hbox',
                items: [{
                    boxLabel: 'All Products',
                    id: 'all-products',
                    checked: true
                }, {
                    boxLabel: 'Current Selection',
                    id: 'current-products'
                }]
            }]
        }, {
            xtype: 'tbspacer',
            width: 20
        }, {
            xtype: 'fieldcontainer',
            fieldLabel: '',
            //margin: '7 0 0 0',
            width: 100,
            defaultType: 'radiofield',
            defaults: {
                flex: 1,
                name: 'type'
            },
            layout: 'vbox',
            items: [{
                boxLabel: 'Image View',
                margin: '6 0 0 0',
                id: 'images-products',
                listeners: {
                    change: {
                        fn: function (el, newValue, oldValue) {
                            if (newValue) {
                                Ext.getCmp('products_grid').hide();
                                Ext.getCmp('products_list').show();
                                Ext.getCmp('products_panel').configureNavButtons();
                            }
                        }
                    }
                }
            }, {
                boxLabel: 'List view',
                checked: true,
                margin: '-1 0 0 0',
                id: 'list-products',
                listeners: {
                    change: {
                        fn: function (el, newValue, oldValue) {
                            if (newValue) {
                                Ext.getCmp('products_list').hide();
                                Ext.getCmp('products_grid').show();
                                Ext.getCmp('products_panel').hideNavButtons();
                            }
                        }
                    }
                }
            }]
        }, {
            xtype: 'tbspacer',
            width: 5
        }, {
            layout: 'hbox',
            margin: '12 0 0 0',
            width: 145,
            items: [{
                xtype: 'cartview',
                id: 'cartview'
            }]
        }, {
            xtype: 'checkbox',
            margin: '15 0 0 0',
            boxLabel: 'Show Prices',
            id: 'show_prices',
            checked: true
        }, {
            xtype: 'tbspacer',
            width: 15
        }, {
            xtype: 'button',
            margin: '12 0 0 0',
            id: 'save_list',
            text: 'SAVE LIST'
        }, {
            xtype: 'tbspacer',
            width: 5
        }, {
            xtype: 'button',
            margin: '12 0 0 0',
            id: 'cart_proceed',
            text: 'PROCEED'
        }, {
            xtype: 'tbspacer',
            width: 5
        }, {
            xtype: 'button',
            margin: '12 0 0 0',
            id: 'cart_cancel',
            text: 'CANCEL'
        }, {
            xtype: 'tbspacer',
            width: 5
        }, {
            xtype: 'button',
            id: 'products_prevpage',
            text: 'Prev Page',
            hidden: true,
            margin: '12 0 0 0'
        }, {
            xtype: 'tbspacer',
            width: 5
        }, {
            xtype: 'button',
            id: 'products_nextpage',
            text: 'Next Page',
            hidden: true,
            margin: '12 0 0 0'
        }, {
            xtype: 'tbspacer',
            width: 5
        }]
    }, {
        xtype: 'tbspacer',
        height: 2
    }, {
        layout: 'hbox',
        border: false,
        items: [{
            xtype: 'products_left_menu'
        }, {
            xtype: 'products_list',
            hidden: true
        }, {
            xtype: 'products_grid'
        }]
    }, {
        border: false,
        items: [{
            xtype: 'cartgrid'
        }]
    }],
    navStore: null,
    configureNavButtons: function () {
        if (this.navStore != null && this.navStore.getTotalCount() > Ext.getStore('Config').data.last().data.pagesize && Ext.getCmp('images-products').getValue()) {
            if (this.navStore.currentPage == 1) {
                Ext.getCmp('products_prevpage').hide();
            } else {
                Ext.getCmp('products_prevpage').show();
            }
            if (this.navStore.pageSize * this.navStore.currentPage < this.navStore.getTotalCount()) {
                Ext.getCmp('products_nextpage').show();
            } else {
                Ext.getCmp('products_nextpage').hide();
            }
        } else {
            Ext.getCmp('products_prevpage').hide();
            Ext.getCmp('products_nextpage').hide();
        }
    },
    hideNavButtons: function () {
        Ext.getCmp('products_prevpage').hide();
        Ext.getCmp('products_nextpage').hide();
    },
    categories: null,
    loadAndBuildTopMenu: function () {
        if (this.categories != null) {
            return;
        }
        Ext.getBody().mask('Please wait...');
        Ext.getStore('getProductCategories').load({
            scope: this,
            callback: function (records) {
                this.categories = records;
                Ext.getCmp('products_top_menu').buildTopMenu(records);
                Ext.getBody().unmask();
            }
        })
    },
    show: function () {
        this.callParent(arguments);
    },
    initComponent: function () {
        this.callParent(arguments);
    }
});
