WorkflowFormEntityMapping = function( workflowFormData ) {

	let instance = this;

	instance.flexFields = null;
	instance.contactMappingFields = null;



	instance.formId = workflowFormData.formId;
	instance.fieldDomain = workflowFormData.fieldDomain;
	instance.fieldCategory = workflowFormData.fieldCategory;

	instance.rootElement = $("<div>" );
	instance.form = $("<div>").dxForm( {
		onFieldDataChanged : function( e ) {
			instance.updateResolveStatus();
		}
	}).dxForm( "instance" );

	let mainContent = $("<div>")

    // mainContent.append( $("<p>").text( "The information from form submissions can be used to identity the person and/or the company." ));
    // mainContent.append( $("<p>").text( "To enable this match the appropriate CRM fields on the left with the form fields on the right" ));

	mainContent.append( $("<p>").css( { "font-size" : "larger" } )
		.append( $("<i>").addClass( "dx-icon-info" ) )// .css( { "vertical-align" : "middle" } )
		.append( 
			$("<span>").css( { "padding-left" : "6px"} ).text( "The information from form submissions can be used to match the submission to an existing customer and/or contact.  To enable, match the appropriate CRM fields on the left with the form fields on the right." )
		)
	);

    instance.resolutionStatus = $("<p>").text( "This form does not currently support entity resolution" );
	instance.resolutionStatus.css( { "display" : "none" } );

    mainContent.append( instance.resolutionStatus );


	instance.form.element().appendTo( mainContent );

	instance.saveButton = $("<div>").dxButton( {
		text : "Save Mapping",
		type : "default",
		disabled : true,	
		onClick : function( e ) {

			instance.save().done( function( ) {
				e.component.option( { "disabled" : true } )
				Fse.UI.toast( `Mapping Saved`, "success", 1000 );
			} );

		}
	}).dxButton( "instance" ); 

	/*
	$("<div>").css( { "margin-top" : "5px" }).dxToolbar( {
		items : [
			{
				location : "after",
				template : function() {
					return instance.saveButton.element();
				}
			}
		]
	}).appendTo( mainContent );
	*/

	instance.rootElement.dxBox( {
		direction : "col",
		items : [
			{
				baseSize : 535,
				template : function() {

					let scrollview = $("<div>").append( mainContent.css( { "padding-right" : "10px" }) );

					scrollview.dxScrollView({
						direction : "vertical"
					});

					return scrollview;
				}
			},
			{ 
				baseSize : "auto",
				template : function( ) {
				
					return $("<div>").dxToolbar( {
						items : [
							{
								location : "after",
								template : function() {
									return instance.saveButton.element();
								}
							}
						]
					})
				}

			}
		]
	});

	instance.load().done( function(  ) {
		instance.updateUI();
	});
	

}

WorkflowFormEntityMapping.prototype.constructor = WorkflowFormEntityMapping;


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

WorkflowFormEntityMapping.prototype.save = function() {

	let instance = this;

	let saveData = {
		formId : instance.formId,
		contactFieldMapping : instance.getMapping()
	}

	let savePromise = Fse.Ajax.performAction( { 
		object : "WRK.saveContactFieldMapping", 
		data : saveData
	} )
	
	savePromise.done( function( saveResult ) {
		console.log( "Done Saving" )
		console.log( saveResult );
	})

	return savePromise;

}

WorkflowFormEntityMapping.prototype.load = function() {

	let instance = this;

	let loading = $.Deferred();
	let waitingCount = 1;

	loading.progress( function() {
		waitingCount--;
		if( waitingCount == 0 ) {
			loading.resolve();
		}
	})


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

		instance.contactFieldMapping = data.contactFieldMapping;
		console.log( instance.contactFieldMapping )

		loading.notify();
	});

	if( ! instance.flexFields ) {
		waitingCount++;
		let flexFieldDataSource = Fse.Data.newDataSource( {
			object : "WRK.flexFields", objectParams : { domain : instance.fieldDomain, category : instance.fieldCategory }, paginate : false, keyField : "fieldId"
		})

		flexFieldDataSource.filter( [
			[ "type", "=", "TEXT" ],
			"or",
			[ "type", "=", "TEXTAREA" ],
			"or",
			[ "type", "=", "SELECT" ],
			"or",
			[ "type", "=", "CHECKBOX" ],
			"or",
			[ "type", "=", "RADIO" ]
		])


		flexFieldDataSource.load().done( function( data ) {
			instance.flexFields = data;
			console.log( instance.flexFields );
			loading.notify();
		})	
	}


	if( ! instance.contactMappingFields ) {
		waitingCount++;
		let contactMappingFieldsDataSource = Fse.Data.newDataSource( {
			object : "WRK.contactMappingFields", paginate : false, keyField : "fieldName" 
		})

		contactMappingFieldsDataSource.load().done( function( data ) {
			instance.contactMappingFields = data;
			console.log( instance.contactMappingFields );

			loading.notify();

		} )
	}

	return loading;
}

WorkflowFormEntityMapping.prototype.getMapping = function() {

	let instance = this;
	let mapping = {};

	let formData = instance.form.option( 'formData' );
	for( p in formData ) {
		if( formData[p] ) {
			mapping[p] = formData[p];
		}
	}

	return mapping;

}


WorkflowFormEntityMapping.prototype.updateResolveStatus = function() {

	let instance = this;

	let mapping = instance.getMapping();

	let resolvable = false;
	let mappedFields = 0;
	instance.contactMappingFields.forEach( function( cmf ) {
		resolvable = resolvable || mapping[cmf.fieldName];
		if( resolvable ) {
			mappedFields++;
		}
	})


	if( resolvable ) {
		instance.resolutionStatus.css( { color : "blue" } ).text( "This form supports entity resolution" );
	} else {

		if( mappedFields ) {
			instance.resolutionStatus.css( { color : "red" } ).text( "This form does NOT support entity resolution" );
		} else {
			instance.resolutionStatus.css( { color : "inherit" } ).text( "This form does not support entity resolution" );
		}
		
	}

}

WorkflowFormEntityMapping.prototype.updateUI = function() {

	let instance = this;


	let contactItems = [];
	let companyItems = [];

	let formItems = [
	
		{ itemType : "group", caption : "Company Fields",
			items : companyItems
		},
		{ itemType : "group", caption : "Contact Fields",
			items : contactItems
		}

	];

	instance.contactMappingFields.forEach( function( cmf ) {
		let item = {
			dataField : cmf.fieldName,
			label : { text : cmf.fieldLabel },
			editorType : "dxSelectBox",
			editorOptions : {
				dataSource : { store : { type : "array", data : instance.flexFields, key : "fieldName" } },
				displayExpr : "label",
				valueExpr : "fieldName",
				searchEnabled : true,
				searchExpr : "fieldName",
				placeholder : "not mapped",
				showClearButton : true
			}
		}

		if( cmf.crmType == "COMPANY" ) {
			companyItems.push( item );
		} else if ( cmf.crmType == "CONTACT" ) {
			contactItems.push( item );
		}

	})

	instance.form.beginUpdate();

	instance.form.option( {
		items : formItems, formData : $.extend( true, {}, instance.contactFieldMapping ),
		onFieldDataChanged : function( e ) {
			instance.saveButton.option( { "disabled" : false } );
		}
	})

	instance.form.endUpdate();

    instance.updateResolveStatus();

}