/**
 * Project   : AMDA-NG
 * Name	  : MachineLearningUI.js
 * @class   amdaUI.MachineLearningUI
 * @extends Ext.tab.Panel
 * @brief   Machine Learning Module UI definition (View)
 * @author  Benjamin RENARD
 * @version $Id: MachineLearningUI.js 1093 2022-01-14 15:54:26Z benjamin $
 ******************************************************************************
 *	FT Id	 :   Date   : Name - Description
 ******************************************************************************
 *  :		   :14/01/2022: BRE  - file creation
 */


Ext.define('amdaUI.MachineLearningUI', {
        extend: 'Ext.container.Container',
        alias: 'widget.panelMachineLearning',

	requires: [
		'amdaModel.MLModelObject',
		'amdaModel.MachineLearningRun'
	],

	modelTpl: new Ext.XTemplate(
		'<tpl for=".">',
		'<div class="ml-model-item">{name}</div>',
		'</tpl>'
	),

	modelUI: null,
	predictionUI: null,

	runModelObj: Ext.create('amdaModel.MachineLearningRun'),

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

	selectModel: function(model) {
		var me = this;
		AmdaAction.getMLModelInfo({'id': model.get('id')}, function (result, e) {
			me.modelUI.setModel(result);
			//me.updateModelUI(result);
		});
	},

	createPredictionUI: function() {
		this.predictionUI = Ext.create('Ext.form.Panel', {
			items: [
				{
					xtype: 'datefield', name: 'start', fieldLabel: 'Start Time',
					format: 'Y-m-d\\TH:i:s'
				},
				{
					xtype: 'datefield', name: 'stop', fieldLabel: 'Stop Time',
					format: 'Y-m-d\\TH:i:s'
				}
			]
		});
		return this.predictionUI;
	},

	createFittingUI: function() {
		this.fittingUI = Ext.create('Ext.form.Panel', {
			items: [
                        ]
                });
                return this.fittingUI;
	},

	createModelUI: function() {
		var me = this;

		this.modelUI = Ext.create('Ext.panel.Panel', {
			layout: 'border',
			items: [
				{
					xtype: "component",
					id: "ml-model-info",
					region:'north',
					height: 200,
					tpl: '<span>Hello {name}</span>',
					data: {name: 'Coucou'}
				},
				{
					xtype: "tabpanel",
					region: "center",
					id: "ml-model-action",
					items: [
						{
							title: "Prediction",
							items: [
								this.createPredictionUI()
							],
							bbar: [
								'->',
								{xtype: 'button', text: 'Run Prediction', handler: this.runPredictionRequest, scope: me}
							]
						},
						{
							title: "Fitting",
							items: [
								this.createFittingUI()
							],
							bbar: [
								'->',
								{xtype: 'button', text: 'Run Fitting', handler: this.runFittingRequest, scope: me}
							]
						}
					],
					setModel: function(modelinfo) {
						me.runModelObj.set('moduleId', modelinfo.name);
						this.items.each(function(item) {
							Ext.Object.each(me.runModelObj.getData(), function(key, value) {
								if (key != 'mode') {
									var field = item.items.getAt(0).getForm().findField(key);
									if (field)
										field.setValue(value);
								}
							});
						});
					}
				}
			],
			setModel: function(modelinfo) {
				this.queryById('ml-model-info').update(modelinfo);
				this.queryById('ml-model-action').setModel(modelinfo);
			}

		});
		return this.modelUI;
	},

	runPredictionRequest: function() {
		this.runRequest('prediction');
	},

	runFittingRequest: function() {
		this.runRequest('fitting');
	},

	runRequest: function(mode) {
		switch (mode) {
			case 'fitting':
				//this.fittingUI.getForm().updateRecord(this.runModelObj);
				 myDesktopApp.errorMsg('Not available in this version');
				return;
				//break;
			case 'prediction':
				this.predictionUI.getForm().updateRecord(this.runModelObj);
				break;
		}
		this.runModelObj.set('mode', mode);
		console.log(this.runModelObj);
		AmdaAction.runMLModel(this.runModelObj.getJsonValues(), function (result, e) {
			console.log(result);
		});

	},

	getDefaultModelsDataView: function() {
		return {
			xtype: "dataview",
			store: Ext.create('Ext.data.Store', {
				model: 'amdaModel.MLModelObject',
				autoLoad: true,
				proxy: {
					type: 'direct',
					api: {read: AmdaAction.readDefaultMLModels},
					reader:
					{
						type: 'json',
						root: 'models',
						//totalProperty: 'totalCount'
					}
				}
			}),
			tpl: this.modelTpl,
			trackOver: true,
			overItemCls: 'ml-model-item-over',
			itemSelector: 'div.ml-model-item',
			autoScroll : true,
			emptyText: 'No models available',
			listeners : {
				itemclick: function( dataview, record, item, index, e, eOpts )
				{
					this.selectModel(record);
				},
				scope: this
			}

		};
	},

	getUserModelsDataView: function() {
		return {
			xtype: "dataview",
			store: Ext.create('Ext.data.Store', {
				model: 'amdaModel.MLModelObject'
			}),
			tpl: this.modelTpl,
			itemSelector: 'div.ml-model-wrap',
			emptyText: 'No models available'
		};
	},

	init: function(config) {
		var me = this;

		var myConf = {
			plain: true,
            		width: 800,
            		height: 600,
			layout: 'border',
			items: [
				{
					xtype: "panel",
					region:'west',
					width: 200,
					layout: {
						type: 'accordion',
						titleCollapse: true,
						animate: true,
						activeOnTop: true
					},
					items: [
						{
							title: 'Default Models',
							items: [
								this.getDefaultModelsDataView()
							]
						},
						{
							title: 'User Models',
							items: [
								this.getUserModelsDataView()
							]
						}
					],
				},
				{
					xtype: "panel",
					region: 'center',
					layout: 'fit',
					items: [
						this.createModelUI()
					]
				}
			]
		};
		Ext.apply (this, Ext.apply (arguments, myConf));
	}
});