/**
 * Project: AMDA-NG
 * Name: EpnTapUI.js
 * @class amdaUI.EpnTapUI
 * @extends Ext.tab.Panel
 * @brief client for EPN-TAP services (View)
 * @author Nathanael JOURDANE
 * 24/10/2016: file creation
 */

 Ext.create('Ext.data.Store', {
	storeId:'productTypes_store',
	fields: ['id', 'name']
});

Ext.create('Ext.data.Store', {
	storeId:'targetClasses_store',
	fields: ['id', 'name']
});

Ext.create('Ext.data.Store', {
	storeId: 'targetNames_store',
	fields: ['id', 'name']
});

Ext.create('Ext.data.Store', {
	storeId: 'services_store',
	fields: ['id', 'nb_results', 'shortname', 'title', 'accessurl']
});

Ext.create('Ext.data.Store', {
	storeId:'granules_store',
	fields:['dataproduct_type', 'target_name', 'time_min', 'time_max', 'access_format', 'granule_uid', 'access_estsize', 'access_url', 'thumbnail_url']
});

Ext.define('amdaUI.EpnTapUI', {
	extend: 'Ext.container.Container',
	alias: 'widget.panelEpnTap',

	txt_render: function(val) {
		return '<p style="white-space: normal;">' + val + '</p>';
	},
	link_render: function(val) {
		return '<a href="' + val + '">data</a>';
	},
	img_render: function(val) {
		return '<img src="' + val + '">';
	},
	dpt_render: function(val) {
		var dpt_dic = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).dpt_dic;
		return (val in dpt_dic) ? '<p style="white-space: normal;">' + dpt_dic[val] + '</p>' : '<em>' + val + '</em>';
	},
	format_render: function(val) {
		var mimetype_dic = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).mimetype_dic;
		return (val in mimetype_dic) ? mimetype_dic[val] : '<em style="white-space: normal;">' + val + '</em>';
	},
	size_render: function(val) {
		var size = parseInt(val);
		if (isNaN(size)) {
			return '';
		} else if (size >= 1024*1024) {
			return (size/(1024*1024)).toPrecision(3) + 'Go';
		} else if (size >= 1024) {
			return (size/1024).toPrecision(3) + 'Mo';
		} else {
			return size + 'Ko';
		}
	},

	constructor: function(config) {
		this.init(config);
		this.callParent(arguments);
	},


	init: function(config) {

		// *** Grids ***

		this.servicesGrid = new Ext.grid.Panel({
			id: 'servicesGrid',
			title: 'Services',
			store: Ext.data.StoreManager.lookup('services_store'),
			flex: 1,
			columns: [
				{text: 'Name', dataIndex: 'id', flex: 3},
				{text: 'Results', dataIndex: 'nb_results', flex: 2}
			],
			renderer: function(value, metadata,record) { return getExpandableImage(value, metadata,record); },
			listeners: {
				'cellclick': function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
					myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).onServiceSelected(record.data);
				}
			},
			renderTo: Ext.getBody()
		});

		var servicesGridView = this.servicesGrid.getView();
		this.serviceTooltip = new Ext.tip.ToolTip({
			id: 'serviceTooltip',
			target: servicesGridView.el,
			delegate: servicesGridView.itemSelector,
			trackMouse: true,
			listeners: {
				beforeshow: function updateTipBody(tooltip) {
					var service = servicesGridView.getRecord(tooltip.triggerElement);
					var tt_content = '<h3>' + service.get('shortname') + '</h3>';
					tt_content += '<p>' + service.get('title') + '</p>';
					tt_content += '<p>' + service.get('accessurl') + '</p>';
					tooltip.update(tt_content);
				}
			},
			renderTo: Ext.getBody()
		});

		this.granulesGrid = new Ext.grid.Panel({
			id: 'granulesGrid',
			title: 'Granules',
			store: Ext.data.StoreManager.lookup('granules_store'),
			flex: 5,
			cls: 'epntap_granules',
			columns: [
				{ text: 'Type',  dataIndex: 'dataproduct_type', flex: 2, renderer: this.dpt_render },
				{ text: 'Target', dataIndex: 'target_name', flex: 2, renderer: this.txt_render },
				{ text: 'Time min', dataIndex: 'time_min', flex: 2, renderer: this.txt_render },
				{ text: 'Time max', dataIndex: 'time_max', flex: 2, renderer: this.txt_render },
				{ text: 'Format', dataIndex: 'access_format', flex: 2, renderer: this.format_render },
				{ text: 'uid', dataIndex: 'granule_uid', flex: 2, renderer: this.txt_render },
				{ text: 'Size', dataIndex: 'access_estsize', flex: 1, renderer: this.size_render },
				{ text: 'URL', dataIndex: 'access_url', flex: 1, renderer: this.link_render },
				{ text: 'Thumb.', dataIndex: 'thumbnail_url', flex: 1, renderer: this.img_render}
			],
			listeners: {
				'cellclick': function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
					myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).onGranuleSelected(record.data);
				}
			},
			renderTo: Ext.getBody()
		});

		var granulesGridView = this.granulesGrid.getView();
		this.granuleTooltip = new Ext.tip.ToolTip({
			id: 'granuleTooltip',
			target: granulesGridView.el,
			delegate: granulesGridView.itemSelector,
			trackMouse: true,
			listeners: {
				beforeshow: function updateTipBody(tooltip) {
					var thumb = granulesGridView.getRecord(tooltip.triggerElement).get('thumbnail_url');
					tooltip.update('<img src="' + thumb + '">');
				}
			},
			renderTo: Ext.getBody()
		});

		// *** Service filter elements, left part ***

		this.productTypeCB = new Ext.form.field.ComboBox({
			id: 'productTypeCB',
			fieldLabel: 'Product type',
			store: Ext.data.StoreManager.lookup('productTypes_store'),
			queryMode: 'local',
			displayField: 'name',
			valueField: 'id',
			name: 'productType',
			editable: false,
			listeners: {
				scope: window,
				'change': function(cb) { myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).onProductTypeCB(cb.value); }
			}
		});

		this.targetClassCB = new Ext.form.field.ComboBox({
			id: 'targetClassCB',
			fieldLabel: 'Target class',
			store: Ext.data.StoreManager.lookup('targetClasses_store'),
			queryMode: 'local',
			displayField: 'name',
			valueField: 'id',
			name: 'targetClass',
			editable: false,
			listeners: {
				scope: window,
				'select': function(store, records) { myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).onTargetClassCB(records[0]['internalId']); }
			}
		});

		this.targetNameCB = new Ext.form.field.ComboBox({
			id: 'targetNameCB',
			fieldLabel: 'Target name',
			store: Ext.data.StoreManager.lookup('targetNames_store'),
			queryMode: 'local',
			displayField: 'name',
			valueField: 'id',
			name: 'targetName',
			triggerAction: 'all',
			typeAhead: true,
			mode: 'remote',
			minChars: 2,
			forceSelection: true,
			listeners: {
				scope: window,
				'select': function(store, records) { myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).onTargetNameCB(records[0]['internalId']);}
			}
		});

		// *** Service filter elements, right part ***

		this.startTimeDF = new Ext.form.field.Date({
			id: 'startTimeDF',
			fieldLabel: 'Start time',
			format: 'Y/m/d H:i:s',
			width: 100
		});

		this.stopTimeDF = new Ext.form.field.Date({
			id: 'stopTimeDF',
			fieldLabel: 'Stop time',
			format: 'Y/m/d H:i:s',
			width: 100
		});

		this.durationPanel = new Ext.panel.Panel({
			id: 'duration',
			layout: { type: 'hbox', pack: 'start', align: 'stretch' },
			border: false,
			defaults: { width: 60, margin: '0, 5, 0, 5', xtype: 'numberfield'},
			items: [{
				id: 'days',
				margin: '0, 5, 0, 0',
				fieldLabel: 'Duration',
				emptyText: 'Days',
				width: 170
			}, {
				id: 'hours',
				emptyText: 'Hours'
			}, {
				id: 'minutes',
				emptyText: 'Min.'
			}, {
				id: 'seconds',
				emptyText: 'Sec.'
			}]
		});

		this.rowPerPageNf = new Ext.form.field.Number({
			id: 'rowsPerPageNf',
			fieldLabel: 'Rows per page',
			margin: '4 0 4 0',
			width: 160,
			height: 20,
			value: 20,
			minValue: 1,
			maxValue: 500,
			listeners: {
				'change': function(newValue, oldValue) { myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).updateRowsPerPage(newValue); }
			}
		});

		// *** Panels ***

		this.pageSelectPanel = new Ext.panel.Panel({
			id: 'pageSelect',
			border: false,
			margin: '2 0 2 50',
			defaults: { margin: '0 5 0 5', width: 20, xtype: 'button', disabled: true},
			items: [{
				xtype: 'label',
				text: 'Page:'
			}, {
				id: 'previousPageBtn',
				text: '|<',
				handler: function() { myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).onFirstPageBtnClicked(); }
			}, {
				id: 'firstPageBtn',
				text: '<',
				handler: function() { myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).onPreviousPageBtnClicked(); }
			}, {
				xtype: 'label',
				id: 'pageLb',
				text: '0/0'
			}, {
				id: 'nextPageBtn',
				text: '>',
				handler: function() { myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).onNextPageBtnClicked(); }
			}, {
				id: 'lastPageBtn',
				text: '>|',
				handler: function() { myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).onLastPageBtnClicked(); }
			}]
		});

		this.granulePagePanel = new Ext.panel.Panel({
			id: 'granulePagePanel',
			layout: { type: 'hbox', pack: 'start', align: 'stretch' },
			border: false,
			items: [this.rowPerPageNf, this.pageSelectPanel]
		});

		this.serviceFilterPanel = new Ext.panel.Panel({
			id: 'serviceFilterPanel',
			region : 'north',
			layout: { type: 'hbox', pack: 'start', align: 'stretch' },
			defaults: { margin: 5 },
			items: [{ // Left part
				xtype : 'container',
				layout: 'form',
				flex: 2,
				items: [ this.productTypeCB, this.targetClassCB, this.targetNameCB ]
			}, { // Right part
				xtype : 'container',
				layout: 'form',
				flex: 2,
				items: [ this.startTimeDF, this.stopTimeDF, this.durationPanel, this.granulePagePanel ]
			}]
		});

		this.gridsPanel = new Ext.panel.Panel({
			id: 'gridsPanel',
			region: 'center',
			height: 350,
			layout: { type: 'hbox', pack: 'start', align: 'stretch' },
			items: [ this.servicesGrid, this.granulesGrid ],
			listeners: {
				afterrender: function() { myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).onWindowLoaded(); }
			}
		});

		this.infoPanel = new Ext.panel.Panel({
			id: 'infoPanel',
			region: 'south',
			title: 'Information',
			collapsible: true,
			flex: 0,
			height: 100,
			autoHide: false,
			bodyStyle: 'padding: 5px',
			iconCls: 'icon-information',
			loader: { autoLoad: true, url: helpDir + 'epnTapHOWTO' }
		});

		var myConf = {
			width: 1000,
			height: 550,
			layout: 'border',
			items: [ this.serviceFilterPanel, this.gridsPanel, this.infoPanel ]
		};

		Ext.apply(this, Ext.apply(arguments, myConf));

	}
});