ObjectiveSearch = function( initialSearchParams ) {
	let instance = this;
	instance.searchParams = $.extend( true, {}, initialSearchParams ? initialSearchParams : {} );
}

ObjectiveSearch.prototype.constructor = ObjectiveSearch;

ObjectiveSearch.prototype.show = function() {

	let instance = this;

	let showPromise = $.Deferred();

	let searchForm = null;

    let isMFR = Fse.Portal.appConfiguration.STP.ownerType === "MFR";

	let popup = $("<div>").dxPopup( {
		title : "Search Objectives",
		width : 600,
		height : "auto",
		hideOnOutsideClick : true,
		contentTemplate : function() {


            let searchFields = [];

            searchFields.push( 
                {
                    dataField : "keyword", editorType : "dxTextBox", 
                    editorOptions : { 
                        showClearButton : true,
                        placeholder : "Keyword"
                    }
                },
                {
                    dataField: "bundleId", label : { text : "Group" }, editorType : "dxDropDownBox",
                    editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
                        dataSource : Fse.Data.newDataSource( { object : "BOM.objectiveBundles", keyField : "bundleId" } ),
                        searchExpr : "bundleName",
                        searchMode : "contains",
                        displayExpr : "bundleName",
                        multipleSelectedDisplay : "Multiple Groups Selected",
                        keyExpr : "bundleId",
                        title : "Select Groups..."
                    })
                },

                { dataField : "objLevel", label : { text : "Type" }, editorType : "dxDropDownBox",
                    editorOptions : {
                        
                        placeholder : "Select Type...",
                        dataSource : { store : { type : "array", key : "value", data : [
							{ xtext : "ENT", text : "Enterprise", value : "P"},
							{ xtext : "SUB", text : "Sub-Objective", value : "C" },
							{ xtext : "SA", text : "Stand-Alone", value : "S" }
						]}},
                        valueExpr : "value",
                        displayExpr : "text",
                        contentTemplate : function( e ) {
                            const v = e.component.option( "value" );
                            const list = $("<div>").dxList( {
                                dataSource : e.component.getDataSource(),
                                displayExpr : "text",
                                selectionMode: "multiple",
                                showSelectionControls : true,
                                selectedItemKeys : v,
                                onSelectionChanged : function( sce ) {
                                    const keys = sce.component.option( "selectedItemKeys" );
                                    e.component.option( "value", keys );
                                }
                            }).dxList( "instance" );
                            
    
                            e.component.on('valueChanged', (args) => {
                                const { value } = args;
                                list.option( "selectedItemKeys", value );
                            });
    
                            return list.element();
                        }	                                                
                    }
                },

                { dataField : "parentObjectiveId", label : { location : "left", text : "Enterprise" }, editorType : "dxSelectBox", 
                    editorOptions : {
                        dataSource : Fse.Data.newDataSource( { object : "BOM.objectives", key : "objectiveId", paginate : true, filter : [ "objLevel", "=", "P" ] } ),
                        searchEnabled : true,
                        showClearButton : true,
                        valueExpr : "objectiveId",
                        searchExpr : "objName",
                        searchMode : "contains",
                        displayExpr : "objName",
                        placeholder : "Select Enterprise..."
                    }
                },

                { dataField : "territoryPath", label : { location : "left", text : "Territory" }, 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 Territory..."
                        })
	            },
                {
                    dataField : "objManagerId", label : { text : "Manager" }, editorType : "dxDropDownBox",
                    editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
                        dataSource : Fse.Data.newDataSource( { object : "FSPRO.members", key : "fspro_userId" } ),
                        searchExpr : "fullName",
                        searchMode : "contains",
                        displayExpr : "fullName",
                        multipleSelectedDisplay : "Multiple Sales Reps Selected",
                        keyExpr : "fspro_userId",
                        title : "Select Managers..."
                    })
                },
                {
                    dataField : "staffMemberUserId", label : { text : "Staff" }, editorType : "dxDropDownBox",
                    editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
                        dataSource : Fse.Data.newDataSource( { object : "CRM.salesRepList", keyField : "valueId" } ),
                        searchExpr : "valueName",
                        searchMode : "contains",
                        displayExpr : "valueName",
                        multipleSelectedDisplay : "Multiple Sales Reps Selected",
                        keyExpr : "valueId",
                        title : "Select Sales Reps..."
                    })
                },
                {
                    dataField : "status", 

                    

                    editorType : "dxDropDownBox", 
                    editorOptions : {
                        placeholder : "Select Status...",
                        dataSource : { store : { type : "array", key : "text", data : [
                            { text : "Past", value : "Past" },
                            { text : "Active", value : "Active" },
                            { text : "Future", value : "Future" }
                            ]}},
                        valueExpr : "value",
                        displayExpr : "text",
                        contentTemplate : function( e ) {
                            const v = e.component.option( "value" );
                            const list = $("<div>").dxList( {
                                dataSource : e.component.getDataSource(),
                                displayExpr : "text",
                                selectionMode: "multiple",
                                showSelectionControls : true,
                                selectedItemKeys : v,
                                onSelectionChanged : function( sce ) {
                                    const keys = sce.component.option( "selectedItemKeys" );
                                    e.component.option( "value", keys );
                                }
                            }).dxList( "instance" );
                            
    
                            e.component.on('valueChanged', (args) => {
                                const { value } = args;
                                list.option( "selectedItemKeys", value );
                            });
    
                            return list.element();
                        }						
                    }                    
                }

            );

            if( ! isMFR ) {
                searchFields.push(
                    {
                        dataField : "objOwnerType", visible : ! isMFR, label : { text : "Owner Type" }, editorType : "dxSelectBox", editorOptions : {
                            dataSource : { store : { type : "array", key : "text", data : [
                                                        { text : "Company Internal", value : "INT" },
                                                        { text : "Manufacturer", value : "MFR" }
                                                        ]}},
                            displayExpr : "text",
                            valueExpr : "value",
                            placeholder : "Select Owner Type...",
                            showClearButton : true
                            }
                    },
                    { dataField : "objOwnerId", label : { location : "left", text : "Manufacturer" }, editorType : "dxDropDownBox", 
                        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"
                        })                    
                    }
                )
            }

            searchFields.push(
                {
                    dataField : "targetType", editorType : "dxSelectBox", editorOptions : {
                        dataSource : { store : { type : "array", key : "text", data : [
                                        { text : "Operator", value : "OPR" },
                                        { text : "Distributor", value : "DST" }
                                    ]}},
                        displayExpr : "text",
                        valueExpr : "value",
                        showClearButton : true,
                        placeholder : "Select Target Type..."
                        }
                },
                {
                    dataField : "ready", label : { text : "Enabled "}, editorType : "dxSelectBox", editorOptions : {
                        dataSource : { store : { type : "array", key : "text", data : [
                            { text : "Y", value : "Y" },
                            { text : "N", value : "N" }
                        ]}},
                        displayExpr : "text",
                        valueExpr : "value",
                        showClearButton : true
                        }

                },
                {
                    dataField : "capAchievement", label : { text : "Cap Achievement" }, editorType : "dxSwitch"
                }
            )
			
            let originalValues = $.extend( true, {}, instance.searchParams );

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

				items : searchFields,
                onFieldDataChanged : function( e ) {

                    if( e.dataField == "staffMemberUserId" ) {

                        let newValue = e.value;
                        if( ! newValue ) newValue = [];
                        if( ! Array.isArray( newValue ) ) newValue = [ newValue ];
                        newValue = newValue.sort( function (a, b) { return a - b; }).join( "," );

                        let originalValue =  originalValues.staffMemberUserId;
                        if( ! originalValue ) originalValue = [];
                        if( ! Array.isArray( originalValue ) ) originalValue = [ originalValue ];
                        originalValue = originalValue.sort( function (a, b) { return a - b; }).join( "," );

                        if( newValue != originalValue && originalValue == "" ) {
                            e.component.updateData( { objLevel : null })
                        }


                    }

                }

			}).dxForm("instance");

			searchForm.option( "formData", instance.searchParams );

			return searchForm.element();


		},
		toolbarItems : [
			{
				toolbar : "bottom",
				location : "after",
				widget : "dxButton",
				options : {
					text : "Cancel",
					onClick : function( e ) {
						popup.hide();
					}
				}
			},
			{
				toolbar : "bottom",
				location : "after",
				widget : "dxButton",
				options : {
					text : "Search",
					type : "default",
					onClick : function( e ) {

						let vr = searchForm.validate();
						if( ! vr.isValid ) return;

						showPromise.resolve( searchForm.option( "formData" ) );
						popup.hide();
					}
				}
			}
		],
		onHidden : function( e ) {
			e.component.element().remove();
			e.component.dispose();
		}
	}).appendTo( $("body") ).dxPopup("instance");

	popup.show();

	return showPromise;


}