OperatorObjectives = function( operatorData ) {


    this.operatorId = operatorData.operatorId;

}

OperatorObjectives.prototype.constructor = OperatorObjectives;

OperatorObjectives.prototype.element = function() {

    let instance = this;

    let content = $("<div>");
    let salesRepId =  Fse.Portal.appConfiguration.STP.userId;


    let linkedObjectivesDataGrid = null;





    let addObjectives = function() {

        let eligibleObjectivesDataGrid = null;
        let targetObjectives = {};

        let submitButton = $("<div>").dxButton( {
            text : "Target Selected Objectives",
            onClick : function( e ) {
    
    
                eligiblePopup.hide();

                let dataToSend = {
                    operatorId : instance.operatorId,
                    salesRepId : salesRepId,
                    objectiveId : []
                }
    
                for( let objId in targetObjectives ) {
                    if( targetObjectives[objId] ) {
                        dataToSend.objectiveId.push( objId );
                    }
                }
    
                Fse.Ajax.performAction( {
                    object : "OPR.addOperatorToObjectives", 
                    data : dataToSend
                }).done( function( result ) {
    
                    Fse.UI.toast( `New Targets Added`, "success", 1000 );
                    linkedObjectivesDataGrid.refresh();
        
                });
    
            },
            disabled : true,
            type : "default"
        }).dxButton( "instance" );        

        let updateTargeting = function( objectiveId, target ) {

            targetObjectives[objectiveId] = target;
    
            let targetsPresent = false;
            for( let objId in targetObjectives ) {
                if( targetObjectives[objId] ) {
                    targetsPresent = true;
                    break;
                }
            }
    
            submitButton.option( "disabled", targetsPresent ? false : true );
    
    
        }

        eligiblePopup = $("<div>").dxPopup( {
            title : "Eligible Objectives",
            height : 425,
            xwidth : 600,
            hideOnOutsideClick : false,
            contentTemplate : function() {

                eligibleObjectivesDataGrid = $("<div>").dxDataGrid( {

                    showBorders : true,
                    scrolling : { mode : "virtual" },
                    height : 325,
                    dataSource : Fse.Data.newDataSource( { object : "BOM.eligibleObjectives", keyField : "objectiveId", paginate : false, objectParams : { 
                        operatorId : instance.operatorId
                    }}),
            
                    columns : [
                        { type : "buttons", width : 30,
                            name : "viewObjectiveSummary",
                            buttons : [
                                { icon : "info", hint : "View Objective Summary", onClick : function( e ) {
            
            
                                    let objectiveId = e.row.data.objectiveId;
                                    let oLink = document.getElementById( "oprHandlerLink" );
                                    let sURL = oLink.getAttribute( "href" ) + "?get=objectiveOverview&objectiveId=" + encodeURIComponent( objectiveId );
                                
                                    let oOptions = { 
                                        title : "Objective Overview",
                                        width : "600px",
                                        src : sURL,
                                        namedButtons : "close"
                                    };
                                    
                                    Fse.DialogManager.show( "objectiveOverviewDialog$", oOptions );
                                }}
                            ]
                        },
                        { dataField : "objName", caption : "Objective" },
            
                        { dataField : "targetCount",caption : "Targets", dataType : "number", width : 100,
                            cellTemplate : function( container, options ) {
                                if( options.data.linkStatus == "ELIGIBLE" ) {
                                    container.append( options.text );
                                }
                            }
                         },
                        { dataField : "quota", caption : "Quota", dataType : "number", width : 100,
                            cellTemplate : function( container, options ) {
                                if( options.data.linkStatus == "ELIGIBLE" ) {
                                    container.append( options.text );
                                }
                            }
            
                         },
                        { dataField : "quotaAchieved", caption : "Achievement", dataType : "number", width : 100,
                            cellTemplate : function( container, options ) {
                                if( options.data.linkStatus == "ELIGIBLE" ) {
                                    container.append( options.text );
                                }
                            }
            
                         },
                        {
                            caption : "Target",
                            width : 70,
                            name : "operatorSelected",
                            cellTemplate : function( container, options ) {
                                if( options.data.linkStatus == "ELIGIBLE" ) {
            
                                    const objectiveId = options.data.objectiveId;
            
                                    $("<div>").dxCheckBox({
                                        onValueChanged : function( ee ) {
                                           updateTargeting( objectiveId, ee.value );
                                        }
            
            
                                    }).appendTo( container );
                                }
                            }
                        }
                    ]
            
                }).dxDataGrid( "instance" );

                return eligibleObjectivesDataGrid.element();
            },
            onHidden : function( e ) {
                eligiblePopup.element().remove();
                eligiblePopup.dispose();
            },
            toolbarItems : [
                { 
                    toolbar : "bottom",
                    location : "after",
                    template : function() {
                        return submitButton.element();
                    }
                }
            ]
        }).dxPopup( "instance" );

        $("body").append( eligiblePopup.element() );
        eligiblePopup.show();

    }

    linkedObjectivesDataGrid = $("<div>").dxDataGrid( {


        showBorders : true,
        scrolling : { mode : "virtual" },
        height : 450,
        rowAlternationEnabled : true,
        dataSource : Fse.Data.newDataSource( { object : "OPR.operatorObjectives", keyField : "objectiveId", paginate : false, objectParams : { 
            operatorId : instance.operatorId
        }}),

        columns : [
            /*
            { dataField : "linkStatusKey", groupIndex : 0,
                groupCellTemplate : function( container, options ) {
                    if( options.value == 1 ) {
                        container.append( "LINKED OBJECTIVES" )
                    } else {
                        container.append( "ELIGBILE OBJECTIVES" )
                    }
                }
             },
            */
            { type : "buttons", width : 30,
                name : "viewObjectiveSummary",
                buttons : [
                    { icon : "info", hint : "View Objective Summary", onClick : function( e ) {
                        instance.viewObjectiveSummary( e.row.data );
                    }}
                ]
            },
            { dataField : "objName", caption : "Objective" },
            { dataField : "objOwnerName", caption : "Owner" },

            { dataField : "publishDate", caption : "Start Date", dataType : "date", format : "shortDate", width : 85 },
            { dataField : "unpublishDate", caption : "End Date", dataType : "date", format : "shortDate", width : 85 },
            { dataField : "daysRemaining", caption : "Days Remaining", dataType : "number", width : 110 },
            { dataField : "achievement", caption : "Achievement", dataType : "number", format : "percent", width : 90 },
            { name : "objectiveActions", visible : true, showInColumnChooser : false, width : 30,
                type: "buttons",
                buttons: [{
                    template: function(data) {
                        let button = $("<div>").addClass("dx-icon-overflow").css( { "display" : "inline-block", "cursor" : "pointer" });
                        return button;
                    }
                }]
            }
    

            
            /*,

            { dataField : "targetCount",caption : "Targets", dataType : "number", width : 100,
                cellTemplate : function( container, options ) {
                    if( options.data.linkStatus == "ELIGIBLE" ) {
                        container.append( options.text );
                    }
                }
             },
            { dataField : "quota", caption : "Quota", dataType : "number", width : 100,
                cellTemplate : function( container, options ) {
                    if( options.data.linkStatus == "ELIGIBLE" ) {
                        container.append( options.text );
                    }
                }

             },
            { dataField : "quotaAchieved", caption : "Achievement", dataType : "number", width : 100,
                cellTemplate : function( container, options ) {
                    if( options.data.linkStatus == "ELIGIBLE" ) {
                        container.append( options.text );
                    }
                }

             },
            {
                caption : "Target",
                width : 70,
                name : "operatorSelected",
                cellTemplate : function( container, options ) {
                    if( options.data.linkStatus == "ELIGIBLE" ) {

                        const objectiveId = options.data.objectiveId;

                        $("<div>").dxCheckBox({
                            onValueChanged : function( ee ) {
                               updateTargeting( objectiveId, ee.value );
                            }


                        }).appendTo( container );
                    }
                }
            }
            */
        ],

        onCellClick : function( cce ) {
            if( cce.rowType != "data" ) {
                return;
            }

            const data = cce.data;

            if( cce.column.name === "objectiveActions" ) {
                // create a context menu


                if( data.objectiveId ) {



                    let items = [
                        { text : "View Objective Summary", actionCode : "viewObjectiveSummary" },
                        { text : "Go to Objective Dashboard", actionCode : "objectiveDashboard" }
                    ];


                    $("<div>").dxContextMenu( {
                        items : items,
                        hideOnOutsideClick : true,
                        onHidden : function( cme ) {
                            cme.component.element().remove();
                            cme.component.dispose();
                        },
                        onItemClick : function( cme ) {

                            if( cme.itemData.actionCode ) {
                                switch ( cme.itemData.actionCode ) {

                                    case "viewObjectiveSummary" :
                                        instance.viewObjectiveSummary( data );
                                    break;
                                    case 'objectiveDashboard' :
                                        instance.gotoObjectiveDashboard( data );
                                    break;
                                  
                                }
                            }

                            cme.component.hide();
                        },
                        target : cce.cellElement
                    }).appendTo( "body" ).dxContextMenu("show");

                    
                }

            }

        }    
    }).dxDataGrid( "instance" );

    content.append( linkedObjectivesDataGrid.element() );

    
    $("<div>").dxToolbar( {
        items : [
            { 
                location : "after",
                widget : "dxButton",
                options : {
                    text : "Add Objectives",
                    onClick : function( e ) {
                        addObjectives();
                    }
                }
            }
        ]
    }).css( { "margin-top" : "5px", "margin-bottom" : "5px" } ).appendTo( content );
    

    return content;


}

OperatorObjectives.prototype.gotoObjectiveDashboard = function( data ) {


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


    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;

}

OperatorObjectives.prototype.viewObjectiveSummary = function( data ) {

    let objectiveId = data.objectiveId;
    let oLink = document.getElementById( "oprHandlerLink" );
    let sURL = oLink.getAttribute( "href" ) + "?get=objectiveOverview&objectiveId=" + encodeURIComponent( objectiveId );

    let oOptions = { 
        title : "Objective Overview",
        width : "600px",
        src : sURL,
        namedButtons : "close"
    };
    
    Fse.DialogManager.show( "objectiveOverviewDialog$", oOptions );    
}