BookOfBusinessWidgetPreferences = function( widget ) {
	this.widget = widget;
}

BookOfBusinessWidgetPreferences.prototype.constructor = BookOfBusinessWidgetPreferences;

BookOfBusinessWidgetPreferences.prototype.show = function( applyFn ) {
	let instance = this;
	let widget = this.widget;

	let preferencesForm = null;
	let preferencePopup = null;

	const items = [];


	items.push( 
		{
			dataField : "partnerType",
			label : { text : "Account Type" },
			editorType : "dxSelectBox",
			editorOptions : {
				showClearButton : true,
				placeholder : "Operators & Distributors",
				displayExpr : "text",
				valueExpr : "partnerType",
				dataSource : {
					store : { type : "array", data : [ { partnerType : "OPR", text : "Operators" }, { partnerType : "CDR", text : "Distributors" }], key : "partnerType" }
				}
			}
		}
	);

	items.push( 

		{ dataField : "estOrderDateRange", label : { location : "left", text : "Est. Order Dt." }, editorType : "dxDropDownBox", 
		editorOptions : Fse.UI.dateRangePickerOptions(
				{
					applyCustomDateRange : function( startDate, endDate ) {
					preferencesForm.updateData( { estOrderDateStart : startDate, estOrderDateEnd : endDate  } )
					}
				} )
		}

	);


	items.push( { label : { location : "left", text : "Territory" }, 
		dataField : "territoryPath", 
		cssClass : widget.activeFilterPreferences.territoryPath ? 'fx-active-preference' : null, 
		editorType : "dxDropDownBox", 
		editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
				dataSource : Fse.Data.newDataSource( { object : "TER.salesTerritories", keyField : "territoryPath" } ),
				searchExpr : "territoryPath",
				searchMode : "contains",
				displayExpr : "territoryPath",
				multipleSelectedDisplay : "Multiple Territories Selected",
				keyExpr : "territoryPath",
				title : "Select Territories"
		})
	});

	items.push( { label : { location : "left", text : "Sales Rep" }, dataField : "salesRepId", editorType : "dxDropDownBox", 
		cssClass : widget.activeFilterPreferences.salesRepId ? 'fx-active-preference' : null, 
		editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
			dataSource : Fse.Data.newDataSource( { object : "CRM.salesRepList", keyField : "valueId", objectParams : { version : 2 } } ),
			searchExpr : "valueName",
			searchMode : "contains",
			displayExpr : "valueName",
			multipleSelectedDisplay : "Multiple Sales Reps Selected",
			keyExpr : "valueId",
			title : "Select Sales Reps"
		})
	});


	
	
	items.push( 
		{ dataField : "productHierarchyPath", label : { location : "left", text : "Product" }, editorType : "dxDropDownBox", 
			cssClass : widget.activeFilterPreferences.productHierarchyPath ? 'fx-active-preference' : null, // scrum 46030
			editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
				dataSource : Fse.Data.newDataSource( { object : "PRD.productHierarchyPaths", keyField : "productHierarchyPath" } ),
				searchExpr : "productHierarchyPath",
				searchMode : "contains",
				displayExpr : "productHierarchyPath",
				multipleSelectedDisplay : "Multiple Product Hierarchy Paths Selected",
				keyExpr : "productHierarchyPath",
				title : "Select Product Hierarchy Path",
				searchTemplate : function( applyFilters ) {
					return Fse.UI.productHierarchyPathMultiSelectSearchTemplate( applyFilters )
				}
			})
		});

	items.push( 
		{ 
			dataField : "productSetTags", label : { location : "left", text : "Product Set" }, editorType : "dxDropDownBox", 
			cssClass : widget.activeFilterPreferences.productSetTags ? 'fx-active-preference' : null,
			editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
				dataSource : Fse.Data.newDataSource( { object : "PRD.productSets", keyField : "productSetTag" } ),
				searchExpr : "productSetName",
				searchMode : "contains",
				displayExpr : "productSetName",
				multipleSelectedDisplay : "Multiple Product Sets Selected",
				keyExpr : "productSetTag",
				title : "Select Product Set"
			})
		});

	
	items.push({ dataField : "clientSegPath", label : { location : "left", text : "Segment" }, editorType : "dxDropDownBox", 
	cssClass : widget.activeFilterPreferences.clientSegPath ? 'fx-active-preference' : null, // scrum 46030
		editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
			dataSource : Fse.Data.newDataSource( { object : "SPL.segments", keyField : "clientSegPath" } ),
			searchExpr : "clientSegPath",
			searchMode : "contains",
			displayExpr : "clientSegPath",
			multipleSelectedDisplay : "Multiple Segments Selected",
			keyExpr : "clientSegPath",
			title : "Select Segments"
		})
	}); 

    // begin objective filter
    items.push(	{ 
        dataField : "objPath", label : { location : "left", text : "Objective" }, 
        editorType : "dxDropDownBox", 
        editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
              dataSource : Fse.Data.newDataSource( { object : "BOM.objectives", keyField : "objPath" } ),
              searchExpr : "objPath",
              searchMode : "contains",
              displayExpr : "objPath",
              searchTemplate : function( userFilterCallback ) {

                // this is a custom search widget for the available side
                let searchWidget = 

                    $( "<div>" ).dxForm( {

                        formData : {
                            status : null,
                            objPath : null
                        },

                        items : [
                            {
                                dataField : "status",
                                label : { visible : false },
                                editorType : "dxSelectBox",
                                editorOptions : {
                                    showClearButton : true,
                                    items : [
                                        "Active","Future","Past"
                                    ],
                                    placeholder : "Objective Status"
                                }
                            },
                            { 
                                dataField : "objPath",
                                label : { visible : false },
                                editorType : "dxTextBox",
                                editorOptions : {
                                    showClearButton : true,
                                    placeholder : "Objective Name"
                                }
                            }
                        ],
                        onFieldDataChanged : function( fdce ) {
                            let searchParams = fdce.component.option( "formData" );
                            
                            let userFilters = [];
                            for( let p in searchParams ) {
                                let v = searchParams[p];
                                if( v ){

                                    let op = "=";
                                    if( p === "objPath" ) {
                                        op = "contains";
                                    }
                                    if( userFilters.length ) {
                                        userFilters.push( "and" );
                                    }
                                    userFilters.push( [ p, op, v ] )
                                }
                            }

                            userFilterCallback( userFilters );

                        }
                    }
                    );


                return searchWidget;


              },
              multipleSelectedDisplay : "Multiple Objectives Selected",
              keyExpr : "objPath",
              title : "Select Objective"
            })
        })	// end objective filter

	if(  widget.showGrouping ) {

		items.push ( {
			dataField : "grouping", label : { text : "Group by" },
			editorType : "dxSelectBox",
			editorOptions : {
				dataSource : {
					store : {
						type : "array",
						data : [
							{ value : "accountOwnerFullName", caption : "Account Owner" },
							{ value : "divisionName", caption : "Division" },
							{ value : "regionName", caption : "Region" },
							{ value : "territoryName", caption : "Territory" },
							{ value : "segmentName", caption : "Segment" }
						],
						key : "value"
					}
				},
				valueExpr : "value",
				displayExpr : "caption",
			}
		})
	}

	// annotate the preference editor to let user know there are active filter preferences - scrum 46030 
	if( Object.keys( widget.activeFilterPreferences ).length ) {
		items.push( {
			template : function() {
				let annotation = $("<div>").append(  $("<span>").addClass( "dx-field-item-label-text" ).append( "*filter preference active")).addClass( "fx-active-preference" ).css( { "cursor" : "pointer" } );

				annotation.on( "click", function( e ) {
					
					// if the global filter preferences are applied, then close this popup
					let onSaveFilterPreferences = function() {
						preferencesPopup.hide();
					}
					widget.widgetOptions.dashboard.editFilterPreferences( onSaveFilterPreferences );
				})
				return annotation;
			}
		})
	}


	const formData = {
		salesRepId : widget.widgetOptions.config.salesRepId,
		territoryPath : widget.widgetOptions.config.territoryPath,
		productHierarchyPath : widget.widgetOptions.config.productHierarchyPath,
		estOrderDateStart : widget.widgetOptions.config.estOrderDateStart,
		estOrderDateEnd : widget.widgetOptions.config.estOrderDateEnd,
		estOrderDateRange : widget.widgetOptions.config.estOrderDateRange,
		clientSegPath : widget.widgetOptions.config.clientSegPath,
		productSetTags : widget.widgetOptions.config.productSetTags,
		partnerType : widget.widgetOptions.config.partnerType,
        objPath : widget.widgetOptions.config.objPath
	}

	if( widget.showGrouping ) {
		formData.grouping = widget.widgetOptions.config.grouping;
	}
       

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

		title : "Preferences",
		width : "auto", height : "auto",
		position : { my : "right top", at : "right top", of : widget.widgetOptions.portlet },
		hideOnOutsideClick : true,

		contentTemplate : function() {

			preferencesForm = $("<div>").dxForm( {
				colCount : 1,
				items : items
			} ).dxForm("instance");

			preferencesForm.option( "formData", formData );

			return preferencesForm.element();

		},

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

		toolbarItems : [
			{ // scrum 49810.7
				toolbar : "bottom",
				location : "after",
				widget : "dxButton",
				options : {
					text : "Use Defaults",
					type : "normal",
					onClick : function() {
						preferencesPopup.hide();
                        let formData = widget.getDefaultConfig();
                        if( applyFn ) {
                            applyFn( formData );
                        } else {
                            widget.applyPreferences(  formData );
                        }
						
					}
				}
			},
			
			{
			toolbar : "bottom",
			location : "after",
			widget : "dxButton",
			options : {
				text : "Apply",
				type : "default",
				onClick : function() {
					preferencesPopup.hide();
                    let formData = preferencesForm.option( "formData" );
                    if( applyFn ) {
                        applyFn( formData );
                    } else {
                        widget.applyPreferences( formData );
                    }
					
				}
			}

			}]
	} ).dxPopup( "instance" );

	preferencesPopup.element().appendTo( "body" );

	preferencesPopup.show();
	
	
}