Ext.define("App.view.ComposeMessageWindow", {
    extend: "Ext.window.Window",
    alias: "widget.composeMessageWindow",
    xtype: "composeMessageWindow",
    title: App.localeRes("Compose Message"),
    constrainHeader: true,
    modal: true,
    width: 600,
    height: 420,

    layout: {
        type: "hbox"
    },

    bodyPadding: 10,
    scrollable: true,

    defaults: {
        labelWidth: 60,
        padding: 10
    },

    onSendBtnClick: function() {
        var me = this;
        var selected = me.down("msgRecipientGrid").getSelection();
        var f = me.down("form").getForm();
        var c = me
            .down("form")
            .down("#content")
            .getValue();
        var t = me
            .down("form")
            .down("#topic")
            .getValue();
        var recipientIds = [];
        selected.forEach((item, index) => {
            recipientIds.push(item.id);
        });
        if (f.isValid()) {
            Ext.Ajax.request({
                url: App.url("/message/new-text-message"),
                params: { recipientIds: recipientIds, content: c, topic: t },
                success: function(response, opts) {
                    App.showMsg("Message Send");
                    me.close();
                },
                failure: function(response, opts) {
                    App.showError('Cannot Delete\n<@spring.message "COMMON.code"/>: ' + response.status);
                },
                scope: this
            });
        }
    },

    initComponent: function() {
        var me = this;
        Ext.apply(me, {
            items: [
                {
                    xtype: "form",
                    style: {
                        "border-radius": "0px",
                        "box-shadow": ""
                    },
                    flex: 2,
                    items: [
                        {
                            xtype: "component",
                            height: 10
                        },
                        {
                            xtype: "textfield",
                            fieldLabel: "Topic",
                            itemId: "topic",
                            width: "100%",
                            labelWidth: 50
                        },
                        {
                            xtype: "textfield",
                            fieldLabel: "To",
                            itemId: "toUser",
                            width: "100%",
                            editable: false,
                            labelWidth: 50,
                            emptyText: "Please select from the right panel"
                        },
                        {
                            // xtype: "htmleditor",
                            xtype: "textarea",
                            width: "100%",
                            labelAlign: "top",
                            name: "content",
                            itemId: "content",
                            fieldLabel: "Content",
                            height: 150,
                            maxLength: 6000,
                            allowBlank: false
                        }
                    ]
                },
                {
                    xtype: "msgRecipientGrid",
                    flex: 1,
                    height: 300
                }
            ],

            bbar: {
                padding: 10,
                items: [
                    "->",
                    {
                        xtype: "button",
                        ui: "soft-red",
                        text: "Discard",
                        handler: function() {
                            me.close();
                        }
                    },
                    {
                        xtype: "button",
                        ui: "soft-green",
                        text: "Send",
                        iconCls: "x-fa fa-paper-plane",
                        handler: function() {
                            me.onSendBtnClick();
                        }
                    }
                    // {
                    //     xtype: "button",
                    //     // ui: "soft-green",
                    //     text: "Send With Attachment(s)",
                    //     iconCls: "x-fa  fa-paperclip",
                    //     handler: function() {
                    //         me.onSendBtnClick();
                    //     }
                    // }
                ]
            },
            listeners: {
                show: function() {
                    me.down("#msgRecipientGrid")
                        .getStore()
                        .load();
                }
            }
        });
        me.callParent(arguments);
    }
});

Ext.define("App.view.MsgRecipientGrid", {
    extend: "Ext.grid.Panel",
    itemId: "msgRecipientGrid",
    alias: "widget.msgRecipientGrid",

    scrollable: true,
    enableColumnHide: false,

    plugins: {
        gridfilters: true
    },

    getRecipients: function() {
        var me = this;
        var recipts = [];
        selections = me.getSelection();
        selections.forEach((item, index) => {
            recipts.push(item.data.username);
        });
        return recipts;
    },

    features: [
        {
            ftype: "grouping",
            enableGroupingMenu: false,
            groupHeaderTpl: "{name}"
            //,showGroupsText: 'text'
        }
    ],
    initComponent: function() {
        var me = this;
        Ext.apply(me, {
            style: {
                "border-radius": "0px",
                "box-shadow": null
            },
            store: Ext.create("App.store.MsgRecipientStore", {
                groupField: "department",
                extraParams: {send: true}
            }),
            selModel: {
                selType: "checkboxmodel",
                checkOnly: true,
                listeners: {
                    select: function(checkmodel, record, index) {
                        r = me.getRecipients();
                        me.up("composeMessageWindow")
                            .down("#toUser")
                            .setValue(r);
                    },
                    deselect: function() {
                        r = me.getRecipients();
                        me.up("composeMessageWindow")
                            .down("#toUser")
                            .setValue(r);
                    }
                }
            },
            columns: [
                {
                    text: "Recipient",
                    dataIndex: "username",
                    // flex: 1,
                    filter: { type: "string" },
                    width: 115,
                    renderer: function(value, metaData, record, row, col, store, grid) {
                        if (metaData) metaData.tdAttr = 'data-qtip="' + value + '"';
                        return value;
                    }
                }
            ]
        });
        me.callParent(arguments);
    }
});
