Ext.define('App.view.RemindWindow', {
	extend: 'Ext.window.Window',
	alias: 'widget.remindWindow',
	scrollable: true,
	constrainHeader: true,
	modal: true,
	width: '70%',
    height: '80%',
    layout: 'border',
    unRead: false,

    loadStore: function(){
        var me = this;
        var store = me.down('grid').getStore();
        var searchStr = me.down("remindWindow_SearchTrigger").getValue();
        Ext.apply(store.getProxy().extraParams, {
            unRead:me.unRead,
            query: searchStr,
        });

        store.loadPage(1, {
            params: { start: 0 },
            callback: function (records, operation, success) {
                me.down('grid').getSelectionModel().deselectAll();
            }
        });
    },

    updateReadTime: function(){
        var me = this;
        var selectedRecord = me.down('grid').selModel.getSelection();
        var ids = [];
        selectedRecord.forEach(function(item){
            ids.push(item.get('id'));
        });
        if(ids.lenght==0) return;
        Ext.Ajax.request({
            url: App.url("/message/update-readtime.json"),
            params: { 
                ids: ids
            },
            success: function(response, opts) {
                me.loadStore();
            },
            failure: function(response, opts) {
                App.showError('Message : ' + response.status);
            },
            scope: this
        });

    },

	initComponent: function() {
		var me = this;
        me.items= [
            {
                xtype: 'container',
                region:'west',
                layout: 'vbox',
                width: 100,
                padding: 5,
                items: [
                    {
                        xtype: 'segmentedbutton',
                        vertical: true,
                        width: '100%',
                        defaults:{
                            ui: 'plain-toolbar',
                            margin: 15
                        },
                        items:[
                            {
                                text: App.localeRes("All"),
                                pressed: true,
                            },
                            {
                                text: App.localeRes("New"),
                            },
                        ],
                        listeners: {
                            toggle: function(container, button, pressed){
                                me.unRead=button.getText() == App.localeRes("New");
                                me.loadStore();
                            }
                        }
                    }
                ]
            },
            {
                xtype: 'grid',
                margin: 4,
                region: 'center',
                selModel: {
                    selType: 'checkboxmodel',
                    injectCheckbox:"last",
                    mode: 'MULTI',
                 },

                 viewConfig : {
                    enableTextSelection: true
                },

                tbar: [
                    {
                        xtype: 'remindWindow_SearchTrigger',
                        emptyText: App.localeRes('Search'),
                        flex: 1,
                        margin: '0 0 16 16',
                        doSearch: function(){
                            me.loadStore();
                        },
                        listeners: {
                            specialkey: function(field, e) {
                                if (e.getKey() == e.ENTER) me.loadStore();
                            }
                        }
                    },
                    '->',
                    {
                        xtype: 'button',
                        text: App.localeRes('Mark Read'),
                        ui: 'soft-green',
                        handler: function (button, event) {
                            me.updateReadTime();
                        }
                    },   
                ],
                bbar: {
                    xtype: 'pagingtoolbar',
                    displayInfo: true
                },
                store: Ext.create('App.store.RemindStore', {}),
                columns: [
                    {
                        xtype: 'rownumberer',
                        text: '',
                        width: 50,
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'created',
                        text: App.localeRes('Date'),
                        width: 150,
                        renderer: function (value, metaData, record, row, col, store, grid) {
                            if(!record.get('readTime')) 
                                return '<b>'+App.convertTimestampToDateTime(value)+'</b>';
                            return App.convertTimestampToDateTime(value);
                        },
                        
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'content',
                        flex: 1,
                        text: App.localeRes('Content'),
                        renderer: function (value, metaData, record, row, col, store, grid) {
                            if(!value) return "";
                            if(!record.get('readTime')) 
                                return '<b>' + App.nl2br(value) + '<b/>';
                            return App.nl2br(value);
                        }
                    },
                ],
            }
        ];
        me.listeners= {
            close: function(window, eOpts) {
                if (me.callbackOnClose) {
                    me.callbackOnClose();
                }
            },
        },
        me.callParent(arguments);
        me.loadStore();
	}

});


Ext.define('Fiddle.view.RemindWindow_SearchTrigger', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.remindWindow_SearchTrigger',

    requires: [
         'Ext.form.trigger.Trigger'
    ],

    defaultListenerScope: true,

    triggers: {
        search: {
            handler: function (field, trigger, e) {
                this.setFilter(this.up().dataIndex, this.getValue());
            },
            cls: 'x-form-search-trigger'
        },
        clear: {
            handler: function (field, trigger, e) {
                this.setValue('');
                if (!this.autoSearch) this.setFilter(this.up().dataIndex, '');
            },
            cls: 'x-form-clear-trigger'
        }
    },
    listeners: {
        render: 'onTextfieldRender',
        change: 'onTextfieldChange'
    },

    onTextfieldRender: function (component, eOpts) {
        var me = this;
        me.ownerCt.on('resize', function () {
            me.setWidth(this.getEl().getWidth());
        });
    },

    onTextfieldChange: function (field, newValue, oldValue, eOpts) {
        if (this.autoSearch) this.setFilter(this.up().dataIndex, this.getValue());
    },

    setFilter: function (filterId, value) {
        if(this.doSearch){
            this.doSearch();
        }
    }

});