TradeTasks = function( options ) {
    let instance = this;

    //instance.payableData = $.extend( true, {}, options );
    
    instance.partnerType = options.partnerType;
    instance.partnerId = options.partnerId;

    this.rootElement = null;
}

TradeTasks.prototype.constructor = TradeTasks;

TradeTasks.prototype.element = function() {
    let instance = this;

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

    instance.rootElement = $( '<div>' );

    instance.createToolbar();
    instance.createDataGrid();

    instance.rootElement.append( instance.toolbar.element().css( { 'margin' : '5px', 'padding-right' : '10px' } ) );
    instance.rootElement.append( instance.dataGrid.element() );
    
    return instance.rootElement;
}

TradeTasks.prototype.createToolbar = function() {
    let instance = this;

    var sPortalDocRootURL = $("link#PortalDocRootURL").attr("href");

    let taskDispositions = [
        { id: '?,A', text: 'Current' },
        { id: '?', text: 'To Do' },
        { id: 'A', text: 'In Progress' },
        { id: 'X', text: 'Complete' },
        { id: '?,A,X', text: 'All' },
    ]
    instance.toolbar = $( '<div>' ).dxToolbar({
        items:[
            {
                widget: 'dxSelectBox',
                location: 'before',
                options: {
                    width: 200,
                    items: taskDispositions,
                    displayExpr: 'text',
                    valueExpr: 'id',
                    value: taskDispositions[4].id,
                    onValueChanged: function( args ) {
                        let taskDataSource = Fse.Data.newDataSource( 
                            { object: 'TPM.TradeTasks', keyField: 'taskId', paginate: false, objectParams: { partnerId: instance.partnerId, partnerType: instance.partnerType, disposition: args.value } }
                        )

                        instance.dataGrid.option( 'dataSource', taskDataSource );
                    },
                },
            },
            {
                location : "after", widget : "dxButton", options : {
                    type : "normal",
                      icon :"help",
                      hint : "View Help",
                      onClick : function( e ) {
                          Fse.Portal.showQuickHelp( "PartnerTradeTasks" );
                      }
                }
            }
        ]
    }).dxToolbar( 'instance' );

    return instance.toolbar.element();
}

TradeTasks.prototype.createDataGrid = function() {
    let instance = this;

    if( instance.dataGrid ) {
        instance.dataGrid.element().remove();
        instance.dataGrid = null;
    }

    /*const taskDataSource = Fse.Data.createDataSource({
        customStore: {
            dataURL: $( '#appDataURL' ).attr( 'href' ),
            object: 'TPM.TradeTasks',
            objectParams: { partnerId: this.partnerId, partnerType: this.partnerType }
        }
    });*/

    const taskDataSource = Fse.Data.newDataSource( 
        { object: 'TPM.TradeTasks', keyField: 'taskId', paginate: false, objectParams: { partnerId: this.partnerId, partnerType: this.partnerType } }
    )

    instance.dataGrid = $( '<div id="taskDataGrid">' ).dxDataGrid({
        dataSource: taskDataSource,
        showBorders: false,
        allowColumnResizing: true,
        filterRow : { visible : true },
        headerFilter : { visible : true },
        columns: [
            { dataField: 'taskDescription', caption: 'Task', width: '300',
                cellTemplate: function( container, options ) {
                    var link = $( '<a>' ).text( options.data.taskDescription ).css( { 'display' : 'inline-block', 'cursor' : 'pointer' } ).on( 'click', function() { 
                        Fse.WRK.editTask( options.data.taskId, options.data.taskTk );
                    } );

                    $( container ).append( link );
                },
            },
            { dataField: 'assignedToFullName', caption: 'Assigned To',
                calculateFilterExpression: function( filterValue, selectedFilterOperation ) {
                    return [
                        ["assignedToFullName", "contains", filterValue],
                    ];
                }
            },
            { dataField: 'sendFrom', caption: 'Send From', 
                calculateFilterExpression: function( filterValue, selectedFilterOperation ) {
                    return [
                        ["sendFrom", "contains", filterValue],
                    ];
                }
            },
            { dataField: 'status', caption: 'Status',
                cellTemplate: function( container, options ) {
                    let status = '';
                    if( options.data.disposition == '?' ) {
                        status = 'To Do';
                    } else if( options.data.disposition == 'A' ) {
                        status = 'In Progress';
                    } else if ( options.data.disposition == 'X' ) {
                        status = 'Complete';
                    } else {
                        status = options.data.disposition;
                    }
                    container.append( status );
                },
                calculateFilterExpression: function( filterValue, selectedFilterOperation ) {
                    return [
                        ["status", "contains", filterValue],
                    ];
                }
            },
            { dataField: 'requestTime', caption: 'First Sent', dataType: 'date' },
            { dataField: 'requestSent', caption: 'Last Sent', dataType: 'date' },
        ],
    }).dxDataGrid( 'instance' );

    return instance.dataGrid.element();
}