Ext.define('App.view.ImageGroupWindow', {
	extend: 'Ext.window.Window',
	alias: 'widget.imageGroupWindow',
	scrollable: true,
	constrainHeader: true,
	modal: true,
	width: '95%',
	height: '95%',
	config: {
		readOnly: false,
	},
	/*
	printImage: function(){
        var me = this;
		var selectedFileIds = "";
		me.down('form').getForm().getFields().each(function(item){
			if(item.checked){
				selectedFileIds = selectedFileIds==""?item.fileId:selectedFileIds+","+item.fileId
			}
		});
		if(selectedFileIds == "")return;
        window.open( App.url("/report/preview.pdf")+'?fileIds=' + selectedFileIds);
	},
	*/
	doUncheckAll: function(){
		var me = this;
		me.query('imagefield').forEach(function(item){
			item.setChecked(false);
		});
	},
	printImage: function(){
        var me = this;
        var source = [];
		me.down('form').getForm().getFields().each(function(item){
			if(item.checked){
				source.push(item.filePath);
			}
		});
       App.printImage(source);
    },
	addImageGroup: function(refId, refType){
		var me = this;
		var url = App.url("/file/list-order.json");
		if(refType == 'customer'){
			url = App.url("/customer/image-list.json");
		}
        me.down('form').add({
			xtype: 'imageGroupView',
			url: url,
			refId: refId,
			refType: refType,
		});
    },
	doDownload: function(){
		var me = this;
        var ids = [];
        var skeys = [];
		
		me.down('form').getForm().getFields().each(function(item){
			if(item.checked){
				ids.push(item.fileId);
				skeys.push(item.skey);
			}
		});
		if(ids.length<=0){
            App.showWarning("Please select image.");
            return;
        } 
		var url = App.url("/file/dlz")+Ext.String.format('?ids={0}&skeys={1}&filename={2}',ids.join(),skeys.join(),"Image");
		window.open(url);
	},

	initComponent: function() {
		var me = this;

		Ext.apply(me, {
			tbar:[
				{
					xtype: 'button',
					text: App.localeRes('Uncheck All'),
					ui: 'soft-red',
					margin: 4,
					itemId: 'uncheckAllBtn',
					handler: function(button, event){
						me.doUncheckAll();
					}
				},
				'->',
				{
					xtype: 'button',
					text: App.localeRes('Print'),
					margin: 4,
					ui: 'soft-purple',
					iconCls: 'fas fa-print',
					itemId: 'printBtn',
					handler: function(button, event){
						me.printImage();
					}
				},
				{
					xtype: 'button',
					text: App.localeRes('Download'),
					//hidden: true,
					margin: 4,
					ui: 'soft-purple',
					iconCls: 'fas fa-download',
					itemId: 'downloadBtn',
					handler: function(button, event){
						me.doDownload();
					}
				}
			],
			items: [
				{
					xtype: 'form',
					layout: 'vbox',
					defaults:{
						width: '100%',
					},
					width: '100%',
				}
			],
			listeners: {
				show: function () {
                    if(me.params && me.params.orders){
						var p = me.params.orders;
                        for(var i=0; i<p.ids.length; i++){
							me.addImageGroup(p.ids[i], p.refType);
							if(i == 2){
								if(me.params.custId){
									me.addImageGroup(me.params.custId, 'customer');
								}
							}
						}
						if(p.ids.length<3 && me.params.custId){
							me.addImageGroup(me.params.custId, 'customer');
						}
                    }
                },
				close: function(window, eOpts) {
					if (me.callbackOnClose) {
						me.callbackOnClose();
					}
				},
			},
		});
		me.callParent(arguments);
	}

});

Ext.define('App.view.ImageGroupView', {
	extend: 'Ext.form.Panel',
	alias: 'widget.imageGroupView',

	bodyPadding: 10,
	buttonAlign: 'left',

	loadPanel: function(){
        var me = this;
        Ext.Ajax.request({
            url: me.url,
            params: { 
				refId: me.refId,
				id: me.refId,
				refType: me.refType
            },
            success: function(response, opts) {
                var result = Ext.decode(response.responseText);
				me.down('fieldset').removeAll(true);
				if(result.title)
					me.down('fieldset').setTitle(result.title);
				if(result.records && result.records.length > 0){
					result.records.forEach(function(item, index, array) {
						me.down('fieldset').add({
							xtype: 'imagefield',
							name: item.filename,
							thumbnailPath: App.url("/file/thumbnail/"+item.id+"/"+item.skey+"/"+item.filename),
							path: App.url("/file/dl/"+item.id+"/"+item.skey+"/"+item.filename),
							imageWidth: item.imageWidth,
							imageHeight: item.imageHeight,
							fileId: item.id,
							skey: item.skey,
						});
					});
					me.setHidden(false);
				}else{
					me.setHidden(true);
				}
            },
            failure: function(response, opts) {
                App.showError('Message : ' + response.status);
            },
            scope: this
        });
    },

	initComponent: function() {
		var me = this;

		Ext.apply(me, {
			items: [{
				xtype: 'fieldset',
				layout: {
					type: 'column',
				},
				title: '',
				items: []
			}]
		});
		me.callParent(arguments);
		me.loadPanel();
	}

});