/**
 * 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']
});

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']
});

var serviceFilterPanel = {
	id: 'serviceFilterPanel',
	xtype: 'panel',
	region : 'north',
	layout: { type: 'hbox', pack: 'start', align: 'stretch' },
	defaults: { margin: 5 },
	items: [{ // Left part
		xtype : 'container',
		layout: 'form',
		flex: 2,
		items: [{
			id: 'productTypeCB',
			xtype: 'combobox',
			fieldLabel: 'Product type',
			store: Ext.data.StoreManager.lookup('productTypes_store'),
			queryMode: 'local',
			displayField: 'name',
			valueField: 'id',
			name: 'productType',
			editable: false,
			listeners: {
				scope: window,
				'select': function(store, records) {
					myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).onProductTypeCB();
				}
			}
		}, {
			id: 'targetClassCB',
			xtype: 'combobox',
			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();
				}
			}
		}, {
			id: 'targetNameCB',
			xtype: 'combobox',
			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();
				}
			}
		}]
	}, { // Right part
		xtype : 'container',
		layout: 'form',
		flex: 2,
		items: [{
			id: 'startTimeDF',
			xtype: 'datefield',
			fieldLabel: 'Start time',
			name: 'start_time',
			allowBlank:false
		}, {
			id: 'stopTimeDF',
			xtype: 'datefield',
			fieldLabel: 'Stop time',
			name: 'stop_time',
			allowBlank:false
		}, {
			id: 'searchServicesBtn',
			xtype: 'button',
			text: 'Search services',
			handler: function() {
				myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).onSearchBtnClicked();
			}
		}]
	}]
}

var servicesPanel = {
	id: 'servicesPanel',
	xtype : 'grid',
	title: 'Services',
	multiSelect: true,
	store: Ext.data.StoreManager.lookup('services_store'),
	flex: 1,
	columns: [
		{text: 'Name', dataIndex: 'id', flex: 1},
		{text: 'Results', dataIndex: 'nb_results', flex: 1}
	],
	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);
		}
	}
}

var txt_render = function(val) { return '<p style="white-space: normal;">' + val + '</p>'; };
var link_render = function(val) { return '<a href="' + val + '">get</a>'; };
var img_render = function(val) { return '<img src="' + val + '">' };

var granulesPanel = Ext.create('Ext.grid.Panel', {
	id: 'granulesPanel',
	title: 'Granules',
	store: Ext.data.StoreManager.lookup('granules_store'),
	flex: 3,
	cls: 'epntap_granules',
	columns: [
		{ text: 'Type',  dataIndex: 'dataproduct_type', flex: 1, renderer: txt_render },
		{ text: 'Target', dataIndex: 'target_name', flex: 2, renderer: txt_render },
		{ text: 'Time min', dataIndex: 'time_min', flex: 2, renderer: txt_render },
		{ text: 'Time max', dataIndex: 'time_max', flex: 2, renderer: txt_render },
		{ text: 'Format', dataIndex: 'access_format', flex: 2, renderer: txt_render },
		{ text: 'uid', dataIndex: 'granule_uid', flex: 2, renderer: txt_render },
		{ text: 'Size', dataIndex: 'access_estsize', flex: 2, renderer: txt_render },
		{ text: 'URL', dataIndex: 'access_url', flex: 1, renderer: link_render },
		{ text: 'Thumbnail', dataIndex: 'thumbnail_url', flex: 2, renderer: 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 tooltip = Ext.create('Ext.tip.ToolTip', {
	target: granulesPanel.getView().el,
	delegate: granulesPanel.getView().itemSelector,
	trackMouse: true,
	renderTo: Ext.getBody(),
	listeners: {
		beforeshow: function updateTipBody(tip) {
			var thumb = granulesPanel.getView().getRecord(tooltip.triggerElement).get('thumbnail_url');
			tooltip.update('<img src="' + thumb + '">');
		}
	}
});

var mainPanel = {
	id: 'mainPanel',
	xtype: 'panel',
	region: 'center',
	height: 350,
	layout: { type: 'hbox', pack: 'start', align: 'stretch' },
	items: [ servicesPanel, granulesPanel ],
	listeners: {
		afterrender: function() {
			myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).onWindowLoaded();
		}
	}
}

var infoPanel = {
	id: 'infoPanel',
	xtype : 'panel',
	region: 'south',
	title: 'Information',
	collapsible: true,
	flex: 0,
	height: 100,
	autoHide: false,
	bodyStyle: 'padding: 5px',
	iconCls: 'icon-information',
	loader: { autoLoad: true, url: helpDir + 'epnTapHOWTO' }
}

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

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

	init : function(config) {
		var myConf = {
			width: 800,
			height: 550,
			layout: 'border',
			items: [
				serviceFilterPanel,
				mainPanel,
				infoPanel
			]
		};
		Ext.apply(this, Ext.apply(arguments, myConf));
	}
});