WorkflowFormSections = function( workflowFormData ) {

	let instance = this;

	instance.flexFields = null;

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

	instance.rootElement = $("<div>").addClass( "WorkflowFormSections" )//.css( { "padding-top" : "5px", "padding-bottom" : "5px" });

	instance.fieldDataGrids = {};
    instance.newFieldSetId = 0;

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

            instance.save().done( function() {
				Fse.UI.toast( `Sections Saved`, "success", 1000 );
			});

		}
	}).dxButton( "instance" );

	instance.resetButton = $("<div>").dxButton( {
		type : "normal",
		text : "Reset",
		onClick : function( e ) {

            instance.refresh();

		}
	}).dxButton( "instance" );

    instance.addSectionButton = $("<div>").dxButton( {
        text : "Add Section",
        icon : "plus",
        onClick : function( e ) {
            instance.addSection();
        }
    }).dxButton( "instance" );



	instance.dataGrid = $("<div>").dxDataGrid( {
		showBorders : true,
		scrolling : { mode : "virtual" },
		rowAlternationEnabled : false,
		height : 480,

        editing : {
            allowUpdating : true,
            mode : "batch",
            selectTextOnEditStart : true
        },

        onOptionChanged : function( e ) {
            if( e.fullName == "editing.changes" ) {
                if( e.value.length ) {
                    instance.saveButton.option( { "disabled": false } );
                }
            }
        },

        onToolbarPreparing : function( e ) {

            // this removes all automatically added toolbar items (those provided by editing)
            e.toolbarOptions.items = [];

            e.toolbarOptions.items.push( 
				/*
                {
                    location : "before",
                    template : function() {
                        return $("<div>").text( "Sections").css( {"font-size" : "larger" })
                    }
                },
				*/
                {
                location : "before",
                template : function() {
                    return instance.addSectionButton.element();
                }
            })

        },

		columns : [
			{ dataField : "fieldSetName", caption : "Section", editorOptions : { required : true, maxLength : 100 } },
			{ dataField : "fieldSetRank", caption : "Order", dataType : "number", width : 70, editorOptions : { required : true, min : 0, max : 999 } },
            { type : "buttons", width : 30, buttons : [
                { icon : "trash",
                    onClick : function( e ) {
                        if( confirm( `Delete '${e.row.data.fieldSetName}'?` )) {

                            instance.deleteSection( e.row.data );
                        }
                    }
                }
            ]}
		],
		masterDetail : {
			enabled : true,
			autoExpandAll : true,
			template : function( container, options ) {


				let fieldsDataGrid = null;


				let removeSelectedButton = $("<div>").dxButton( {
					text : "Remove from section",
					onClick : function( e ) {

						let availableFieldsStore = instance.fieldList.getDataSource().store();
						let sectionFieldsStore = fieldsDataGrid.getDataSource().store();

						let selectedFieldIds = fieldsDataGrid.option( "selectedRowKeys" );


						selectedFieldIds.forEach( function( fieldId ) {

							availableFieldsStore.update( fieldId, { disabled : false } );
							sectionFieldsStore.remove( fieldId );

						})

						instance.fieldList.reload()
                        instance.fieldList.option( { selectedItemKeys :  selectedFieldIds } );
                        

						fieldsDataGrid.refresh();

                        instance.saveButton.option( { "disabled": false } );

					},
					disabled : true
				}).dxButton( "instance" );

				fieldsDataGrid= $("<div>").dxDataGrid( {

					selection : { mode : "multiple", showCheckBoxesMode : "always", allowSelectAll : false },
					showBorders : true,
					scrolling : { mode : "virtual" },
					rowAlternationEnabled : true,
					dataSource : { store : { type : "array", data : options.data.fields, key : "fieldId" }, sort : [ "sortRank" ] },
					columns : [
						{ name : "fieldDisplay", caption : "Field", calculateCellValue : function( itemData ) {
							return `${itemData.label}`; // [${itemData.name}]
						}},
						{ dataField : "sortRank", visible : false } // here for sorting
					],

					onToolbarPreparing : function( e ) {
						if( ! e.toolbarOptions.items ) {
							e.toolbarOptions.items = [];
						}
						e.toolbarOptions.items.push( {
							location : "after",
							template : function() {
								return removeSelectedButton.element();
							}
						})
					},

					onSelectionChanged : function( e ) {
						let selectedRowKeys = e.component.option( "selectedRowKeys" );
						if( selectedRowKeys.length ) {
							removeSelectedButton.option( { disabled : false } )
						} else {
							removeSelectedButton.option( { disabled : true } )
						}
					}
				}).dxDataGrid( "instance" ); 

				instance.fieldDataGrids[options.data.fieldSetId] = fieldsDataGrid;
 
				container.append( fieldsDataGrid.element() );


			}
		}
	}).dxDataGrid( "instance" );

	instance.fieldList = $("<div>").dxList( {
		height : 450,
		keyExpr : "fieldId",
		displayExpr : "label",
		selectionMode : "multiple",
		showSelectionControls : true,
		pageLoadMode : "scrollBottom",
		onSelectionChanged : function( e ) {

			let selectedItems = e.component.option( "selectedItems" );
			if( selectedItems.length ) {
				instance.button.option( { disabled : false } )
			} else {
				instance.button.option( { disabled : true } )
			}
		}
	}).dxList( "instance" );

	instance.button = $("<div>").dxDropDownButton( {
		displayExpr: "text",
		keyExpr : "id",
		useSelectMode: true,
		disabled : true,
        type : "success", // this doesn't seem to work
		onSelectionChanged : function( e ) {
			if( e.item.id != 0 ) {

				let fieldsDataGrid = instance.fieldDataGrids[e.item.id];

				let availableFieldsStore = instance.fieldList.getDataSource().store();
				let sectionFieldsStore = fieldsDataGrid.getDataSource().store();

				let selectedFields = instance.fieldList.option( "selectedItems" );

				selectedFields.forEach( function( field ) {

					sectionFieldsStore.insert( { fieldId : field.fieldId, label : field.label, name : field.name, sortRank : field.sortRank } );
					availableFieldsStore.update( field.fieldId, { disabled : true } );

				})

				fieldsDataGrid.getDataSource().sort( [ "sortRank" ] );
				fieldsDataGrid.refresh();
				instance.fieldList.reload();

				e.component.option( { selectedItemKey : 0, disabled : true })

                instance.saveButton.option( { "disabled": false } );

			}

		}
	}).dxDropDownButton( "instance" )

	let innerBox = $("<div>").dxBox( {


		items : [
			{ 
				ratio : 2,
				template : function( ) {
					let content = $("<div>").css( { "padding-right": "5px" });
					content.append( instance.dataGrid.element() )
					return content;
				}
			},
			{
				ratio : 1,
				template : function() {
					let content = $("<div>").css( { "padding-left" : "5px" } );

					content.append( $("<div>").text( "Available Fields").css( { "font-size" : "larger", "padding-top" : "3px", "padding-bottom" : "8px" } ));
					content.append( instance.fieldList.element().addClass("dx-theme-border-color" ).css( { "border-width" : "1px", "border-style" : "solid" }) )
					$("<div>").css( {"margin-top" : "5px"} ).dxToolbar( {
						items : [
							{ location : "after", template : function() { return instance.button.element() }}
						]
					}).appendTo( content );

					return content;
				}
			}

		]

	})// .appendTo( instance.rootElement );

	/*

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

	instance.rootElement.dxBox( {
		direction : "col",
		items : [
			{
				baseSize : 535,
				template : function() {
					return innerBox;
				}
			},
			{ 
				baseSize : "auto",
				template : function( ) {
				
					return $("<div>").dxToolbar( {
						items : [
							{ 
								location : "after",
								template : function() { return instance.resetButton.element() }
							},
							{ 
								location : "after",
								template : function() { return instance.saveButton.element() }
							}
						]
					})
				}

			}
		]
	})


    instance.refresh();
   
}

WorkflowFormSections.prototype.constructor = WorkflowFormSections;


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

WorkflowFormSections.prototype.refresh = function() {

    let instance = this;

    let refreshPromise = $.Deferred();

    instance.dataGrid.cancelEditData();

    instance.load().done( function() {

        instance.fieldDataGrids = {};

		instance.dataGrid.option( "dataSource", {
			store : { type : "array", data : instance.fieldSets, key : "fieldSetId" },
			sort : [ "fieldSetRank" ],
            filter : [ "deleted", "=", false ]
		})

		instance.flexFields.forEach( function( ff ) {
			ff.disabled = false;
		})


		let flexFieldStore = new DevExpress.data.ArrayStore( {
			data : instance.flexFields, key : "fieldId",
		})

		instance.fieldSets.forEach( function( fs ) {

			fs.fields.forEach( function( f ) {
				flexFieldStore.update( f.fieldId, { disabled : true } );
			});


		});

        instance.updateAddToSectionButton();


		instance.fieldList.option( "dataSource", {
			store : flexFieldStore,
			filter : [ "disabled", "=", false ],
			sort : [ "sortRank" ]
		})
		

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

	})

    return refreshPromise;

}


WorkflowFormSections.prototype.load = function() {

	let instance = this;

    instance.newFieldSetId = 0;

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

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

	waitingCount++;
	let fieldSetsDataSource = Fse.Data.newDataSource( { object : "WRK.fieldSets", objectParams : { formId : instance.formId }, paginate : false, keyField : "fieldSetId" } );
	fieldSetsDataSource.load().done( function( data ) {
		instance.fieldSets = data;

        instance.fieldSets.forEach( function( fs ) {
            fs.deleted = false;
            if( ! fs.fields ) {
                fs.fields = [];
            }
        })

		loading.notify();
	})


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


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

	
	return loading;
}

WorkflowFormSections.prototype.save = function() {

    let instance = this;

    let savePromise = $.Deferred();
	
	instance.dataGrid.saveEditData().done( function() {

        let saveData = {
            formId : instance.formId,
            fieldSets : instance.fieldSets
        };
    
        Fse.Ajax.performAction( { 
            object : "WRK.saveFieldSets", 
            data : saveData
        } ).done( function( saveResult ) {
            instance.refresh();
			savePromise.resolve();
        })    
    
    })

	return savePromise;


}

WorkflowFormSections.prototype.updateAddToSectionButton = function() {

    let instance = this;

   let sectionButtonItems = [ {
        text : "Add selected fields to section...", id : 0
    }];
    instance.fieldSets.forEach( function( fs ) {

        if( fs.deleted ) {
            return;
        }

        sectionButtonItems.push( {
            text : fs.fieldSetName,
            id : fs.fieldSetId
        });

    });

    instance.button.option( { items : sectionButtonItems, selectedItemKey : 0 } );

}

WorkflowFormSections.prototype.addSection = function() {


    let instance = this;

    instance.newFieldSetId--;

    let fieldSet = { fieldSetId : instance.newFieldSetId, fieldSetName : "New Section", fieldSetRank : 10, fields : [], deleted : false };


    instance.fieldSets.push( fieldSet );
    instance.dataGrid.refresh();


    instance.saveButton.option( { "disabled": false } );

    instance.updateAddToSectionButton();

    return;

    

}

WorkflowFormSections.prototype.deleteSection = function( data ) {

    let instance = this;

    instance.saveButton.option( { "disabled": false } );

    instance.fieldSets.forEach( function( fs ) {
        if( fs.fieldSetId == data.fieldSetId ) {


            let fieldsDataGrid = instance.fieldDataGrids[fs.fieldSetId];

            let availableFieldsStore = instance.fieldList.getDataSource().store();
            let sectionFieldsStore = fieldsDataGrid.getDataSource().store();

            let selectedFields = fs.fields;

            let fieldIds = [];
            selectedFields.forEach( function( field ) {
                fieldIds.push( field.fieldId ); 
            });


            fieldIds.forEach( function( fieldId ) {

                sectionFieldsStore.remove( fieldId );
                availableFieldsStore.update( fieldId, { disabled : false } );

            })

            fs.deleted = true;

            fieldsDataGrid.getDataSource().sort( [ "sortRank" ] );
            fieldsDataGrid.refresh();
            instance.fieldList.reload()
            instance.fieldList.option( { selectedItemKeys :  fieldIds } );

        }
    })

    instance.dataGrid.refresh();

}