ObjectiveStatusWidget = function( widgetOptions ) {

    let widget = this;

    widget.readyPromise = $.Deferred();

    widget.staffTypeList = [
		{ "dispValue": "Manufacturer Staff Only" , "value": "MFR"},
		{ "dispValue": "Broker Staff Only" ,"value": "BRO"}
	  ];

    widget.activeFilterPreferences = {};
    widget.widgetOptions = widgetOptions;

    let configDefaults = this.getDefaultConfig();

	
	widget.widgetOptions.config = $.extend( true, {}, configDefaults, widget.widgetOptions.config );


    /*
    $("<style>").attr( "type", "text/css").append( 
        ".trimesterMetric { padding:8px }" +
        ".trimesterMetric div.trimesterAchievement { text-align : center; font-size : 50px; font-weight: bold; }" +
        ".trimesterMetric div.trimesterCaption { text-align : center; font-size : 20px; padding-bottom : 12px    }" +
        ".trimesterMetric .dx-progressbar-container { height : 20px !important; }" +
        ".trimesterMetric div.trimesterValue { font-size : 18px !important; }" +
        ".trimesterMetric div.trimesterLabel { font-size : 11px !important; }" +
        ".trimesterMetric.volume { color : #004b87 }" +
        ".trimesterMetric.targets { color : #4b286d }" +
        ".trimesterMetric.volume div.trimesterValue { color : #004b87 }" +
        ".trimesterMetric.targets div.trimesterLabel { color : #4b286d }" +
        ".trimesterMetric.volume .dx-progressbar-range { background-color : #004b87 !important; border-color: #004b87 !important; }" +
        ".trimesterMetric.targets .dx-progressbar-range { background-color : #4b286d !important; border-color: #4b286d !important; }" 

        
     ).appendTo( $("head") );
    */

    widget.activeConfig = $.extend( true, {}, widget.widgetOptions.config );

    
	// global filters suppored by this widget, when the global filters are expressed with different variable names, they need to translated to this widgets variable names
	const globalFilters = {
		// widgetVariableName : "globalFilterVariableName"
		salesRepId : "salesRepId",
		mfr_id : "mfr_id",
		territoryPath : "territoryPath",
        accountOwner_ownerType : "staffType"
	};

	for( let p in globalFilters ) {

		// apply translation - global filter param is not the same name as widget param
		let gp = globalFilters[p];

		// if the global filter preferences have the propery and it has a value, update the objectparams
		if( widget.widgetOptions.filterPreferences.hasOwnProperty( gp ) && widget.widgetOptions.filterPreferences[gp]) {

			if( widget.activeConfig[p] == null ) {
				widget.activeConfig[p] = widget.widgetOptions.filterPreferences[gp];
				widget.activeFilterPreferences[p] = widget.activeConfig[p]; // indicate that this widget parameter has an active filter preference - used when displaying the edit page
			}
		}
	}
    widget.globalFiltersSuppressed = false;
    if( widget.activeConfig.salesRepId && Array.isArray( widget.activeConfig.salesRepId ) ) {

        if( widget.activeConfig.salesRepId.length == 1 ) {
            widget.activeConfig.salesRepId = widget.activeConfig.salesRepId[0];
        } else {
            delete widget.activeConfig.salesRepId
            widget.globalFiltersSuppressed = true;
            delete widget.activeFilterPreferences.salesRepId;
        }
        
    }

    if( widget.activeConfig.territoryPath && Array.isArray( widget.activeConfig.territoryPath ) ) {
        if( widget.activeConfig.territoryPath.length == 1 ) {
            widget.activeConfig.territoryPath = widget.activeConfig.territoryPath[0];
        } else {
            delete widget.activeConfig.territoryPath;
            widget.globalFiltersSuppressed = true;
            delete widget.activeFilterPreferences.territoryPath;
        }
    }

	// end apply filter preferences (scrum 46030)

    widget.rootElement = $("<div>");
    widget.preferencesPopup = null;

    widget.footerElement = $("<div>");

   


    let dataSource = Fse.Data.newDataSource( widget.getDataSourceConfig() );
    dataSource.on( "loadingChanged", function( isLoading ) {

        if( ! isLoading ) {

            widget.readyPromise.resolve();

            console.log( dataSource.items() );
            let totalObjectives = 0;
            dataSource.items().forEach( function( i ) {
                totalObjectives += i.objectiveCount;
            })

            let totalObjectivesFormatted = DevExpress.localization.formatNumber( totalObjectives, { type : "fixedPoint", precision : 0 } );
            widget.footerElement.text( `Active Objectives: ${totalObjectivesFormatted}` );

        } else {
            widget.footerElement.text( "loading..." );
        }

    });

    let paletteColors = [ "#4a7fb0", "#6aa64c", "#db4425" ]; // in progress, complete, at risk
    widget.pieChart = $("<div>").dxPieChart( {

        type: "doughnut",
        height : 140,
        palette : paletteColors,
 
        dataSource : dataSource,
        series: {
            argumentField: "status",
            valueField: "objectiveCount"
        },

        legend: {
            customizeText: function (pointInfo) {
                switch( pointInfo.pointName ) {
                    case  "AR" :
                        return 'At Risk';

                    case "IP" :
                        return "In Progress";
                    
                    case "CP" :
                        return "Complete";
                 
                }
                return pointInfo.Name;
            }
        },

        onLegendClick : function( e ) {
            let objectiveStatus = e.target;
            widget.viewObjectives( objectiveStatus );
        },

        onPointClick : function( e ) {
            let objectiveStatus = e.target.argument;
            widget.viewObjectives( objectiveStatus );
        },

        tooltip : { 
            enabled : true,
            contentTemplate : function( data ) {
                let formattedValue = DevExpress.localization.formatNumber( data.value, { type : "fixedPoint", precision : 0 } )

                return `${formattedValue} Objectives`;
            }
        },

    }).dxPieChart( "instance" );



    widget.rootElement.append( widget.pieChart.element() );

    $("<div>").dxToolbar( {
        items : [
            { template : function() { return widget.footerElement } }
        ]
    }).appendTo( widget.rootElement ).css( { "margin-top" : "10px" } );


}

ObjectiveStatusWidget.prototype.getDataSourceConfig = function() {
    let widget = this;

    let objectParams = {
        salesRepId : widget.activeConfig.salesRepId,
        territoryPath : widget.activeConfig.territoryPath,
        mfr_id : widget.activeConfig.mfr_id,
        accountOwner_ownerType : widget.activeConfig.accountOwner_ownerType,
        includeObjectives : false
    };

    for( let p in objectParams ) {
        if( widget.activeConfig[p] ) {
            objectParams[p] = widget.activeConfig[p]
        }
    }

    console.log("in BCM ");
    console.log(objectParams);

    return { object : "BOM.objectiveStatusWidget", objectParams : objectParams }


}

ObjectiveStatusWidget.prototype.viewObjectives = function( objectiveStatus ) {

    let widget = this;


    let loadPanel = $("<div>").dxLoadPanel( {
        delay : 400,
        container : widget.pieChart.element()
    }).dxLoadPanel( "instance" );
    

    let dataSourceConfig = widget.getDataSourceConfig();
    dataSourceConfig.objectParams.includeObjectives = true;
    dataSourceConfig.objectParams.status = objectiveStatus;

    let dataSource = Fse.Data.newDataSource( dataSourceConfig );

    loadPanel.element().appendTo( "body" );
    loadPanel.show();

    dataSource.load().done( function( items ) {

        loadPanel.hide();
        
        let objectives = null;
        let objectiveCount = 0;
        items.forEach( function( i ) {
            if( i.status == objectiveStatus ) {
                objectives = i.objectives;
                objectiveCount = i.objectiveCount;
            }
        })

        if( objectives ) {


            let titlePrefix = null;
            if( objectiveStatus == "AR" ) {
                titlePrefix = 'At Risk'
            } else if( objectiveStatus == "IP" ) {
                titlePrefix = "In Progress"
            } else {
                titlePrefix = "Complete"
            }


            let popup = $("<div>").dxPopup( {

                title : `${titlePrefix} Objectives`,
                enableBodyScroll : false,
                height : "auto",
                width : "auto",
                hideOnOutsideClick : false,

                toolbarItems : [

                    { location : "before",
                    toolbar : "bottom",
                    template : function() {

                        return $("<div>")
                            .text( DevExpress.localization.formatNumber( objectiveCount, { type : "fixedPoint", precision : 0 } ) + ' objectives' )

                    }
                    },

                    {
                        location : "after",
                        toolbar : "bottom",
                        widget : "dxButton",
                        options : {
                            text : "Go to objective dashboard",
                            onClick : function( e ) {
                                widget.gotoObjectiveDashboard( objectiveStatus );
                            }
                        }
                    },
                    {
                        location : "after",
                        toolbar : "bottom",
                        widget : "dxButton",
                        options : { 
                            type : "default",
                            text : "Close",
                            onClick : function( e ) {
                                popup.hide();
                            }
                        }
                    }
                ],

                contentTemplate : function() {

                    let content = $("<div>");

                    $("<div>").dxDataGrid( {
                        dataSource : { store : { type : "array", data : objectives, key : "objectiveId" } },

                        columns : [
                            { dataField : "objectiveId", caption : "ID", width : 70, dataType : "number", visible : false },
                            { dataField : "objName", caption : "Obj. Name" },
                            { dataField : "territoryName", caption : "Obj. Ter.", visible : false },
                            { dataField : "publishDate", caption : "Pub.", dataType : "date", width : 80, visible : false },
                            { dataField : "unpublishDate", caption : "Un Pub.", dataType : "date", width : 80, visible : false },
                            { dataField : "quota", caption : "Quota", dataType : "number", width : 50},
                            { dataField : "quotaTypeDescription", caption : "Quota Type", width : 130},
                            { dataField : "achieved", caption : "Achvd", dataType : "number", width : 50, visible  : false },
                            { dataField : "achievement", caption : "Achievement", format : "percent", dataType : "number", width : 85 },
                            { dataField : "dueDate", caption : "Due", dataType : "date", width : 80 },
                            { caption : "Elapsed/Left", width : 90,
                                calculateDisplayValue : function( data ) {
                                    return `${data.daysElapsed}/${data.daysLeft}`;
                                }
                            }
                        ],
                        scrolling : { mode : "virtual" },
                        showBorders : true,
                        height : 400,
                        width : 800,
                        onContextMenuPreparing : function( e ) {
                            if( e.row.rowType != "data" ) {
                                return;
                            }

                            let data = e.row.data;

                            if( ! e.items ) {
                                e.items = [];
                            }

                            e.items.push( {
                                text : "Go to Objective Dashboard Detail",
                                onItemClick : function() {


                                    let urlParams = {
                                        id : data.objectiveId,
                                        stfID : Fse.Portal.appConfiguration.STP.userId
                                    }

                                    if( widget.activeConfig.salesRepId ) {
                                        urlParams.stfID = widget.activeConfig.salesRepId;
                                    }

                                    if( widget.activeConfig.accountOwner_ownerType ) {
                                        urlParams.accountOwner_ownerType = widget.activeConfig.accountOwner_ownerType;
                                    }

                                    let ddURL = Fse.Util.updateURL2(  $("link#PortalDocRootURL").attr( "href" ) + 
                                            "/apps/BMYO/index.cfm?view=detail&id=&stfID=&srchPeriod=0000&terID=0",
                                            urlParams
                                        );
                                        window.location.href = ddURL;
                                }
                            })

                            

                        }
                    }).appendTo( content );

                
                    return content;



                },

                hideOnOutsideClick : true,
                onHidden : function( e ) {
                    e.component.element().remove();
                    e.component.dispose();
                }
            }).appendTo( "body" ).dxPopup("instance");

            popup.show();

        }

    })

}

ObjectiveStatusWidget.prototype.gotoObjectiveDashboard = function( objectiveStatus ) {


    console.log( "Objective Dashboard for view " + objectiveStatus );

    let widget = this;


    let urlParams = {
        srchPeriod : "0000",
        srchStartDt : "",
        srchEndDt : "",
        srchStatus : objectiveStatus,
        stfId : Fse.Portal.appConfiguration.STP.userId
    }

    if( widget.activeConfig.salesRepId ) {
        urlParams.srchViewModeChoice = "REP";
        urlParams.stfId = widget.activeConfig.salesRepId;
    } else if ( widget.activeConfig.territoryPath ) {
        urlParams.srchViewModeChoice = `TER|${widget.activeConfig.territoryPath}`;
    } else {
        urlParams.srchViewModeChoice = "OBJ";
    }
    
    let bmyoURL = Fse.Util.updateURL2( $("link#PortalDocRootURL").attr( "href" ) + "/apps/BMYO/index.cfm?view=list", urlParams )
    window.location.href = bmyoURL;
}

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

ObjectiveStatusWidget.prototype.ready = function() {
    return this.readyPromise;
}

ObjectiveStatusWidget.prototype.constructor = ObjectiveStatusWidget;

ObjectiveStatusWidget.prototype.getDefaultConfig = function( ) {
	
	return {
		territoryPath : null,
        //salesRepId : Fse.Portal.appConfiguration.STP.userId,
        salesRepId : null,
        mfr_id : null,
        accountOwner_ownerType : null
	}

}

ObjectiveStatusWidget.prototype.edit = function( applyFn ) {

    let widget = this;
	
	if( ! this.preferencesPopup ) {


		const items = [];

        let showMFR = Fse.Portal.appConfiguration.STP.ownerType !== "MFR";
        showMFR = false;

        
        
		items.push( { label : { location : "left", text : "Territory" }, 
			dataField : "territoryPath", 
            cssClass : widget.activeFilterPreferences.territoryPath ? 'fx-active-preference' : null, // scrum 46030
			editorType : "dxSelectBox", 
			editorOptions :  {
                dataSource : Fse.Data.newDataSource( { dataURL : widget.dataURL, object : "TER.salesTerritories", keyField : "territoryPath" } ),
                searchExpr : "territoryPath",
                searchMode : "contains",
                displayExpr : "territoryPath",
                searchEnabled : true,
                valueExpr : "territoryPath",
                placeholder : "Select Territory",
                showClearButton : true,
                itemTemplate : function( data ) {
                    let parts = data.territoryPath.split( "/" );
                    let item = $("<div>").append( parts[parts.length - 1]);
                    if( parts.length > 1 ) {
                        let paddingLeft = ( parts.length - 1 ) * 10;
                        item.css( { "padding-left" : `${paddingLeft}px`} )
                    }
                    return item;
                },
                fieldTemplate : function( data, container ) {

                    let fieldConfig = {
                        placeholder : this.option( "placeholder" ),
                        value : null
                    }

                    if( data && data.territoryPath ) {
                        let parts = data.territoryPath.split("/");
                        let territoryName = parts[parts.length-1];
                        if( parts.length > 1 ) {
                            fieldConfig.value = `.../${territoryName}`;
                        } else {
                            fieldConfig.value = territoryName;
                        }
                    }

                    let field =  $("<div>").dxTextBox(  fieldConfig );
                    container.append( field );

                }
            }
       
	  	});

        let salesRepDataSource = Fse.Data.newDataSource( { dataURL : widget.dataURL, object : "CRM.salesRepList", keyField : "valueId", objectParams : { version : 2 } } );

		items.push( { label : { location : "left", text : "Sales Rep" }, dataField : "salesRepId", editorType : "dxSelectBox", 
            cssClass : widget.activeFilterPreferences.salesRepId ? 'fx-active-preference' : null, // scrum 46030
			editorOptions : {
				dataSource : salesRepDataSource,
				searchExpr : "valueName",
				searchMode : "contains",
				displayExpr : "valueName",
                searchEnabled : true,
                showClearButton : true,
				valueExpr : "valueId",
				placeholder : "Select Sales Rep",
			}
            
		});

        if( showMFR ) {
            items.push( 
			    { dataField : "mfr_id", label : { location : "left", text : "Manufacturer" }, editorType : "dxSelectBox", 
                cssClass : widget.activeFilterPreferences.mfr_id ? 'fx-active-preference' : null, // scrum 46030
                editorOptions : {
                        dataSource : Fse.Data.newDataSource( { dataURL : widget.dataURL, object : "PRD.manufacturers", keyField : "mfr_id" } ),
                        searchExpr : "mfr_name",
                        searchMode : "contains",
                        searchEnabled : true,
                        showClearButton : true,
                        displayExpr : "mfr_name",
                        valueExpr : "mfr_id",
                        placeholder : "Select Manufacturer"
                }
		        }
            );
                   
        }

        //staff type

	if( Fse.Portal.appConfiguration.STP.ownerType === "MFR" ) {
		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
		} 
	})			
	}

        


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

        if( widget.globalFiltersSuppressed ) {
            items.push( {
                template : function() {
                    let annotation = $("<div>").append(  $("<span>").addClass( "dx-field-item-label-text" ).append( "Only global preferences with single selections are supported.  One or more global multi value preferences have been suppressed." ).css( { "color" : "red" } ) ).css( { "cursor" : "pointer" } );

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


		const formData = {
			salesRepId : widget.widgetOptions.config.salesRepId,
			territoryPath : widget.widgetOptions.config.territoryPath,
            mfr_id : widget.widgetOptions.config.mfr_id,
            accountOwner_ownerType : widget.widgetOptions.config.accountOwner_ownerType
		}


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

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

			contentTemplate : function() {

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

                widget.preferencesForm.option( "formData", formData );

				return widget.preferencesForm.element();

			},

			toolbarItems : [
                {
					toolbar : "bottom",
					location : "after",
					widget : "dxButton",
					options : {
						text : "Use Defaults",
						type : "normal",
						onClick : function() {
							widget.preferencesPopup.hide();
							applyFn( widget.getDefaultConfig() );
						}
					}
				},
                {
                    toolbar : "bottom",
                    location : "after",
                    widget : "dxButton",
                    options : {
                        text : "Apply",
                        type : "default",
                        onClick : function() {
                            widget.preferencesPopup.hide();
                            applyFn( widget.preferencesForm.option( "formData" ) );
                        }
                    }
                }
            ]
		} ).dxPopup( "instance" );

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

	}

	this.preferencesPopup.show();    

}



Fse.Portal.addWidgetFactory( "ObjectiveStatusWidget", function( widgetDef ) {
	return new ObjectiveStatusWidget( widgetDef  );
})