/**
 * 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:'services_store',
	fields: ['publisher', 'description', 'contributors', 'creator', 'referenceurl', 'accessurl', 'title', 'shortname', 'schema', 'identifier'],
	proxy: {
		type: 'ajax',
		url: 'generic_data/EpnTapData/EpnTapServices.json',
		reader: {type: 'json'}
	},
	autoLoad: true
});

Ext.create('Ext.data.Store', {
	storeId:'granules_store',
	fields:['type', 'target_name', 'time_min', 'time_max'],
	data: {'items': [
		{'type': 'sp', 'target_name': 'mars', 'time_min': '01/01/2012', 'time_max': '02/01/2012'},
		{'type': 'sp', 'target_name': 'mars', 'time_min': '01/01/2012', 'time_max': '02/01/2012'},
		{'type': 'im', 'target_name': 'earth', 'time_min': '01/01/2012', 'time_max': '02/01/2012'},
		{'type': 'im', 'target_name': 'earth', 'time_min': '01/01/2012', 'time_max': '02/01/2012'}
	]},
	proxy: {
		type: 'memory',
		reader: { type: 'json', root: 'items' }
	}
});

Ext.create('Ext.data.Store', {
	storeId:'productTypes_store',
	fields: ['id', 'name'],
	proxy: {
		type: 'ajax',
		url : 'generic_data/EpnTapData/EpnTapProductTypes.json',
		reader: {type: 'json'}
	},
	autoLoad: true
});

Ext.create('Ext.data.Store', {
	storeId:'targetClasses_store',
	fields: ['id', 'name'],
	proxy: {
		type: 'ajax',
		url : 'generic_data/EpnTapData/EpnTapTargetClasses.json',
		reader: {
			type: 'json'
		}
	},
	autoLoad: true
});

Ext.create('Ext.data.Store', {
	storeId: 'targetNames_store',
	fields: ['n'],
	proxy: {
		type: 'ajax',
		url : 'generic_data/EpnTapData/EpnTapTargetNames.json',
		reader: {type: 'json'}
	},
	autoLoad: true
});

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,
			allowBlank: false
		}, {
			id: 'targetClassCB',
			xtype: 'combobox',
			fieldLabel: 'Target class',
			store: Ext.data.StoreManager.lookup('targetClasses_store'),
			queryMode: 'local',
			displayField: 'name',
			valueField: 'id',
			name: 'targetClass',
			editable: false,
			allowBlank: false
		}, {
			id: 'targetNameCB',
			xtype: 'combobox',
			fieldLabel: 'Target name',
			store: Ext.data.StoreManager.lookup('targetNames_store'),
			queryMode: 'local',
			displayField: 'n',
			valueField: 'n',
			name: 'targetName',
			allowBlank: false,
			triggerAction: 'all',
			typeAhead: true,
			mode: 'remote',
			minChars: 2,
			forceSelection: true
			// listeners: {
			// 	scope: window,
			// 	'change': function(combobox, newValue, oldValue, eOpts) {
			// 		if(newValue && newValue.length >= 3) {
			// 			myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).onTargetNameUpdate(newValue);
			// 		}
			// 	}
			// }
		}]
	}, { // 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: 'Service',  dataIndex: 'shortname', flex: 2},
		{text: 'Results', dataIndex: 'nb_responses', 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);
		}
	}
}

var granulesPanel = {
	id: 'granulesPanel',
	xtype : 'grid',
	title: 'Granules',
	store: Ext.data.StoreManager.lookup('granulesStore'),
	flex: 3,
	columns: [
		{ text: 'Type',  dataIndex: 'type', flex: 1 },
		{ text: 'Target', dataIndex: 'target_name', flex: 1 },
		{ text: 'Time min', dataIndex: 'time_min', flex: 2 },
		{ text: 'Time max', dataIndex: 'time_max', flex: 2 }
	],
	listeners: {
		'cellclick': function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
			myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.epntap.id).onGranuleSelected(record.data);
		}
	}
}

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: 600,
			height: 550,
			layout: 'border',
			items: [
				serviceFilterPanel,
				mainPanel,
				infoPanel
			]
		};
		Ext.apply(this, Ext.apply(arguments, myConf));
	}
});