/**
 * Project: AMDA-NG
 * Name: EpnTapUI.js
 * @class amdaUI.EpnTapUI
 * @extends Ext.tab.Panel
 * @author Nathanael JOURDANE
 * 24/10/2016: file creation
 */

/**
`productTypesStore`: An ExtJS Store containing the list of the different data product types defined on all granules, on
all available EPN-TAP services (defined in `generic_data/EpnTapData/metadata.json`, updated periodically with a cron
script).

This list is used to fill the `productTypeCB` combo box, which is initilized in `EpnTapModule` at the panel creation.

- `id`: the data product type IDs, according to the EPN-TAP specification (see
		https://voparis-confluence.obspm.fr/pages/viewpage.action?pageId=1148225);
- `name`: the data product name, according to the EPN-TAP specification (ibid).

These IDs and names are hard-defined in the JSon file `generic_data/EpnTapData/dataproduct_types.json`.

Notes:
- if a granule contains a data product type which is not conform to the EPN-TAP definition (ibid), it is not displayed
in this store and an information message is displayed on the JavaScript console during the panel creation.
- if a data product type is not present in any of the granules from the EPN-TAP services, it is not present in this
store.
TODO: try "var arrayStore = Ext.create(...);"
*/
Ext.create('Ext.data.Store', {
	storeId:'productTypesStore',
	fields: ['id', 'name'],
	data: [
		{'id': 'im', 'name': 'Image'},
		{'id': 'ma', 'name': 'Map'},
		{'id': 'sp', 'name': 'Spectrum'},
		{'id': 'ds', 'name': 'Dynamic spectrum'},
		{'id': 'sc', 'name': 'Spectral cube'},
		{'id': 'pr', 'name': 'Profile'},
		{'id': 'vo', 'name': 'Volume'},
		{'id': 'mo', 'name': 'Movie'},
		{'id': 'cu', 'name': 'Cube'},
		{'id': 'ts', 'name': 'Time series'},
		{'id': 'ca', 'name': 'Catalogue'},
		{'id': 'ci', 'name': 'Catalogue item'}
	]
});

/**
`targetNamesStore`: An ExtJS Store containing the list of the different target names defined on all granules, on
all available EPN-TAP services (defined in `generic_data/EpnTapData/metadata.json`, updated periodically with a cron
script), which match with the selected data product and target class.

This list is used to fill the `targetNameCB` combo box, which is updated by `EpnTapModule` each time a new target class
(or, by transitivity, product type) is selected.

- `id`: the target name in lowercase, with the underscore between each word;
- `name`: the target name, capitalized with spaces between each word (done `EpnTapModule.prettify()`).
*/
Ext.create('Ext.data.Store', {
	storeId: 'targetNamesStore',
	fields: ['id', 'name', 'type', 'parent', 'aliases'],
	proxy: {
		type: 'ajax',
		url: 'php/epntap.php',
		extraParams : { action: 'resolver' }
	}
});

/**
`servicesStore`: An ExtJS Store containing the list of the EPN-TAP services (defined in
`generic_data/EpnTapData/metadata.json`, updated periodically with a cron script), which contains at least one granule
matching with the granules filter (the selected data product type, target class and target name).

This list is used to fill the `servicesGrid` table, which is updated by `EpnTapModule` each time a new target name
(or, by transitivity, target class or product type) is selected.

- `id`: the database name of the service, according to the `table_name` column from the `rr.res_table` in the
		registry database;
- `nbResults`: the number of granules matching with the granules filter for this service;
- `shortName`: the service short name, according to the `short_name` column from the `rr.resource` table in the registry
		database;
- `title`: the service title, according to the `res_title` column from the `rr.resource` table in the registry database;
- `accessURL`: the service access URL, according to the `access_url` column from the `rr.interface` table in the
		registry database.
*/
Ext.create('Ext.data.Store', {
	storeId: 'servicesStore',
	fields: [
		{name: 'id', type: 'string'},
		{name: 'short_name', type: 'string'},
		{name: 'res_title', type: 'string'},
		{name: 'ivoid', type: 'string'},
		{name: 'access_url', type: 'string'},
		{name: 'table_name', type: 'string'},
		{name: 'content_type', type: 'string'},
		{name: 'creator_seq', type: 'string'},
		{name: 'content_level', type: 'string'},
		{name: 'reference_url', type: 'string'},
		{name: 'created', type: 'date', dateFormat: 'c'},
		{name: 'updated', type: 'date', dateFormat: 'c'},
		{name: 'nb_results', type: 'integer'}
	],
	proxy: {
		type: 'ajax',
		url: 'php/epntap.php',
		extraParams : { action: 'get_services' }
	}
});

/**
`granulesStore`: An ExtJS Store containing the list of granules of the selected service (on `servicesGrid`), which match
with the granules filter (the selected data product type, target class and target name).

This list is used to fill the `granulesGrid` table, which is updated by `EpnTapModule` each time a new service is
selected.

- `num`: the line number, according to the order of the query response and the current page (see `currentPageLb`);
- `dataproduct_type`: the dataproduct_type EPN-TAP parameter, as defined in
	https://voparis-confluence.obspm.fr/display/VES/EPN-TAP+V2.0+parameters.
- `target_name`: the target_name EPN-TAP parameter (ibid);
- `time_min`: the time_min EPN-TAP parameter (ibid);
- `time_max`: the time_max EPN-TAP parameter (ibid);
- `access_format`: the access_format EPN-TAP parameter (ibid);
- `granule_uid`: the granule_uid EPN-TAP parameter (ibid);
- `access_estsize`: the access_estsize EPN-TAP parameter (ibid);
- `access_url`: the access_url EPN-TAP parameter (ibid);
- `thumbnail_url`: the thumbnail_url EPN-TAP parameter (ibid).
*/
Ext.create('Ext.data.Store', {
	storeId:'granulesStore',
	fields:['num', 'dataproduct_type', 'target_name', 'time_min', 'time_max', 'access_format', 'granule_uid', 'access_estsize', 'access_url', 'thumbnail_url']
});

/**
`EpnTapUI`: The view of the AMDA EPN-TAP module, allowing the user to query and display granules information from
EPN-TAP services.

Note: The controller part of this module is defined in `js/app/controller/EpnTapModule`.
*/
Ext.define('amdaUI.EpnTapUI', {
	extend: 'Ext.panel.Panel',
	alias: 'widget.panelEpnTap',
	requires: ['amdaUI.IntervalUI'],

	/**
	Method constructor, which basically call the `init()` method to create the EpnTap panel.
	*/
	constructor: function(config) {
		this.init(config);
		this.callParent(arguments);
	},

	/**
	Create all the EpnTapPanel UI elements, and apply the AMDA module `config` (which includes the created items).

	When the panel is correctly rendered, the panel triggers `EpnTapModule.onWindowLoaded()`.

	Note: All the UI elements creation are defined as functions in this init method and not as methods in order to make
	them private (ie. to avoid `EpnTapUI.createServicesGrid();`, which doesn't make sense).
	*/
	init: function(config) {
		var myConf = {
			id: 'epntapTab',
			title: 'EPN-TAP',
			layout: 'fit',
			items: [{
				xtype: 'container',
				layout: { type: 'vbox', pack: 'start', align: 'stretch'},
				items: [
					this.createServiceFilterPanel(),
					this.createGridsPanel()
				]
			}]
		};
		Ext.apply(this, Ext.apply(arguments, myConf));
	},

	/***************************
	*** Service filter panel ***
	***************************/

	/**
	Create `epnTapServiceFilterPanel`, an ExtJS Panel containing two containers:
	- the left container, containing the combo boxes (for product type, target class and target name)
		and the navigation panel;
	- the right container, containing the time selector.
	*/
	createServiceFilterPanel: function() {
		return {
			xtype: 'panel',
			id: 'epnTapServiceFilterPanel',
			layout: { type: 'hbox', pack: 'start', align: 'stretch' },
			region: 'north',
			defaults: { margin: 5 },
			items: [{ // Left part
				xtype : 'container',
				flex: 3,
				items: [
					this.createTargetNameCB(),
					this.createProductTypeCB(),
					{
						xtype: 'panel',
						layout: { type: 'hbox', pack: 'start', align: 'stretch' },
						border: false,
						items: [
							this.createRowPerPageNf(),
							this.createNavigationPanel()
						]
					}
				]
			}, { // Right part
				xtype : 'form',
				id: 'epnTapIntervalSelector',
				layout: 'form',
				border: 'false',
				flex: 2,
				items: [
					this.createTimeSelector()
				]
			}]
		};
	},

	/**
	Create `epnTapProductTypeCB`, an ExtJS ComboBox, containing a list of product types as defined in
	`epnTapProductTypesStore`, which is initilized by `EpnTapModule`.

	The selection of a produt type triggers `EpnTapModule.onProductTypeCBChanged()`, which basically update
	`epnTapGranulesGrid`.
	*/
	createProductTypeCB: function() {
		return {
			xtype: 'combobox',
			id: 'epnTapProductTypeCB',
			fieldLabel: 'Product type',
			store: Ext.data.StoreManager.lookup('productTypesStore'),
			queryMode: 'local',
			valueField: 'id',
			displayField: 'name',
			maxWidth: 100,
			editable: false
		};
	},

	/**
	Create `epnTapTargetNameCB`, an ExtJS ComboBox, containing a list of target names corresponding to the selected
	target class, as defined in `targetNamesStore`, which is initilized by `EpnTapModule`.

	The selection of a target name triggers `EpnTapModule.onTargetNameCBChanged()`, which basically updates
	`granulesGrid`.
	*/
	createTargetNameCB: function() {
		return {
			xtype: 'combobox',
			id: 'epnTapTargetNameCB',
			fieldLabel: 'Target name',
			emptyText: 'Earth, Saturn, 67P, ...',
			store: Ext.data.StoreManager.lookup('targetNamesStore'),
			queryMode: 'remote',
			queryParam: 'input',
			displayField: 'name',
			valueField: 'id',
			maxWidth: 100,
			minChars: 2,
			hideTrigger: true,
			listConfig: {
				getInnerTpl: function() {
					return '<div data-qtip="<h3>{name}</h3><p>type: {type}</p><p>parent: {parent}</p><p>aliases:</p><ul>{aliases}</ul>">{name}</div>';
				}
			},
			listeners: {
				render: function(c) {
					new Ext.ToolTip({
						target: c.getEl(),
						html: 'Type a text then select the correct target.'
					});
				}
			}
		};
	},

	/**
	Create `epnTapTimeSelector`, an IntervalUI object, allowing the user to select a time interval (by filling two
	dates and/or a duration).

	See `js/app/views/IntervalUI.js` for more information about this component.
	*/
	createTimeSelector: function() {
		return {
			xtype: 'intervalSelector',
			id: 'epnTapTimeSelector',
			durationLimit: 99999
		};
	},

	/***********************
	*** Navigation panel ***
	***********************/

	/**
	Create `epnTapRowsPerPageNf`, a ExtJS Number field, allowing the user to select the number of rows to display in
	`epnTapGranulesGrid`.

	When a new number is entered, it triggers `EpnTapModule.onRowsPerPageChanged()`.
	*/
	createRowPerPageNf: function() {
		return {
			xtype: 'numberfield',
			id: 'epnTapRowsPerPageNf',
			fieldLabel: 'Rows per page',
			margin: '4 0 4 0',
			width: 160,
			height: 20,
			value: 20,
			minValue: 1,
			maxValue: 2000
		};
	},

	/**
	Create `epnTapNavigationPanel`, an ExtJSPanel containing several elements in order to navigate through the
	different pages of the query result. If the number of results is highter than the `epnTapRowsPerPageNf` field
	value, the result appears to be displayed in different pages. This panel is used to select and display the page
	number, mainly with these following elements:
	- `epnTapFirstPageBtn`: an ExtJS Button, used to come back to the first page of result,
			handling `EpnTapModule.onFirstPageBtnClicked()`;
	- `epnTapPreviousPageBtn`: an ExtJS Button, used to come back to the previous page of result,
			handling `EpnTapModule.onPreviousPageBtnClicked()`;
	- `epnTapCurrentPageLb`: an ExtJS Label, displaying the actual current page; TODO: use a Number field instead!
	- `epnTapTotalPagesLb`: an ExtJS Label, displaying the total page number of results (according to the
	`epnTapRowsPerPageNf` field value);
	- `epnTapNextPageBtn`: an ExtJS Button, used to go to the next page of result,
			handling `EpnTapModule.onNextPageBtnClicked()`;
	- `epnTapLastPageBtn`: an ExtJS Button, used to come back to the last page of result,
			handling `EpnTapModule.onLastPageBtnClicked()`.

	Note: Pages are not actually a "graphical filter": when the user navigate through the pages, a new query is send
	to the server with the corresponding range, which improves the response time on large requests.
	*/
	createNavigationPanel: function() {
		return {
			xtype: 'panel',
			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: 'epnTapFirstPageBtn',
				text: '|<',
				tooltip: 'First page'
			}, {
				id: 'epnTapPreviousPageBtn',
				text: '<',
				tooltip: 'Previous page'
			}, {
				xtype: 'label',
				id: 'epnTapCurrentPageLb',
				tooltip: 'Current page',
				text: '-'
			}, {
				xtype: 'label',
				text: '/'
			}, {
				xtype: 'label',
				id: 'epnTapTotalPagesLb',
				tooltip: 'Total pages',
				text: '-'
			}, {
				id: 'epnTapNextPageBtn',
				text: '>',
				tooltip: 'Next page'
			}, {
				id: 'epnTapLastPageBtn',
				text: '>|',
				tooltip: 'Last page'
			}]
		};
	},

	/************
	*** Grids ***
	************/

	/**
	Create `epnTapGridsPanel`, an ExtJS Panel, containing `epnTapServicesGrid` and `epnTapGranulesGrid`.

	After the rendering of the grids, it triggers `epnTapModule.onWindowLoaded()`, which basically fill
	`epnTapServicesGrid` for the first time.
	*/
	createGridsPanel: function() {
		return {
			xtype: 'panel',
			id: 'epnTapGridsPanel',
			layout: 'fit',
			height: 400,
			region: 'center',
			items: [{
				xtype: 'container',
				layout: { type: 'hbox', pack: 'start', align: 'stretch'},
				items: [
					this.createServicesGrid(),
					this.createGranulesGrid()
				]
			}]
		};
	},


	/**
	Create `epnTapServicesGrid`, an ExtJS grid containing the EPN-TAP services matching with the filter form
	(`serviceFilterPanel`).

	For each service, this grid displays:
	- the service name;
	- the number of granules matching with the filter.

	Other informations are available through an ExtJS Tooltip, on each row:
	- short name;
	- title;
	- access URL.

	A click on a service triggers `EpnTapModule.onServiceSelected()`, which basically fills `GranulesGrid` by the
	service granules.
	*/
	createServicesGrid: function() {
		var nbResRender = function(val) {
			if(val<0 || isNaN(val)) {
				return '-';
			} else if(val >= 1000*1000) {
				return (val/(1000*1000)).toPrecision(3) + 'm';
			} else if(val >= 1000) {
				return (val/1000).toPrecision(3) + 'k';
			} else {
				return val;
			}
		};

		var epnTapServicesGrid = new Ext.grid.Panel({
			id: 'epnTapServicesGrid',
			title: 'Services',
			store: Ext.data.StoreManager.lookup('servicesStore'),
			flex: 1,
			columns: [
				{text: 'Name', dataIndex: 'short_name', flex: 3},
				{text: 'nb results', dataIndex: 'nb_results', flex: 2, renderer: nbResRender}
			],
			viewConfig: {
				getRowClass: function(record, index) {
					var nb_res = record.get('nb_results');
					if (nb_res <= 0 || isNaN(nb_res)) {
						return 'disabled_row';
					}
				}
			},
			renderTo: Ext.getBody()
		});

		Ext.create('Ext.tip.ToolTip', {
			target: epnTapServicesGrid.getView().el,
			delegate: epnTapServicesGrid.getView().itemSelector,
			trackMouse: true,
			listeners: {
				beforeshow: function updateTipBody(tooltip) {
					var column_titles = {
							'res_title': 'Title',
							'ivoid': 'ivoid',
							'access_url': 'Access URL',
							'table_name': 'Table name',
							'content_type': 'content type',
							'creator_seq': 'Creator',
							'content_level': 'Content level',
							'reference_url': 'reference URL',
							'created': 'Created on',
							'updated': 'Updated on'};
					var service = epnTapServicesGrid.getView().getRecord(tooltip.triggerElement);
					var ttContent = '<h3>' + service.get('short_name') + '</h3><ul>';
					for (var column in column_titles) {
						var col_content = service.get(column);
						if(column === 'content_level' && col_content!=='') {
							col_content = col_content.replace(/#/g, ", ");
						}
						ttContent += '<li><b>' + column_titles[column] + '</b>: ' + col_content + '</li>';
					}
					tooltip.update(ttContent + '</ul>');
				}
			}
		});

		return epnTapServicesGrid;
	},

	/**
	Create `epnTapGranulesGrid`, an ExtJS grid containing the granules of the selected service in
	`epnTapServicesGrid`.

	For each granule, this grid displays:
	- the row number;
	- the dataproduct type;
	- the target name;
	- the min and max times;
	- the format;
	- the UID (granule identifier);
	- the estimated size;
	- the URL;
	- the thumbnail.

	Each of these information are displayed in a specific rendering to improve user experience.
	For more information about these parameters, see https://voparis-confluence.obspm.fr/display/VES/EPN-TAP+V2.0+parameters.

	Other informations are available through an ExtJS Tooltip on each row:
	- currently only the granule thumbnail, in full size.

	A click on a granule triggers `EpnTapModule.onGranuleSelected()`.
	*/
	createGranulesGrid: function() {
		var txtRender = function(val) {
			return '<p style="white-space: normal;">' + val + '</p>';
		};
		var linkRender = function(val) {
			return '<a href="' + val + '">data</a>';
		};
		var imgRender = function(val) {
			return '<img width="40px height="40px" src="' + val + '">';
		};
		var dptRender = function(val) {
			console.log(Ext.data.StoreManager.lookup('productTypesStore'));
			return val;
			// (val in productTypeDict) ? '<p style="white-space: normal;">' + productTypeDict[val] + '</p>' : '<em>' + val + '</em>';
		};
		var formatRender = function(val) {
			// A dictionnary used to associate the mimetype (i.e "application/fits") to a pretty printed word (i.e "fits").
			mimetypeDict = {
				'application/fits': 'fits',
				'application/x-pds': 'pds',
				'image/x-pds': 'pds',
				'application/gml+xml': 'gml',
				'application/json': 'json',
				'application/octet-stream': 'bin, idl, envi or matlab',
				'application/pdf': 'pdf',
				'application/postscript': 'ps',
				'application/vnd.geo+json': 'geojson',
				'application/vnd.google-earth.kml+xml': 'kml',
				'application/vnd.google-earth.kmz': 'kmz',
				'application/vnd.ms-excel': 'xls',
				'application/x-asdm': 'asdm',
				'application/x-cdf': 'cdf',
				'application/x-cdf-istp': 'cdf',
				'application/x-cdf-pds4': 'cdf',
				'application/x-cef1': 'cef1',
				'application/x-cef2': 'cef2',
				'application/x-directory': 'dir',
				'application/x-fits-bintable': 'bintable',
				'application/x-fits-euro3d': 'euro3d',
				'application/x-fits-mef': 'mef',
				'application/x-geotiff': 'geotiff',
				'application/x-hdf': 'hdf',
				'application/x-netcdf': 'nc',
				'application/x-netcdf4': 'nc',
				'application/x-tar': 'tar',
				'application/x-tar-gzip': 'gtar',
				'application/x-votable+xml': 'votable',
				'application/x-votable+xml;content=datalink': 'votable',
				'application/zip': 'zip',
				'image/fits': 'fits',
				'image/gif': 'gif',
				'image/jpeg': 'jpeg',
				'image/png': 'png',
				'image/tiff': 'tiff',
				'image/x-fits-gzip': 'fits',
				'image/x-fits-hcompress': 'fits',
				'text/csv': 'csv',
				'text/html': 'html',
				'text/plain': 'txt',
				'text/tab-separated-values': 'tsv',
				'text/xml': 'xml',
				'video/mpeg': 'mpeg',
				'video/quicktime': 'mov',
				'video/x-msvideo': 'avi'
			};
			return (val in mimetypeDict) ? mimetypeDict[val] : '<em style="white-space: normal;">' + val + '</em>';
		};
		var 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';
			}
		};

		var epnTapGranulesGrid = new Ext.grid.Panel({
			id: 'epnTapGranulesGrid',
			title: 'Granules',
			store: Ext.data.StoreManager.lookup('granulesStore'),
			flex: 4,
			columns: [
				{ text: 'Num',  dataIndex: 'num', flex: 1, renderer: txtRender },
				// { text: 'Type',  dataIndex: 'dataproduct_type', flex: 2, renderer: dptRender },
				{ text: 'Target', dataIndex: 'target_name', flex: 2, renderer: txtRender },
				{ text: 'Time min', dataIndex: 'time_min', flex: 2, renderer: txtRender },
				{ text: 'Time max', dataIndex: 'time_max', flex: 2, renderer: txtRender },
				// { text: 'Format', dataIndex: 'access_format', flex: 2, renderer: formatRender },
				{ text: 'uid', dataIndex: 'granule_uid', flex: 2, renderer: txtRender },
				{ text: 'Size', dataIndex: 'access_estsize', flex: 1, renderer: sizeRender },
				{ text: 'URL', dataIndex: 'access_url', flex: 1, renderer: linkRender },
				{ text: 'Thumb.', dataIndex: 'thumbnail_url', flex: 1, renderer: imgRender}
			],
			renderTo: Ext.getBody()
		});

		Ext.create('Ext.tip.ToolTip', {
			target: epnTapGranulesGrid.getView().el,
			delegate: epnTapGranulesGrid.getView().itemSelector,
			trackMouse: true,
			listeners: {
				beforeshow: function updateTipBody(tooltip) {
					var thumb = epnTapGranulesGrid.getView().getRecord(tooltip.triggerElement).get('thumbnail_url');
					tooltip.update('<img src="' + thumb + '">');
				}
			}
		});

		return epnTapGranulesGrid;
	}
});