OutstandingWorkflowRequestsWidget = function( widgetDef ) {

    instance = this;
    instance.widgetDef = widgetDef;

    instance.readyPromise = $.Deferred();
    instance.rootElement = $("<div>").addClass( "OutstandingWorkflowRequetsWidget" );

    instance.init();
    
}

OutstandingWorkflowRequestsWidget.prototype.constructor = OutstandingWorkflowRequestsWidget;

OutstandingWorkflowRequestsWidget.prototype.onContentResized = function( rect ) {

    // rect.height is the height in pixels for the widget content area (excluding the portlet frame stuff)

    // the tab height is a derivative of rect.height
    // the grid height for the to me tab is to fill the tab height
    // the grid height for the from me tab is the to fill the tab height less the height of the nudge button

    console.log( "OutstandingWorkflowRequestsWidget.onContentResized" );
    console.log( rect );

    let instance = this;
    instance.tabPanel.option( "height", rect.height );
    instance.toMeDataGrid.option( "height", rect.height );
    instance.fromMeDataGrid.option( "height", rect.height - 75 );
}

OutstandingWorkflowRequestsWidget.prototype.init = function() {

    let instance = this;


    instance.nudgeButton = $("<div>").dxButton( {
        text : "Nudge",
        disabled : true,
        onClick : function( e ) {

            let rowKeys = instance.fromMeDataGrid.getSelectedRowKeys();
            if( confirm( `Resend ${rowKeys.length} request(s)?` )) {
                // send nudge
                // reload

                e.component.option( "disabled", true );

                let nudgeURL = $("link#PortalDocRootURL").attr( "href" ) + "/apps/WRK/index.cfm?do=nudge";

                $.ajax( {
                    url : nudgeURL,
                    method : "post",
                    data : { nudge : rowKeys.join( "," ) }
                }).done( function() {
                    instance.load();
                })
            }

        }
    }).dxButton( "instance" );

    instance.fromMeToolbar = $("<div>").dxToolbar( {
        visible : false,
        items : [ 
            {
            location : "after",
            template : function() {
                    return instance.nudgeButton.element();
                }
            }
        ]

    }).dxToolbar( "instance" );

    instance.toMeDataGrid = instance.createToMeDataGrid();
    instance.fromMeDataGrid = instance.createFromMeDataGrid();

    instance.tabPanel = $("<div>").dxTabPanel( {

        xheight : "100%",
        noDataText : "You have no outstanding requests at this time.",
        
        itemTitleTemplate : function( item ) {

            let titleElement = $("<div>").append( item.title )
            item.titleElement = titleElement;

            /*
            if( item.workflowRequests ) {
                item.titleElement.css( { "color" : "red" } );
            }
            */

            return item.titleElement;
        },

        onContentReady : function( e ) {
            let emptyMessage = e.element.find( ".dx-empty-message" );
            emptyMessage.css( { "font-size" : "larger" } );
        }



    }).dxTabPanel( "instance")


    instance.rootElement.append( instance.tabPanel.element().css( "padding-bottom", "10px" ) );

    instance.load();

    
    


}

OutstandingWorkflowRequestsWidget.prototype.load = function() {

    let instance = this;

    let dataSource = Fse.Data.newDataSource( {
        object : "WRK.outstandingWorkflowRequests", keyField : "requestId", paginate : false
    })


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

        tabItems = [];

        let toMeData = DevExpress.data.query( data )
            .filter( [ "direction", "=", "IN" ] )
            .sortBy( "requestTime" )
            .thenBy( "responseDueDate" )
            .toArray();

        let toMeVisible = toMeData.length ? true : false ;


        if( toMeVisible ) {
            instance.toMeDataGrid.option( {
                "dataSource" : { store : { type : "array", data : toMeData, key : "requestId" }}, 
                "visible" : toMeVisible
            });
            tabItems.push( 
                { workflowRequests : toMeData.length, title : "To Me", template : function() {

                    return instance.toMeDataGrid.element();

                    return $("<div>" )
                        .css( "padding-bottom", "10px" )
                        // .append( instance.toMeDataGrid.element().css( "margin-bottom", "10px" ) );
                        .append( instance.toMeDataGrid.element().css( { "overflow" : "auto", "max-height" : "500px", "margin-bottom": "10px" } ) );
                }})
        }


    
        let fromMeData = DevExpress.data.query( data )
            .filter( [ "direction", "=", "OUT" ] )
            .sortBy( "requestTime" )
            .thenBy( "responseDueDate" )
            .toArray();

        let fromMeVisible = fromMeData.length ? true : false ;

        if( fromMeVisible ) {

            instance.fromMeDataGrid.option( {
                "dataSource" : { store : { type : "array", data : fromMeData, key : "requestId" }}, 
                "visible" : fromMeVisible,
                "selectedRowKeys" : []
            });
    
            instance.fromMeToolbar.option( { "visible" : fromMeVisible } );
    
            tabItems.push( 
                { workflowRequests : fromMeData.length, title : "From Me", template : function() {
                    /*
                    return $("<div>")
                        .css( "padding-bottom", "10px" )
                        .append( instance.fromMeDataGrid.element().css( "padding-bottom", "10px" ) )
                        .append( instance.fromMeToolbar.element().css( { "overflow" : "auto", "max-height" : "500px", "padding-right" : "10px" } ) )
                    */
                    return $("<div>")
                        .append( instance.fromMeDataGrid.element() )
                        .append( instance.fromMeToolbar.element().css( { "margin-top" : "5px" } ) );
                }}
            )
        }

        if( tabItems.length ) {
            instance.tabPanel.option( "items", tabItems );
        }

        // let the framework now it's loaded
        instance.readyPromise.resolve();

    })

}


OutstandingWorkflowRequestsWidget.prototype.createToMeDataGrid = function() {

    let instance = this;

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

        showBorders : true,
        scrolling : { mode : "virtual" },
        //height : "auto",
        columns : [
            { dataField : "requestTime", caption : "Date / Due", dataType : "date", width : 80,
                cellTemplate : function( container, options ) {
                    if( options.rowType !== "data" ) {
                        return;
                    }

                    // stack request date and due date
                    let requestDate = new Date( options.data.requestTime );
                    container.append( $("<div>").append( DevExpress.localization.formatDate( requestDate, "shortDate" ) ));

                    if( options.data.responseDueDate ) {
                        let dueDate = new Date( options.data.responseDueDate );
                        container.append( $("<div>").append( DevExpress.localization.formatDate( dueDate, "shortDate" ) ));
                    }
                }
            },
            { name : "request", dataField : "requestTitle", caption : "Request for You",
                cellTemplate : function( container, options ) {
                    if( options.rowType !== "data" ) {
                        return;
                    }


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

                    // stack title and annotation

                    let a = $("<a>").append( options.data.requestTitle );
                    a.css( { "cursor" : "pointer", "text-decoration" : "underline" } );
                    cell.append( a );

                    
                    a.on( 'click', function( ae ) {
                        instance.gotoRequest( options.data );
                    })
                   

                    if( options.data.requestAnnotation ) {
                        cell.append( $("<br>" ));
                        cell.append( options.data.requestAnnotation );
                    }

                    if( options.data.sendCount > 1 ) {

                        let formattedDate = DevExpress.localization.formatDate( new Date( options.data.requestSent ), "shortDate" );
                        cell.append( $("<br>") );
                        cell.append( $("<span>").css( { "font-size" : "smaller", "color" : "red" } ).append( `Last Sent on ${formattedDate}` ) )
                    }


                    container.append( cell );
                }
            },
            { dataField : "fromFullName", caption : "From", width : 150 },
        ],
        visible : false, // don't show unless there is data
        //scrolling : { mode : "virtual" },
        wordWrapEnabled: true,
        showRowLines: true



    }).dxDataGrid( "instance" );

   
    return instance.toMeDataGrid;

}



OutstandingWorkflowRequestsWidget.prototype.createFromMeDataGrid = function() {

    let instance = this;
    
    instance.fromMeDataGrid = $("<div>").dxDataGrid( {

        selection : { 
            mode : "multiple",
            allowSelectAll : false,
            selectAllMode : "allPages",
            showCheckBoxesMode : "always",
        },

        showBorders : true,
        scrolling : { mode : "virtual" },

        columns : [
            { dataField : "requestTime", caption : "Date / Due", dataType : "date", width : 80,
                cellTemplate : function( container, options ) {
                    if( options.rowType !== "data" ) {
                        return;
                    }
                    // stack request date and due date
                    let requestDate = new Date( options.data.requestTime );
                    container.append( $("<div>").append( DevExpress.localization.formatDate( requestDate, "shortDate" ) ));

                    if( options.data.responseDueDate ) {
                        let dueDate = new Date( options.data.responseDueDate );
                        container.append( $("<div>").append( DevExpress.localization.formatDate( dueDate, "shortDate" ) ));
                    }
                }
            },
            { name : "request", caption : "Request",
                cellTemplate : function( container, options ) {
                    if( options.rowType !== "data" ) {
                        return;
                    }

                    let cell = $("<div>")

                    if( options.data.requestSubject && options.data.requestSubject != "" ) {
                        cell.append( options.data.requestSubject )
                    } else {
                        cell.append( $("<strong>").append( options.data.requestTitle ) );
                    }

                    if( options.data.requestAnnotation && options.data.requestAnnotation != "" ) {
                        cell.append( $("<br>") );
                        cell.append( $("<span>").append( options.data.requestAnnotation ));
                    }

                    // scrum 46629 
                    cell.append( "<br>" );
                    let viewElement = $("<a>")
                        .text( "view" )
                        .css( { "cursor" : "pointer", "text-decoration" : "underline" } )
                        .on( "click", function() { instance.gotoRequest( options.data ) });
                    cell.append( viewElement );
                   
                    cell.append( $("<span>").css({ "padding" : "0 2px 0 2px" }) );    

                    let cancelElement = $("<a>")
                        .text( "cancel" )
                        .css( { "cursor" : "pointer", "text-decoration" : "underline" } )
                        .on( "click", function() { instance.cancelRequest( options.data ) });
                    cell.append( cancelElement );
                        
                    if( options.data.sendCount > 1 ) {

                        let formattedDate = DevExpress.localization.formatDate( new Date( options.data.requestSent ), "shortDate" );
                        cell.append( $("<br>") );
                        cell.append( $("<span>").css( { "font-size" : "smaller", "color" : "blue" } ).append( `Last Sent on ${formattedDate}` ) )
                    }

                    container.append( cell );
                }
            },
            { dataField : "toFullName", caption : "To", width : 150 },
        ],
        xheight : "100%",
        visible : false, // don't show unless there is data
        //scrolling : { mode : "virtual" },
        wordWrapEnabled: true,
        showRowLines: true,

        onSelectionChanged : function( e ) {
            let rowsSelected = e.selectedRowsData && e.selectedRowsData.length;
            instance.nudgeButton.option( { "disabled" : ! rowsSelected } );
        }



    }).dxDataGrid( "instance" );

    
    return instance.fromMeDataGrid;

}

OutstandingWorkflowRequestsWidget.prototype.cancelRequest = function( data ) {

    let instance = this;

    Fse.WRK.cancelRequest( data.requestId,'Cancel this request?',function(){ 
        instance.load();
    })    

}


OutstandingWorkflowRequestsWidget.prototype.gotoRequest = function( data ) {

    let requestURL = data.requestURL;
    console.log( `1. ${requestURL}` );

    let portalDocRootURL = $("link#PortalDocRootURL").attr( "href" );
    requestURL = requestURL.replace( /^https:\/\/.*\.salesteamportal\.com/i, portalDocRootURL );
    console.log( `2. ${requestURL}` );

    if( data.homeRequest ) {
        requestURL = requestURL.replace( /public\/workflow.cfm\?/i, "apps/WRK/index.cfm?view=request&" );
       console.log( `2a. ${requestURL}` );
    }

    requestURL = Fse.Util.updateURL2( requestURL, { b : window.location.href } );
    console.log( `3. ${requestURL}` );

    window.location.href = requestURL;

}


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

OutstandingWorkflowRequestsWidget.prototype.getDefaultConfig = function() {
    return {
        // no configurable options at this time
    };
}

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

/* no preferences for this widget
OutstandingWorkflowRequestsWidget.prototype.edit = function() {
    preference implemtation would go here
}
*/

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