WorkflowFormRecipients = function( workflowFormData ) {

	let instance = this;
	instance.formId = workflowFormData.formId;
	instance.rootElement = $("<div>").addClass( "WorkflowFormRecipients" );

	//console.log( workflowFormData );

	let ready = $.Deferred();

	instance.flexFields = null;
	instance.users = null;
	instance.routing = [];

	ready.progress( function() {

		if( instance.flexFields && instance.users ) {
			ready.resolve();
		}

	})

	ready.done( function() {

		instance.resetRouting();
		instance.createUI();

		instance.load();

	})


	let flexFieldDS = Fse.Data.newDataSource( { object : "WRK.flexFields", keyField : "fieldId", objectParams : { domain : workflowFormData.fieldDomain }, paginate : false } );

	flexFieldDS.filter( [ "category", "=", workflowFormData.fieldCategory ])
	flexFieldDS.load().done( function( flexFields ) {
		//console.log( "flexFields", flexFields)
		instance.flexFields = flexFields;
		ready.notify();

	
	})

	let usersDS = Fse.Data.newDataSource( { object : "SEC.users", keyField : "fspro_userId", paginate : false } );
	usersDS.load().done( function( users ) {
		instance.users = users;
		ready.notify();
	})



}


WorkflowFormRecipients.prototype.constructor = WorkflowFormRecipients;

WorkflowFormRecipients.prototype.element = function() {
	return this.rootElement;
}

WorkflowFormRecipients.prototype.createUI = function() {

	let instance = this;


	
	instance.saveButton = $("<div>").dxButton( {
		text : "Save", type : "default", 
		disabled : true,
		onClick : function( e ) {
			instance.save().done( function() {
				Fse.UI.toast( `Routing Saved`, "success", 1000 );
			});
		}
	}).dxButton( "instance" );


	let formItems =  [

		{ itemType : "group", caption : "Default routing", 
			items : [
				{ 
					itemType : "group", colCount : 3, label : { text : "All Submissions", showColon : false  },
					items : [
						{ dataField : "toList", label : { text : "TO" }, 
						editorType : "dxDropDownBox",
						editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
							dataSource : new DevExpress.data.DataSource( {	store : { type : "array", data : instance.users, key : "fspro_userId" }} ),
							searchExpr : "fullName",
							searchMode : "contains",
							displayExpr : "fullName",
							multipleSelectedDisplay : "Multiple Recipients Selected",
							keyExpr : "fspro_userId",
							title : "Select Recipients"
						}) },
						{ dataField : "ccList", label : { text : "CC" }, 
						editorType : "dxDropDownBox",
						editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
							dataSource : new DevExpress.data.DataSource( {	store : { type : "array", data : instance.users, key : "fspro_userId" }} ),
							searchExpr : "fullName",
							searchMode : "contains",
							displayExpr : "fullName",
							multipleSelectedDisplay : "Multiple Recipients Selected",
							keyExpr : "fspro_userId",
							title : "Select Recipients"
						}) },
						{ dataField : "bccList", label : { text : "BCC" },  
						editorType : "dxDropDownBox",
						editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
							dataSource : new DevExpress.data.DataSource( {	store : { type : "array", data : instance.users, key : "fspro_userId" }} ),
							searchExpr : "fullName",
							searchMode : "contains",
							displayExpr : "fullName",
							multipleSelectedDisplay : "Multiple Recipients Selected",
							keyExpr : "fspro_userId",
							title : "Select Recipients"
						}) }
		
					]
				}
			]
		}

	];

	instance.flexFields.forEach( function( ff ) {

		if( ff.type != "RADIO" && ff.type != "SELECT" ) return;

		if( ! ff.lookupValues || ff.lookupValues.length == 0 ) return;

		let recipientFields = [];

		ff.lookupValues.forEach( function( lv ) {
			recipientFields.push( {
				itemType : "group", label : { text : lv.text, showColon : false  }, colCount : 3,
				items : [
					{ dataField : `${ff.category}_${ff.name}|${lv.value}|toList`, 
					label : { text : "TO" } ,
					editorType : "dxDropDownBox",
					editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
						dataSource : new DevExpress.data.DataSource( {	store : { type : "array", data : instance.users, key : "fspro_userId" }} ),
						searchExpr : "fullName",
						searchMode : "contains",
						displayExpr : "fullName",
						multipleSelectedDisplay : "Multiple Recipients Selected",
						keyExpr : "fspro_userId",
						title : "Select Recipients"
					})
					},
					{ dataField : `${ff.category}_${ff.name}|${lv.value}|ccList`, label : { text : "CC" }, 
					editorType : "dxDropDownBox",
					editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
						dataSource : new DevExpress.data.DataSource( {	store : { type : "array", data : instance.users, key : "fspro_userId" }} ),
						searchExpr : "fullName",
						searchMode : "contains",
						displayExpr : "fullName",
						multipleSelectedDisplay : "Multiple Recipients Selected",
						keyExpr : "fspro_userId",
						title : "Select Recipients"
					})
					},
					{ dataField : `${ff.category}_${ff.name}|${lv.value}|bccList`, label : { text : "BCC" }, 
					editorType : "dxDropDownBox",
					editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
						dataSource : new DevExpress.data.DataSource( {	store : { type : "array", data : instance.users, key : "fspro_userId" }} ),
						searchExpr : "fullName",
						searchMode : "contains",
						displayExpr : "fullName",
						multipleSelectedDisplay : "Multiple Recipients Selected",
						keyExpr : "fspro_userId",
						title : "Select Recipients"
					})
					}
				]
			})
		})
			
		formItems.push( {
			itemType : "group", caption : `by ${ff.label}`,
			items : recipientFields
		})


	})


	formItems.push( 

		{
			itemType : "group", caption : " ", colCount : 2,
			items : [
				{ dataField : "approverUserId", label : { text : "Submission Approver" }, editorType : "dxSelectBox",
				editorOptions : {
				  showClearButton : true,
				  dataSource : new DevExpress.data.DataSource( {	store : { type : "array", data : instance.users, key : "fspro_userId" }} ), // Fse.Data.newDataSource( { object : "SEC.users", keyField : "fspro_userId" } ),
				  displayExpr : "fullName",
				  valueExpr : "fspro_userId",
				  searchEnabled : true,
				  searchExpr : "fullName",
				  searchMode : "contains"
			  }},
			  {
				  dataField : "ccSubmission", label : { text : "Apply Submitter to CC on Submit" }, editorType : "dxSwitch"
			  }
	  
			]
		}


	);


	instance.form = $("<div>").dxForm( {
		items : formItems,
		onFieldDataChanged : function( e ) {
			instance.saveButton.option( { disabled : false } );
		}
	}).dxForm( "instance" );


	instance.rootElement.dxBox( {
		direction : "col",
		items : [
			{
				baseSize : 535,
				template : function() {
					return $("<div>").append( instance.form.element() ).dxScrollView( {} );
				}
			},
			{ 
				baseSize : "auto",
				template : function( ) {
				
					return $("<div>").dxToolbar( {
						items : [
							{ location : "after" , template : function() { return instance.saveButton.element()  }}
						]
					}).css( { "xmargin-top" : "5px" }  );
				}

			}
		]
	})

}


WorkflowFormRecipients.prototype.save = function() {

	let instance = this;

	let vr = instance.form.validate();
	if( ! vr.isValid ) {
		return $.Deferred().reject();
	}

	let saveData = instance.form.option( "formData" );

	let savePromise = Fse.Ajax.performAction( { object : "WRK.saveFormRecipients", data : saveData })
	
	savePromise.done( function( result ) {
		instance.load();
	})

	return savePromise;


}

WorkflowFormRecipients.prototype.resetRouting = function() {

	let instance = this;

	instance.flexFields.forEach( function( ff ) {
		//console.log( "FF", ff );
		if( ff.type != "RADIO" && ff.type != "SELECT" ) return;
		if( ! ff.lookupValues || ff.lookupValues.length == 0 ) return;
		ff.lookupValues.forEach( function( lv ) {
			//console.log( "LV", lv );
			instance.routing[`${ff.fieldName}|${lv.value}|toList`] = [];
			instance.routing[`${ff.fieldName}|${lv.value}|ccList`] = [];
			instance.routing[`${ff.fieldName}|${lv.value}|bccList`] = [];
		})
	})

}

WorkflowFormRecipients.prototype.load = function() {

	let instance = this;

	instance.approverUserId = null;
	instance.toRecipients = [];
	instance.ccRecipients = [];
	instance.bccRecipients = [];

	let loadPromise = $.Deferred();

	let recipientsReady = false;
	let formReady = false;

	loadPromise.progress( function() {

		if( recipientsReady && formReady ) {
			loadPromise.resolve();
		}

	})


	let formDataStore = Fse.Data.newDataSource( { object : "WRK.forms", keyField : "formId" } ).store();
	formDataStore.byKey( instance.formId ).done( function( data )  {


		instance.ccSubmission = data.ccSubmission;
		formReady = true;
		loadPromise.notify();

	})




	let dataSource = Fse.Data.newDataSource( { object : "WRK.formRecipients", paginate : false, objectParams : { formId : instance.formId }  });
	dataSource.load().done( function( data ) {

		instance.resetRouting();

		data.forEach( function( recipient ) {
			switch( recipient.recipientType ) {

				case "APPROVER" :
					instance.approverUserId = recipient.recipientUserId;
				break;

				case "TO" :
					instance.toRecipients.push( recipient.recipientUserId );
				break;

				case "CC" :
					instance.ccRecipients.push( recipient.recipientUserId );
				break;

				case "BCC" :
					instance.bccRecipients.push( recipient.recipientUserId );
				break;

				case "RTO" :
				case "RCC" :
				case "RBCC" :

					if( recipient.sourceFieldName || recipient.sourceFieldValue ) {
						let suffix = "toList";
						if( recipient.recipientType == "RCC" ) {
							suffix = "ccList";
						} else if( recipient.recipientType == "RBCC" ) {
							suffix = "bccList";
						}

						let recipientField = `${recipient.sourceFieldName}|${recipient.sourceFieldValue}|${suffix}`;
						let users = instance.routing[recipientField];
						if( users ) {
							users.push( recipient.recipientUserId )
						}

					}

				break;
			}
		})

		recipientsReady = true;
		loadPromise.notify();


	})

	loadPromise.done( function() {


		let formData = { 
			formId : instance.formId,
			approverUserId : instance.approverUserId, 
			ccSubmission : instance.ccSubmission == 'Y' ? true : false,
			toList : instance.toRecipients,
			ccList : instance.ccRecipients,
			bccList : instance.bccRecipients
		}


		//console.log( "Routing", instance.routing );
		for( r in instance.routing ) {
			let fieldValue = instance.routing[r];
			formData[r] = fieldValue;
		}

		//console.log( instance.toRecipients );
		//console.log( "formData", formData );

		instance.form.option( "formData", formData );

		instance.form.repaint();

		instance.saveButton.option( { disabled : true } );

	})


	return loadPromise;

}

/*
WorkflowFormRecipients.prototype.addUsers = function( onAdd ) {

	let instance = this;

	let popup = null;
	let userList = null;

	let selectionCountElement = $("<div>");

	let addButton = $("<div>").dxButton( {
			text : "Add Selected",
			type : "default",
			dislabled : true,
			onClick : function( e ) {
				onAdd( userList.option( "selectedItems" ) )
				popup.hide();
			}
	}).dxButton( "instance" );

	userList = $("<div>").dxList( {
		dataSource : Fse.Data.newDataSource( { object : "SEC.users", keyField : "fspro_userId" } ),
		pageLoadMode : "scrollBottom",
		displayExpr : "fullName",
		keyExpr : "fspro_userId",
		searchEnabled : true,
		searchExpr : "fullName",
		searchMode : "contains",
		selectionMode : "multiple",
		showSelectionControls : true,
		onOptionChanged : function( e ) {
			if( e.name == "selectedItems" ) {
				if( e.value && e.value.length ) {
					selectionCountElement.text( `${e.value.length} users selected` );
					addButton.option( "disabled", false );
				} else {
					selectionCountElement.empty();
					addButton.option( "disabled", true );
				}
			}
		}
	}).dxList( "instance" );

	popup = $("<div>").dxPopup( {

		title : "Add Users",
		hideOnOutsideClick : true,
		width : 400,
		height : 400,

		contentTemplate : function() {

			return userList.element();

		},

		toolbarItems : [
			{ toolbar : "bottom",
			location : "before",
			template : function() {
				return selectionCountElement;
			}
			},
			{ toolbar : "bottom",
				location : "after",
				template : function() {
				return addButton.element();
				}
			}
		],

		onHidden : function( e ) {
			e.component.element().remove();
			e.component.dispose();
		}

	}).dxPopup( "instance" );
	popup.element().appendTo( $("body"));
	popup.show();

}
	*/