TrimesterAchievementWidget = function( widgetOptions ) {

    let widget = this;

    widget.readyPromise = $.Deferred();

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

	/*let configDefaults = {
		salesRepId : Fse.Portal.appConfiguration.STP.userId,
		territoryPath : null,
        mfr_id : null,
        planningTimeframe : "TT" // other values are TT (this trimester ) and LT (last trimester)
	}*/

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

	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
			}
		}
	}

	// end apply filter preferences (scrum 46030)

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

    /*let objectParams = {
        salesRepId : null,
        territoryPath : null,
        mfr_id : null,
        planningTimeframe : null
    };*/

    let objectParams = {
        salesRepId : widget.activeConfig.salesRepId,
        territoryPath : widget.activeConfig.territoryPath,
        mfr_id : widget.activeConfig.mfr_id,
        planningTimeframe : widget.activeConfig.planningTimeFrame
    };

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

    let dataSource = Fse.Data.newDataSource( { object : "BOM.planningStatus", objectParams : objectParams } );

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


        if( Array.isArray( data ) ) {
            data = data[0];
        }

        let volumeMetric = new TrimesterAchievementMetric( { type : "volume", color : "blue", caption : "Volume Achievement", target : data.targetVolume, actual : data.actualVolume, targetLabel : "planned", actualLabel : "sold" })
        let targetMetric = new TrimesterAchievementMetric( { type : "targets", color : "purple", caption : "Target Achievement", target : data.targetCount, actual : data.actualCount, targetLabel : "targets", actualLabel : "completed" })
    
        widget.planningTimeframeCode = data.planningTimeframe;
        
        let theBox = $("<div>").dxBox( {
            items : [
                {
                    baseSize : 250,
                    ratio : 0,
                    template : function() {
                        return volumeMetric.getElement();
                    }
                }, {
                    baseSize : 250,
                    ratio : 0,
                    template : function() {
                        return targetMetric.getElement();
                    }
                }
            ]
        })

        let contextMenu = $("<div>").dxContextMenu( {

            hideOnOutsideClick : true,
            items : [
                { text : "Go to Sales Call Dashboard" },
                { text : "Go to Objective Dashboard" }
            ],
            target : theBox,
            onItemClick : function( e ) {
                if( e.itemData.text === "Go to Objective Dashboard" ) {
                    widget.gotoObjectiveDashboard();
                } else if ( e.itemData.text === "Go to Sales Call Dashboard" ) {
                    widget.gotoSalesCallDashboard();
                }
            }
        })

        widget.rootElement.append( theBox );
        widget.rootElement.append( contextMenu );

        widget.readyPromise.resolve();
    
    

    })


}

TrimesterAchievementWidget.prototype.gotoSalesCallDashboard = function() {

    let widget = this;

    let urlParams = {
        callSrchExecuted : true,
        callSrchUseDefaults : true,
        srchDispositionClosedSale : 0,
        srchDispositionClosedNosale : 0,

        srchTimeframeFuture : 1, // Future Calls = CHECKED

        srchTimeframePastDue : 1, //Show All Past Due Calls = CHECKED

        srchTimeframeOther : 1,
    
        srchTimeframeTBD : 1, // Show All Undated Calls = CHECKED
    
        srchDispositionOpen : 1, // Show Planned Calls = CHECKED
    
        srchDispositionClosed : 1, // Show Completed Calls = CHECKED


        // ??????  Priority - ALL VALUES CHECKED

    }

    if( widget.activeConfig.salesRepId ) {
        let salesRepId = widget.activeConfig.salesRepId;
        if( ! Array.isArray( salesRepId )) {
            salesRepId = [ salesRepId ];

        }
        urlParams.srchStaffMbr = salesRepId.join( "," );
    } else if( widget.activeConfig.territoryPath ) {
        let territoryPath = widget.activeConfig.territoryPath;
        if( ! Array.isArray( territoryPath )) {
            territoryPath = [territoryPath];
        }
        urlParams.srchTerritoryPath = territoryPath.join( "," );
    }

    if( widget.activeConfig.mfr_id ) {
        urlParams.srchMfrID = widget.activeConfig.mfr_id;
    }


    let trimester = Fse.CRM.dateRanges.rangeByKey( `N,${widget.activeConfig.planningTimeframe}` );

    /* do not use the custom dates of the trimester, onlu use the trimester filter.
    urlParams.srchTimeframeOther = 1;
    urlParams.srchStartDt = DevExpress.localization.formatDate( new Date( trimester.startDate ), "MM/dd/yyyy");
    urlParams.srchEndDt = DevExpress.localization.formatDate( new Date( trimester.endDate ), "MM/dd/yyyy");
    urlParams.triMester = widget.activeConfig.planningTimeframe;
    */
    urlParams.srchPlanningTimeframe = `${trimester.fiscalYear}:T${trimester.periodIndex}`;
    urlParams.srchTimeframeOther = 0;


    let bcmURL = Fse.Util.updateURL2( $("link#PortalDocRootURL").attr( "href" ) + "/apps/BCM/index.cfm?view=list", urlParams )


    window.location.href = bcmURL;

}

TrimesterAchievementWidget.prototype.gotoObjectiveDashboard = function() {

    let widget = this;

    let trimester = Fse.CRM.dateRanges.rangeByKey( `N,${widget.activeConfig.planningTimeframe}` );

    let urlParams = {
        //srchPeriod : "CUST", --temporarily disabled until further notice
        //srchStartDt : DevExpress.localization.formatDate( new Date( trimester.startDate ), "MM/dd/yyyy"), --temporarily disabled until further notice
        //srchEndDt : DevExpress.localization.formatDate( new Date( trimester.endDate ), "MM/dd/yyyy") --temporarily disabled until further notice
        srchPeriod : "0000",
        srchStartDt : "",
        srchEndDt : "",
    }

    if( widget.activeConfig.salesRepId ) {
        urlParams.srchViewModeChoice = "REP";
        urlParams.stfId = widget.activeConfig.salesRepId;
    } else if ( widget.activeConfig.territoryPath ) {
        // TODO: figure out the territoryId that was used from the territoryPath
        urlParams.srchViewModeChoice = `TER|${widget.activeConfig.territoryPath}`;
    } else {
        urlParams.srchViewModeChoice = "OBJ";
    }

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

    function getSalesRepData() {
        return new Promise( (resolve, reject ) => {
            salesRepDataSource.load().done( ( data ) => {
                resolve( data );
            });
        });
    }

    getSalesRepData().then( ( data ) => {
        if( data.length > 0 ) {
            urlParams.stfId = data[0].valueId;
            urlParams.srchViewModeChoice = "REP";
        }

        let bmyoURL = Fse.Util.updateURL2( $("link#PortalDocRootURL").attr( "href" ) + "/apps/BMYO/index.cfm?view=list", urlParams )
        window.location.href = bmyoURL;
    }).catch( ( error ) => {
        console.error( "Error loading Sales Rep data:", error );
    })*/

    let bmyoURL = Fse.Util.updateURL2( $("link#PortalDocRootURL").attr( "href" ) + "/apps/BMYO/index.cfm?view=list", urlParams )
    window.location.href = bmyoURL;
}

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

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

TrimesterAchievementWidget.prototype.constructor = TrimesterAchievementWidget;

TrimesterAchievementWidget.prototype.getDefaultConfig = function( ) {
	
	return {
        planningTimeframe : "TT", // other values are TT (this trimester ) and LT (last trimester)
		territoryPath : null,
        //salesRepId : Fse.Portal.appConfiguration.STP.userId,
        salesRepId : null,
        mfr_id : null,
	}

}

TrimesterAchievementWidget.prototype.edit = function( applyFn ) {

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


		const items = [];

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

        items.push( { 
            label : { location : "left", text : "Timeframe" },
            dataField : "planningTimeframe",
            editorType : "dxSelectBox",
            editorOptions : {
                dataSource : { 
                    store : { type : "array", key : "planningTimeframe",
                              data : [
                                { planningTimeframe : "TT", planningTimeframeDisplay : "This Trimester" },
                                { planningTimeframe : "LT", planningTimeframeDisplay : "Last Trimester" }
                                // { planningTimeframe : "NT", planningTimeframeDisplay : "Next Trimester" }
                              ] }
                },
                displayExpr : "planningTimeframeDisplay",
                valueExpr : "planningTimeframe"
            }
    
        })
    

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

                }
            }
        /*
			editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
					dataSource : Fse.Data.newDataSource( { dataURL : widget.dataURL, object : "TER.salesTerritories", keyField : "territoryPath" } ),
					searchExpr : "territoryPath",
					searchMode : "contains",
					displayExpr : "territoryPath",
					multipleSelectedDisplay : "Multiple Territories Selected",
					keyExpr : "territoryPath",
					title : "Select Territories"
			})
            */
	  	});

        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",
			}
            /*
			editorOptions : Fse.UI.multiSelectDropDownBoxEditorOptions( {
				dataSource : Fse.Data.newDataSource( { dataURL : widget.dataURL, 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( 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"
                }
		        }
            );
            /*
            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( { dataURL : widget.dataURL, object : "PRD.manufacturers", keyField : "mfr_id" } ),
                        searchExpr : "mfr_name",
                        searchMode : "contains",
                        displayExpr : "mfr_name",
                        multipleSelectedDisplay : "Multiple Manufacturers Selected",
                        keyExpr : "mfr_id",
                        title : "Select Manufacturer"
                })
		        }
            );
            */            
        }

        


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


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


		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();    

}

TrimesterAchievementMetric = function( config ) {

    let widget = this; 

    let cssAttrs = { color : config.color };

    widget.rootElement = $("<div>").addClass( "trimesterMetric" ).addClass( config.type );

    let achievement = 0.0;

    if( config.target != 0 ) {
        achievement = config.actual / config.target;
    }

    $("<div>").append( DevExpress.localization.formatNumber(achievement, "percent") ).addClass( "trimesterAchievement" ).appendTo( widget.rootElement );




    $("<div>").append( config.caption ).addClass( "trimesterCaption" ).appendTo( widget.rootElement );

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

        showStatus : false,
        min : 0,
        max : config.target,
        value : config.actual,
        color : config.color

    }).appendTo( widget.rootElement );

    $("<div>").dxBox( {
        items : [ {
            ratio : 1,
            template : function() {
                return $("<div>")
                    .append( $("<div>").addClass( "trimesterValue" ).append(  DevExpress.localization.formatNumber( config.actual, { type : "fixedPoint", precision : 0 } ) ))
                    .append( $("<div>").addClass( "trimesterLabel" ).append( config.actualLabel ))
            }
        },{
            ratio : 1,
            template : function() {
                return $("<div>").css( { "text-align" : "right" } )
                    .append( $("<div>").addClass( "trimesterValue" ).append( DevExpress.localization.formatNumber( config.target, { type : "fixedPoint", precision : 0 } ) ))
                    .append( $("<div>").addClass( "trimesterLabel" ).append( config.targetLabel ))
            }

        }]
    }).appendTo( widget.rootElement );

}

TrimesterAchievementMetric.prototype.constructor = TrimesterAchievementMetric;

TrimesterAchievementMetric.prototype.getElement = function() {
    return this.rootElement;
}


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