PipelineWidgetPreferenceEditor = function( widget, fieldOptions ) {
	this.widget = widget;
	this.preferencesPopup = null;
	this.preferencesForm = null;

    this.fieldOptions = {
        uom : true,
        typeCode : true,
        territoryPath : true,
        effectiveRepId : true,
        budgetCategoryId : true,
        mfr_id : true,
        showCommission : false,
        showOpportunities : false,
        clientSegPath : true,
        accountOwner_ownerType : false,
        productSetTags : false,
        partnerType : false
    }

    if( fieldOptions ) {
        for( let fo in fieldOptions ) {
            if( fieldOptions[fo] ) {
                this.fieldOptions[fo] = true;
            } else {
                this.fieldOptions[fo] = false;
            }
        }
    }
    if( Fse.Portal.appConfiguration.STP.ownerType !== "BRO" || ! Fse.Portal.checkPermission( "MfrCommissionVisibility" ) ) {
        // force it false when for non-brokers and users that dont have the commission permission
        this.fieldOptions.showCommission = false;
    }

    if( Fse.Portal.appConfiguration.STP.ownerType === "MFR" ) {
      // show it only for Manufacturers
        this.fieldOptions.accountOwner_ownerType = true;
        this.fieldOptions.productSetTags = true;
    }

}

PipelineWidgetPreferenceEditor.prototype.constructor = PipelineWidgetPreferenceEditor;

PipelineWidgetPreferenceEditor.prototype.show = function( applyFn, useDefaultsFn ) {

	let instance = this;
	let widget = instance.widget;

	if( ! widget.activeFilterPreferences ) {
		widget.activeFilterPreferences = {}
	}

	/* 51358 
	const uomOptions = [
			{"uom":"cases","uomDisplay":"Cases"}, 
			{"uom":"lbs","uomDisplay":"Lbs"},
			{"uom":"dollars","uomDisplay":"Dollars"}
		];
    */

    // 51358
    const uomOptions = [];
    Fse.Portal.appConfiguration.CRM.allUnitsOfMeasure.forEach( function( srcUOM ) {
        uomOptions.push( $.extend( true, {}, srcUOM ));
    })


    if( this.fieldOptions.showCommission ) {
        uomOptions.push( {"uom":"commission","uomDisplay":"Commission"} )
    }


	const typeCodeOptions = [
		{"typeCode":"NEW","typeCodeDisplay":"New Business"}, 
		{"typeCode":"INC","typeCodeDisplay":"Incremental"},
		{"typeCode":"PRO","typeCodeDisplay":"Existing"}
	];

	if( Fse.Portal.appConfiguration.STP.ownerType === "MFR" ) {
		typeCodeOptions.push( {"typeCode":"CNV","typeCodeDisplay":"Conversion"} );
	}

	if( ! instance.preferencesPopup ) {


		const items = [];

        if( this.fieldOptions["partnerType"] ) {
            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" }
                    }
                }
            })
        }

        if( this.fieldOptions["uom"]) {
            items.push( { dataField : "uom", label : { location : "left", text : "Top " + widget.widgetOptions.config.topCount + " by" }, editorType : "dxRadioGroup", 
                editorOptions: {
                    items: uomOptions,
                    valueExpr: 'uom',
                    displayExpr: 'uomDisplay',
                    layout: 'horizontal'
                }
            })
        }

        if( this.fieldOptions["typeCode"]) {
            items.push( { dataField : "typeCode", label : { location : "left", text : "Type" }, editorType : "dxDropDownBox", 
                editorOptions : {
                    dataSource : new DevExpress.data.ArrayStore( { data : typeCodeOptions, key : "typeCode" } ),
                    valueExpr : "typeCode",
                    displayExpr : "typeCodeDisplay",
                    placeholder : "Select Opportunity Type",
                    contentTemplate : function( e ) {
                        const v = e.component.option( "value" );
                        const $list = $("<div>").dxList( {
                            dataSource : e.component.getDataSource(),
                            displayExpr : e.component.option( "displayExpr" ),
                            selectionMode: "multiple",
                            showSelectionControls : true,
                            selectedItemKeys : v,
                            onSelectionChanged : function( sce ) {
                                const keys = sce.component.option( "selectedItemKeys" );
                                e.component.option( "value", keys );
                            }
                        })
                        
                        const list = $list.dxList('instance');

                    e.component.on('valueChanged', (args) => {
                        const { value } = args;
                        list.option( "selectedItemKeys", value );
                    });

                    return $list;
                    }						

                }
            })
        }

        if( this.fieldOptions["territoryPath"] ) {

            items.push( { label : { location : "left", text : "Territory" }, 
                dataField : "territoryPath", 
                editorType : "dxDropDownBox", 
				cssClass : widget.activeFilterPreferences.territoryPath ? 'fx-active-preference' : null, // scrum 46030
                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"
                })
            });
        }

        if( this.fieldOptions["effectiveRepId"]) {
            items.push( { label : { location : "left", text : "Sales Rep" }, dataField : "effectiveRepId", editorType : "dxDropDownBox", 
				cssClass : widget.activeFilterPreferences.effectiveRepId ? 'fx-active-preference' : null, // scrum 46030
                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"
                })
            });
        }

		if( Fse.Portal.appConfiguration.STP.ownerType === "MFR" && this.fieldOptions["budgetCategoryId"] ) {
			items.push( { dataField : "budgetCategoryId", label : { location : "left", text : "Budget Category" }, editorType : "dxDropDownBox",
				cssClass : widget.activeFilterPreferences.budgetCategoryId ? 'fx-active-preference' : null, // scrum 46030
				editorOptions : {
					placeholder : "Select Budget Category",
					dataSource : Fse.Data.newDataSource( { object : "PRD.budgetCategories", keyField : "budgetCategoryId" } ),
					valueExpr : "budgetCategoryId",
					displayExpr : "budgetCategory",
					contentTemplate : function( e ) {
						const v = e.component.option( "value" );
						const $list = $("<div>").dxList( {
							dataSource : e.component.getDataSource(),
							displayExpr : "budgetCategory",
							selectionMode: "multiple",
							showSelectionControls : true,
							selectedItemKeys : v,
							onSelectionChanged : function( sce ) {
								const keys = sce.component.option( "selectedItemKeys" );
								e.component.option( "value", keys );
							}
						})
						
						const list = $list.dxList('instance');

					e.component.on('valueChanged', (args) => {
						const { value } = args;
						list.option( "selectedItemKeys", value );
					});

					return $list;
					}						
				}
			});
		}

        if( Fse.Portal.appConfiguration.STP.ownerType === "MFR" && this.fieldOptions["productSetTags"] ) {
            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"
				})
			});
        }

		if( Fse.Portal.appConfiguration.STP.ownerType !== "MFR" && this.fieldOptions["mfr_id"] ) {
			items.push( { dataField : "mfr_id", label : { location : "left", text : "Manufacturer" }, editorType : "dxDropDownBox", 
				cssClass : widget.activeFilterPreferences.mfr_id ? 'fx-active-preference' : null, // scrum 46030
				editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
						dataSource : Fse.Data.newDataSource( { object : "PRD.manufacturers", keyField : "mfr_id" } ),
						searchExpr : "mfr_name",
						searchMode : "contains",
						displayExpr : "mfr_name",
						multipleSelectedDisplay : "Multiple Manufacturers Selected",
						keyExpr : "mfr_id",
						title : "Select Manufacturer"
				})
			})			
		}

    //staff type

	if( Fse.Portal.appConfiguration.STP.ownerType === "MFR" && this.fieldOptions["accountOwner_ownerType"] ) {
		items.push( { label : { location : "left", text : "Staff Type" }, dataField : "accountOwner_ownerType", 
		editorType : "dxSelectBox",
		cssClass : widget.activeFilterPreferences.accountOwner_ownerType ? 'fx-active-preference' : null, // scrum 46030
		editorOptions :  {
			dataSource: widget.staffTypeList,
			displayExpr: "dispValue",
			valueExpr : "value",
			placeholder : "Select Staff Type",
			showClearButton: true,
			searchEnabled: true
		} 
	})			
	}


		items.push( { itemType : "empty" } );


        // 51358
        let showItems = [];
        Fse.Portal.appConfiguration.CRM.allUnitsOfMeasure.forEach( function( uom ) {

            let dataField = null;
            if( uom.uom === "cases" ) {
                dataField = "showCases";
            } else if ( uom.uom === "lbs" ) {
                dataField = "showLbs"
            } else if ( uom.uom === "equivUnits" ) {
                dataField = "showEquivUnits";
            } else if( uom.uom == "dollars" ) {
                dataField = "showDollars";
            }

            if( dataField ) {
                showItems.push( 
                    { label : { text : uom.uomDisplay, location : "left" }, dataField : dataField, editorType : "dxCheckBox" }        
                )
            }

        })

        /* 51358
        let showItems = [
            { label : { text : "Cases", location : "left" }, dataField : "showCases", editorType : "dxCheckBox" },
            { label : { text : "Lbs", location : "left" }, dataField : "showLbs", editorType : "dxCheckBox" },
            { label : { text : "Dollars", location : "left" }, dataField : "showDollars", editorType : "dxCheckBox" },
        ];
        */

        if( this.fieldOptions.showCommission ) {
            showItems.push( 
                { label : { text : "Commission", location : "left" }, dataField : "showCommission", editorType : "dxCheckBox" }
            );
        }

        if( this.fieldOptions.showOpportunities ) {
            showItems.push( 
                { label : { text : "Opportunities", location : "left" }, dataField : "showOpportunities", editorType : "dxCheckBox" }
            );
        }

		items.push( { itemType : "group", caption : "Include", xlabel : { text : "Show", location : "left" },
			colCount : showItems.length,
			items : showItems
		});

        
		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"
})
});


        // 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() {
                            instance.preferencesPopup.hide();
                        }
                        widget.widgetOptions.dashboard.editFilterPreferences( onSaveFilterPreferences );
                    })
                    return annotation;
                }
            })
        }



		const formData = {
			showCases : widget.widgetOptions.config.showCases,
			showLbs : widget.widgetOptions.config.showLbs,
			showDollars : widget.widgetOptions.config.showDollars,
            showEquivUnits : widget.widgetOptions.config.showEquivUnits, // 51358
			effectiveRepId : widget.widgetOptions.config.effectiveRepId,
			territoryPath : widget.widgetOptions.config.territoryPath,	
			uom : widget.widgetOptions.config.uom,
			topCount : widget.widgetOptions.config.topCount,
            typeCode : widget.widgetOptions.config.typeCode,
           
		}

        if( instance.fieldOptions.showCommission ) {
            formData.showCommission = widget.widgetOptions.config.showCommission
        }

        if( instance.fieldOptions.showOpportunities ) {
            formData.showOpportunities = widget.widgetOptions.config.showOpportunities;
        }

		if( Fse.Portal.appConfiguration.STP.ownerType === "MFR" ) {
			formData.budgetCategoryId = widget.widgetOptions.config.budgetCategoryId;
            formData.accountOwner_ownerType = widget.widgetOptions.config.accountOwner_ownerType;
            formData.productSetTags = widget.widgetOptions.config.productSetTags; 
		}

		if( Fse.Portal.appConfiguration.STP.ownerType !== "MFR" ) {
			formData.mfr_id = widget.widgetOptions.config.mfr_id;
		}

        let popupWidth = 400;
        if( showItems.length == 4 ) {
            popupWidth = 500;
        } else if( showItems.length > 4 ) {
            popupWidth = 600;
        }

        // scrum 49180.9 - build the toolbar items dynamically
        let toolbarItems = [];

        // scrum 49810.9 (new parameter passed to show)
        if( useDefaultsFn ) {

            // add the use default button
            toolbarItems.push( 
                { 
                    toolbar : "bottom",
                    location : "after",
                    widget : "dxButton",
                    options : {
                        text : "Use Defaults",
                        type : "normal",
                        onClick : function() {
                            instance.preferencesPopup.hide();
                            useDefaultsFn();
                        }
                    }
                });
              
        }

        toolbarItems.push( {
				toolbar : "bottom",
				location : "after",
				widget : "dxButton",
				options : {
					text : "Apply",
					type : "default",
					onClick : function() {
						instance.preferencesPopup.hide();
						applyFn( instance.preferencesForm.option( "formData" ) );
					}
				}

			});

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

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

			contentTemplate : function() {

				instance.preferencesForm = $("<div>").dxForm( {
					formData : formData,
					colCount : 1,
					items : items,
					onFieldDataChanged : function( e ) {
						if( e.dataField === "uom" ) {
							
							let showDataField = null;
							switch ( e.value ) {
								case "cases" :
									showDataField = "showCases";
									break;
								case "lbs" :
									showDataField = "showLbs";
									break;
                                case "equivUnits" : // 51358
                                    showDataField = "showEquivUnits";
                                    break;
                                case "dollars" :
									showDataField = "showDollars";
									break;
                                case "commission" :
                                    showDataField = "showCommission";
                                    break;
                                }
							if( showDataField ) {
								let updateShow = {};
								updateShow[showDataField] = true;
								e.component.updateData( updateShow )
							}
						}
					}
					
				} ).dxForm("instance");

				return instance.preferencesForm.element();

			},

			toolbarItems : toolbarItems
		} ).dxPopup( "instance" );

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

	}

	instance.preferencesPopup.show();


}