// Base Container
Ext.define("App.view.UserBaseContainer", {
    extend: "Ext.container.Container",
    xtype: "userBaseContainer",
    alias: "widget.userBaseContainer",
    layout:'vbox',
    width: '100%',
    height: '100%',
    params: {},

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [
                {
                    xtype: "button",
                    margin: '4 8 4 8',
                    text: App.localeRes("New User"),
                    iconCls: "x-fa fa-user-plus",
                    handler: function(button, event) {
                        App.loadModuleWin("userWindow", "Add New User", {
                            callbackOnClose: function() {
                                me.down("userBasePanel")
                                    .down("userGrid")
                                    .reloadStore();
                            }
                        });
                    }
                },
                {
                    xtype: 'userBasePanel',
                    flex: 1
                }
            ]
        });
        me.callParent(arguments);
    }
});

// Base Panel with the user type grid and user container
Ext.define("App.view.UserBasePanel", {
    extend: "Ext.panel.Panel",
    xtype: "userBasePanel",
    alias: "widget.userBasePanel",
    itemId: "userBasePanel",
    layout: "border",
    width: "100%",
    bodyPadding: "5px",

    defaults: {
        split: true
    },

    scrollable: false,
    params: {},

    doSearch: function() {
        this.down("groupGrid")
            .getStore()
            .load({
                callback: function(records, operation, success) {}
            });
    },

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [
                {
                    xtype: "groupGrid",
                    title: App.localeRes("User Group"),
                    region: "west",
                    width: 200,
                    minSize: 100,
                    collapsible: true,
                    maxSize: 250,
                    style: {
                        "border-radius": "9px",
                        "box-shadow": "0 4px 8px 0 rgba(0,0,0,0.2)"
                    }
                },
                {
                    xtype: "userContainer",
                    region: "center",
                    collapsible: false
                }
            ],

            listeners: {
                added: function(panel, parent, pos, opts) {
                    me.doSearch();
                }
            }
        });

        me.callParent(arguments);
    }
});

// <#-- Group Grid -->

Ext.define("App.view.GroupGrid", {
    extend: "Ext.grid.Panel",
    alias: "widget.groupGrid",
    title: App.localeRes("User Group"),
    id: "groupGrid",
    height: "100%",
    layout: "fit",

    reloadStore: function() {
        this.getStore().reload();
    },

    initComponent: function() {
        var me = this;
        Ext.apply(me, {
            store: Ext.create("App.store.GroupStore", {}),
            columns: [
                {
                    xtype: "actioncolumn",
                    text: App.localeRes("Action"),
                    width: 80,
                    align: "center",
                    items: [
                        {
                            iconCls: "icon-edit",
                            handler: function(view, rowIndex, colIndex, item, e, record) {
                                App.loadModuleWin("groupWindow", "Edit User Group", {
                                    params: { record: record },

                                    callbackOnClose: function() {
                                        me.reloadStore();
                                    }
                                });
                            },
                            scope: me
                        },
                        {
                            iconCls: "silk-delete",
                            handler: function(view, rowIndex, colIndex, item, e, record) {
                                var me = this;
                                App.confirm("Confirm Delete", "User Group Confirm Del", function(buttonId, text, opt) {
                                    if (buttonId === "yes") {
                                        Ext.Ajax.request({
                                            url: App.url("/user/group/delete"),
                                            params: { id: record.data.id },
                                            success: function(response, opts) {
                                                App.showMsg("Group Deleted");
                                                me.reloadStore();
                                            },
                                            failure: function(response, opts) {
                                                App.showError("Cannot Delete: " + response.status);
                                            },
                                            scope: this
                                        });
                                    }
                                });
                            },
                            scope: me
                        }
                    ]
                },
                {
                    xtype: "gridcolumn",
                    dataIndex: "name",
                    text: App.localeRes("Name"),
                    flex: 3
                }
            ],
            // selModel: {
            //     checkOnly: false,
            //     injectCheckbox: "first",
            //     mode: "SINGLE"
            // },
            // selType: "checkboxmodel",
            listeners: {
                rowclick: function(me, record, element, rowIndex, e, eOpts) {
                    me.up("userBasePanel")
                        .down("userContainer")
                        .doSearch();
                }
            },
            buttons: [
                {
                    text: App.localeRes("Add New Group"),
                    handler: function() {
                        App.loadModuleWin("groupWindow", App.localeRes("Add New User Group"), {
                            callbackOnClose: function() {
                                me.reloadStore();
                            }
                        });
                    }
                }
            ]
        });

        me.callParent(arguments);
    }
});
