PartnerInteractions = function( options ) {

    let instance = this;
    instance.rootElement = null;

    instance.options = $.extend( true, {}, options );

}

PartnerInteractions.prototype.constructor = PartnerInteractions;

PartnerInteractions.prototype.element = function() {

    let instance = this;


    if( instance.rootElement ) {
        return instance.rootElement;
    }


    instance.rootElement = $("<div>")

    let workflowForms = [];


    let updateDisplay = function() {

        let objectParams =  {
            partnerId : instance.options.partnerId,
            partnerType : instance.options.partnerType
        }

        let salesRepId = salesRepSelectBox.option( 'value' );
        if( salesRepId ) {
            objectParams.salesRepId = salesRepId
        }

        if( mfrSelectBox ) {
            let mfr_id = mfrSelectBox.option( 'value' );
            if( mfr_id ) {
                objectParams.mfr_id = mfr_id
            }
        }

        let inclDirectMarketing = inclDirectMarketingCheckBox.option( "value" ) 
        if( inclDirectMarketing ) {
            objectParams.inclDirectMarketing = true;
        }

        let dateRange= dateRangeSelectBox.option( "value" );
        if( dateRange ) {
            objectParams.dateRange = dateRange;
        }
        

        let dataSource = Fse.Data.newDataSource( { object : "CRM.partnerInteractions", paginate : false, keyField : "interactionId", objectParams : objectParams });        

        dataSource.on( "loadingChanged", function( isLoading ) {
            if( ! isLoading ) {
                let totalCalls = dataSource.totalCount();
                let totalCallsDisplay = `[Total Calls: ${totalCalls}]`;
                instance.totalCallsSocket.text( totalCallsDisplay );
            }
        } )
        instance.dataGrid.option( "dataSource", dataSource );

    }

    let salesRepSelectBox = $("<div>").dxSelectBox( {
        displayExpr : "salesRepFullName",
        valueExpr : "salesRepId",
        showClearButton : true,
        placeholder : "sales rep",
        searchEnabled : true,
        searchExpr : "salesRepFullName",
        searchMethod : "startwith",

        onValueChanged : function( e ) {
            updateDisplay()
        }
    }).dxSelectBox( "instance" )


    let inclDirectMarketingCheckBox = $("<div>").dxCheckBox( {
            text : "Incl. Direct Marketing",
            value : true,
            onValueChanged : function( e ) {
                updateDisplay();
            }
    }).dxCheckBox( "instance" );


    let dateRangeSelectBox = $("<div>").dxSelectBox( {
        showClearButton : true,
        displayExpr : "text",
        valueExpr : "dateRange",
        placeholder : "last 12 months",
        dataSource : [ 
            { text : "last 24 months", dateRange : "24" },
            { text : "all", dateRange : "ALL"}
        ],
        onValueChanged : function( e ) {
            updateDisplay();
        }
    }).dxSelectBox( "instance" );

    let toolbarItems = [];

    toolbarItems.push( 
        { location : "before", widget : "dxButton", 
            options : { 
                "text" : "New Call",
                onClick : function( e ) {
                    Fse.CLOS.createAccountInteraction(instance.options.partnerId, instance.options.partnerType,function(){updateDisplay()},0);
                }
            }
        },

        { location : "after", template : function() {
            return inclDirectMarketingCheckBox.element()
        }},
        { location : "after", template : function() {
            return salesRepSelectBox.element().css( { "margin-left" : "5px" });
        } }

    )

    let mfrSelectBox = null;

    if( Fse.Portal.appConfiguration.STP.ownerType != "MFR" ) {
        mfrSelectBox = $("<div>").dxSelectBox( {
            width : 250,
            displayExpr : "mfr_name",
            valueExpr : "mfr_id",
            showClearButton : true,
            placeholder : "manufacturer",
            searchEnabled : true,
            searchExpr : "mfr_name",
            searchMethod : "startwith",
            onValueChanged : function( e ) {
                updateDisplay();
            }
        }).dxSelectBox( "instance" )

        toolbarItems.push( 
            { location : "after", template : function() { 
                return mfrSelectBox.element().css( { "margin-left" : "5px" })
            } }
        )
    
    }


    toolbarItems.push(
        { location : "after", 
            template : function() {
                return dateRangeSelectBox.element().css( { "margin-left" : "5px" })
            }
        }
    )

    instance.totalCallsSocket = $("<div>").text( "[Total Calls: 0]" ).css( { "padding-left" : "5px", "padding-right" : "5px" } );

    toolbarItems.push( {
        location : "after",
        template : function() {
            return instance.totalCallsSocket;
        }
    })

    toolbarItems.push( 
    {
        location : "after", widget : "dxButton", options : {
            type : "normal",
              icon :"help",
              hint : "View Help",
              onClick : function( e ) {
                  Fse.Portal.showQuickHelp( "PartnerInteractions" );
              }
        }
    });



    instance.toolbar = $("<div>").dxToolbar( {
       items : toolbarItems
    }).dxToolbar( "instance" );
    instance.toolbar.element().css( "margin-bottom", "5px" )

    // instance.rootElement.append( instance.toolbar.element() );

    instance.dataGrid = $("<div>").dxDataGrid( {

        height : "100%",
        showBorders : true,
        scrolling : { mode : "virtual" },
        rowAlternationEnabled : true,
        columns : [
            { dataField : "interactionDate", caption : "Call Date", dataType : "date", width : 100,

                cellTemplate : function( container, options ) {
                    if( options.value ) {
                        container.append( DevExpress.localization.formatDate( options.value, "shortDate" ))
                    } else {
                        container.append( $("<span>").text( "TBD" ).css( "font-style", "italic" ))
                    }
                }
             },
            { dataField : "salesRepFullName", caption : "Sales Rep", width : 120 },
            { dataField : "notes", caption : "Notes", cellTemplate : function( container, options ) {
                    let content = $("<div>");

                    let hasValue = false;

                    if( options.data.notes ) {
                        content.append( $("<div>").css( "padding-bottom", "5px" ).text( options.data.notes ))
                        hasValue = true;
                    }
                    if( options.data.recapContentURL ) {

                        content.append( $("<div>").append( $("<a>").attr( { target : "_blank", href : options.data.recapContentURL }).text( "RECAP SENT" ) ));
                        hasValue = true;
                    } else if( options.data.recapPending ) {
                        content.append( $("<div>").text( "SENDING RECAP" ) );
                    }

                    if( hasValue ) {
                        container.append( content );
                    }
                } 
            },
            { dataField : "statusDisplay", caption : "Status", width : 100 },

            { name : "intActions", 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;
                    }
                }]
            }
           
            
        ],
        onRowDblClick : function( cce ) {
            if( cce.rowType != "data" ) {
                return;
            }

            let interactionData = cce.data;

            if( interactionData.disposition == "?" ) {
                Fse.CLOS.openInteractionDialog(interactionData.interactionId,function() { updateDisplay() });
            } else {

                if( Fse.Portal.checkPermission( 'BCRMObjectiveManagement') || Fse.Portal.checkPermission( 'BCRMClosedCallEdit')) {
                    Fse.CLOS.openInteractionDialog(interactionData.interactionId,function() { updateDisplay() });
                } else {
                    Fse.CLOS.openInteractionDialog(interactionData.interactionId,function() { updateDisplay() },0,0,false);
                }

            }

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

            const interactionData = cce.data;

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


                let ready = $.Deferred();
                let waitingOn = 2;

                ready.progress( function() {
                    waitingOn = waitingOn - 1;
                    if( waitingOn == 0 ) {
                        ready.resolve();
                    }
                })


                ready.resolve();

                ready.done( function() {

                    let items = [];

                    if( interactionData.disposition == "?" ) {
                        items.push( { text : "Complete Call", actionCode : "openInteraction" } )
                    } else {

                        if( Fse.Portal.checkPermission( 'BCRMObjectiveManagement') || Fse.Portal.checkPermission( 'BCRMClosedCallEdit')) {
                            items.push( { text : "Edit Call", actionCode : "openInteraction" } )
                        } else {
                            items.push( { text : "View Call", actionCode : "viewInteraction" } )
                        }

                    }

                    if( interactionData.sourceType != 'EML' ) {
                        items.push( { text : "Copy Call", actionCode : "copyInteraction" } )
                    }

                    if( interactionData.disposition == "?" ) {
                        items.push( { text : "Delete Call", actionCode : "deleteInteraction" } ) 
                    }
                    

                    let recapEnabled = Fse.Portal.checkPermission( "BCRMSendCallRecap" ) && Fse.Portal.getConfiguration ( "CRM.SalesCallRecapEnabled" ) == "true";

                    if( recapEnabled && interactionData.disposition != "?" && interactionData.sourceType != 'EML' ) {
                        items.push( { text : "Send Recap", actionCode : "recapInteraction"})
                    }

                    if( interactionData.emailId ) {
                        items.push( { text : "View Email", actionCode : "viewEmailInteraction" })
                    }

                    workflowForms.forEach( function( workflowForm  ) {

                        items.push( { text : `Submit '${workflowForm.formName}' Form`, actionCode : "submitWorkflowForm", workflowForm : workflowForm } )

                        
                    })



                    $("<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 'openInteraction' :
                                        Fse.CLOS.openInteractionDialog(interactionData.interactionId,function() { updateDisplay() });
                                    break;

                                    case 'viewInteraction' : 
                                        Fse.CLOS.openInteractionDialog(interactionData.interactionId,function() { updateDisplay() },0,0,false);
                                    break;

                                    case "copyInteraction" :
                                        Fse.CLOS.openInteractionDialog( 0, function() { updateDisplay() }, 0, Fse.Portal.appConfiguration.STP.userId, true, interactionData.interactionId )
                                    break;

                                    case "deleteInteraction" : {

                                        let allowDelete = false;

                                        if( Fse.Portal.checkPermission( 'BCRMObjectiveManagement') ) {
                                            allowDelete = true;
                                        } else if( ! interactionData.hardObjLinks ) {
                                            allowDelete = true;
                                        }

                                        if( allowDelete ) {

                                            let deleteURL = Fse.Util.updateURL2( Fse.CLOS.baseURL, {
                                                view : "listpg-call-list-interaction-delete",
                                                mode : "direct",
                                                interactionID : interactionData.interactionId
                                            })

                                            if( confirm( "Delete this interaction?" )) {
                                                // alert( deleteURL );
                                                Fse.Ajax.getURL( deleteURL, function() { updateDisplay() } );
                                            }

                                        } else {
                                            alert( 'Sales Call is an Objective Target.  Only administrators can delete.' );
                                        }
                                        
                                    }
                                    break;

                                    case "recapInteraction" :

                                        let scrd = new SalesCallRecapDialog( { interactionID : parseInt( interactionData.interactionId ) });

                                        let scrdPromise = scrd.show();
                                        scrdPromise.done( function() {
                                            instance.dataGrid.refresh();
                                        })
                                
                                    break;

                                    case "viewEmailInteraction" :
                                        let emailURL = Fse.Util.updateURL2( $("link#PortalDocRootURL").attr( "href" ) + "/portlets/emailHistory/content.cfm", {
                                            uid :  Fse.Portal.appConfiguration.STP.userId,
                                            utk :  Fse.Portal.appConfiguration.STP.userTk,
                                            eid : interactionData.emailId,
                                            etk : interactionData.emailIdTk
                                        })
                                        
                                        Fse.Portal.popupWindow('Email',emailURL, 750 );
                                    break;

                                    case "submitWorkflowForm" :
                                        Fse.WRK.openWorkflowForm( cme.itemData.workflowForm.formId, 0, interactionData.interactionId, 'CLL', function() { updateDisplay() } );
                                    break;

                                }
                            }

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

                })
            

            }

        }   


    }).dxDataGrid( "instance" );



    // instance.rootElement.append( instance.dataGrid.element() );

    instance.rootElement.dxBox( {
        direction : "col",
        height : "100%",
        items : [
            { baseSize : 30, template : function() { return instance.toolbar.element() }},
            { ratio : 1, template : function() { return instance.dataGrid.element() }}
        ]
    })

    let metaDataDS = Fse.Data.newDataSource( { object : "CRM.partnerInteractionMetaData", objectParams : {
        partnerId : instance.options.partnerId,
        partnerType : instance.options.partnerType
    }});

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

        console.log( "META DATA" );
        console.log( data )

        if( ! data.length ) {
            return;
        }
        if( data[0].salesReps.length ) {
            salesRepSelectBox.option( "dataSource", data[0].salesReps );
        }
        if( mfrSelectBox && data[0].manufacturers.length ) {
            mfrSelectBox.option( "dataSource", data[0].manufacturers );
        }

        workflowForms = data[0].workflowForms

        updateDisplay();
    })



    return instance.rootElement;    

}