Ext.define("App.view.MessageInbox", {
    extend: "Ext.grid.Panel",
    xtype: "messageInbox",

    cls: "email-inbox-panel shadow",

    headerBorders: false,
    rowLines: false,
    scrollable: false,

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

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            store: Ext.create("App.store.MsgStore", {}),
            bbar: {
                xtype: "pagingtoolbar",
                displayInfo: true
            },
            columns: [
                {
                    dataIndex: "readed",
                    menuDisabled: true,
                    text: '<span class="x-fa fa-envelope-open-o"></span>',
                    width: 40,
                    renderer: function(value, metaData, record, row, col, store, grid) {
                        record.dirty = false;
                        if (value)
                            return '<b><div class="x-fa fa-envelope-open-o" style="cursor:pointer; width:16px; height:16px; margin:auto; padding:0px; " ></div></b>';
                        else
                            return '<div class="x-fa fa-envelope-o" style="cursor:pointer; width:16px; height:16px; margin:auto; padding:0px; " ></div>';
                    }
                },
                {
                    dataIndex: "refCode",
                    text: "Ref Code",
                    flex: 2,
                    renderer: function(value, metaData, record, row, col, store, grid) {
                        if (!value) {
                            value = "Others";
                        }
                        if (!record.get("readed")) return "<b>" + value + "</b>";
                        return value;
                    }
                },
                {
                    dataIndex: "updatedBy",
                    text: "Send By",
                    flex: 1,
                    renderer: function(value, metaData, record, row, col, store, grid) {
                        if (!record.get("readed")) return "<b>" + value + "</b>";
                        else return value;
                    }
                },
                {
                    xtype: "datecolumn",
                    dataIndex: "modified",
                    flex: 1,
                    text: "Update Time",
                    renderer: function(value, metaData, record, row, col, store, grid) {
                        if (!record.get("readed")) return "<b>" + Ext.Date.format(value, "d/m/Y H:i") + "</b>";
                        else return Ext.Date.format(value, "d/m/Y H:i");
                    }
                }
            ],

            listeners: {
                added: function(panel, parent, pos, opts) {
                    me.getStore().load();
                },
                rowClick: function(panel, record, element, rowIndex, e, eOpts) {
                    var md = me.up("messagePanel").down("messageDetail"),
                        data = record.data;
                    record.set("readed", true);
                    md.setHidden(false);
                    md.setData({ mtId: data.mtId, refCode: data.refCode });
                    md.expand();
                    Ext.Ajax.request({
                        url: App.url("/message/mark-read"),
                        params: {
                            mtId: data.mtId
                        },
                        method: "POST",
                        success: function(response, opts) {
                            var result = Ext.decode(response.responseText);
                            if (!result.success) {
                                App.showError("Action Failed!");
                                return;
                            }
                            Ext.Ajax.request({
                                url: App.url("/message/ajax-ping"),
                                method: "GET",
                                success: function(response, opts) {
                                    var result = Ext.decode(response.responseText);
                                    unread = result.msgCount.unread;
                                    viewport = me.up("viewport");
                                    /*
                                    if (unread > 0) {
                                        viewport
                                            .down("#navigationTreeList")
                                            .getStore()
                                            .getById("msgbox")
                                            .set("rowCls", "nav-tree-badge nav-tree-badge-hot");
                                    } else {
                                        viewport
                                            .down("#navigationTreeList")
                                            .getStore()
                                            .getById("msgbox")
                                            .set("rowCls", null);
                                    }
                                    */
                                }
                            });
                        },
                        scope: this
                    });
                }
            }
        });
        me.callParent(arguments);
    }
});
