/**
 * 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:'productTypesStore',
	fields: ['id', 'name']
});

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

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

Ext.create('Ext.data.Store', {
	storeId: 'servicesStore',
	fields: ['id', 'nbResults', 'shortName', 'title', 'accessURL']
});

Ext.create('Ext.data.Store', {
	storeId:'granulesStore',
	fields:['product_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',

	txtRender: function(val) {
		return '<p style="white-space: normal;">' + val + '</p>';
	},
	linkRender: function(val) {
		return '<a href="' + val + '">data</a>';
	},
	imgRender: function(val) {
		return '<img width="40px height="40px" src="' + val + '">';
	},
	dptRender: function(val) {
		var productTypeDict = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).productTypeDict;
		return (val in productTypeDict) ? '<p style="white-space: normal;">' + productTypeDict[val] + '</p>' : '<em>' + val + '</em>';
	},
	formatRender: function(val) {
		var mimetypeDict = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).mimetypeDict;
		return (val in mimetypeDict) ? mimetypeDict[val] : '<em style="white-space: normal;">' + val + '</em>';
	},
	sizeRender: 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) {

		var epnTapModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id);

		// *** Grids ***

		this.servicesGrid = new Ext.grid.Panel({
			id: 'servicesGrid',
			title: 'Services',
			store: Ext.data.StoreManager.lookup('servicesStore'),
			flex: 1,
			columns: [
				{text: 'Name', dataIndex: 'id', flex: 3},
				{text: 'Results', dataIndex: 'nbResults', flex: 2}
			],
			renderer: function(value, metadata,record) { return getExpandableImage(value, metadata,record); },
			listeners: {
				'cellclick': function(grid, td, cellIndex, record) {
					epnTapModule.onServiceSelected(record.data['id']);
				}
			},
			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 ttContent = '<h3>' + service.get('shortName') + '</h3>';
					ttContent += '<p>' + service.get('title') + '</p>';
					ttContent += '<p>' + service.get('accessURL') + '</p>';
					tooltip.update(ttContent);
				}
			},
			renderTo: Ext.getBody()
		});

		this.granulesGrid = new Ext.grid.Panel({
			id: 'granulesGrid',
			title: 'Granules',
			store: Ext.data.StoreManager.lookup('granulesStore'),
			flex: 5,
			columns: [
				{ text: 'Type',  dataIndex: 'product_type', flex: 2, renderer: this.dptRender },
				{ text: 'Target', dataIndex: 'target_name', flex: 2, renderer: this.txtRender },
				{ text: 'Time min', dataIndex: 'time_min', flex: 2, renderer: this.txtRender },
				{ text: 'Time max', dataIndex: 'time_max', flex: 2, renderer: this.txtRender },
				{ text: 'Format', dataIndex: 'access_format', flex: 2, renderer: this.formatRender },
				{ text: 'uid', dataIndex: 'granule_uid', flex: 2, renderer: this.txtRender },
				{ text: 'Size', dataIndex: 'access_estsize', flex: 1, renderer: this.sizeRender },
				{ text: 'URL', dataIndex: 'access_url', flex: 1, renderer: this.linkRender },
				{ text: 'Thumb.', dataIndex: 'thumbnail_url', flex: 1, renderer: this.imgRender}
			],
			listeners: {
				'cellclick': function(grid, td, cellIndex, record) {
					epnTapModule.onGranuleSelected(record.data['id']);
				}
			},
			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('productTypesStore'),
			queryMode: 'local',
			displayField: 'name',
			valueField: 'id',
			name: 'productType',
			editable: false,
			listeners: {
				'select': function(combo) {
					epnTapModule.onProductTypeCBChanged(combo.value);
				}
			}
		});

		this.targetClassCB = new Ext.form.field.ComboBox({
			id: 'targetClassCB',
			fieldLabel: 'Target class',
			store: Ext.data.StoreManager.lookup('targetClassesStore'),
			queryMode: 'local',
			displayField: 'name',
			valueField: 'id',
			name: 'targetClass',
			editable: false,
			listeners: {
				'select': function(combo) {
					epnTapModule.onTargetClassCBChanged(combo.value);
				}
			}
		});

		this.targetNameCB = new Ext.form.field.ComboBox({
			id: 'targetNameCB',
			fieldLabel: 'Target name',
			store: Ext.data.StoreManager.lookup('targetNamesStore'),
			queryMode: 'local',
			displayField: 'name',
			valueField: 'id',
			name: 'targetName',
			triggerAction: 'all',
			typeAhead: true,
			mode: 'remote',
			minChars: 2,
			forceSelection: true,
			listeners: {
				'select': function(combo) {
					epnTapModule.onTargetNameCBChanged(combo.value);
				}
			}
		});

		// *** 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,
			listeners: {
				'select': function(dateField, value) {
					epnTapModule.onTargetNameCBChanged(value);
				}
			}
		});

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

		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', listeners: { 'select': function(elmt) { epnTapModule.onDurationChanged(elmt); } } },
			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(rowPerPageNf, newValue) {
					epnTapModule.onRowsPerPageChanged(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: 'firstPageBtn',
				text: '|<',
				tooltip: 'First page',
				handler: function() { epnTapModule.onFirstPageBtnClicked(); }
			}, {
				id: 'previousPageBtn',
				text: '<',
				tooltip: 'Previous page',
				handler: function() { epnTapModule.onPreviousPageBtnClicked(); }
			}, {
				xtype: 'label',
				id: 'currentPageLb',
				tooltip: 'Current page',
				text: '-'
			}, {
				xtype: 'label',
				text: '/'
			}, {
				xtype: 'label',
				id: 'totalPagesLb',
				tooltip: 'Total pages',
				text: '-'
			}, {
				id: 'nextPageBtn',
				text: '>',
				tooltip: 'Next page',
				handler: function() { epnTapModule.onNextPageBtnClicked(); }
			}, {
				id: 'lastPageBtn',
				text: '>|',
				tooltip: 'Last page',
				handler: function() { epnTapModule.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() { epnTapModule.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));

	}
});