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

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

    this.rootElement = null;
}

TradePayables.prototype.constructor = TradePayables;

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

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

    instance.rootElement = $( '<div>' );
    
    //create elements
    instance.createToolbar();
    instance.createDataGrid();
    
    //append elements
    instance.rootElement.append( instance.toolbar.element().css( { 'margin' : '5px', 'padding-right' : '10px' } ) );
    instance.rootElement.append( instance.dataGrid.element() );

    return instance.rootElement;
}

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

    const appDataURL = $( '#appDataURL' ).attr( 'href' );

    const payableDataSource = Fse.Data.createDataSource({
        customStore: {
            dataURL: appDataURL,
            object: 'TPM.payables',
            objectParams: { partnerId: this.partnerId, partnerType: this.partnerType, status: 'A' },
        }
    });

    instance.dataGrid = $( '<div id="payableDataGrid">' ).dxDataGrid({
        dataSource: payableDataSource,
        showBorders: true,
        filterRow: { visible: true },
        selection: { mode: 'single' },
        scrolling: { mode: 'virtual' },
        remoteOperations: { filtering: true, paging: true, sorting: true },
        columns: [
            { width: '200', dataField: 'payerCode', caption: 'Payer ID', allowSorting: false, },
            { width: '300', dataField: 'payableTo', caption: 'Payable', allowSorting: false, },
            { dataField: 'address1', caption: 'Address', allowSorting: false,
                cellTemplate: function( container, options ) {
                    let sAddress = options.data.address1;
                    if( options.data.address2 ) {
                        sAddress = sAddress + '<br>' + options.data.address2;
                    }
                    sAddress = sAddress + '<br>' + options.data.city + ', ' + options.data.state + ' ' + options.data.zipcode;
                    if( options.data.attention ) {
                        sAddress = sAddress + '<br>Attn: ' + options.data.attention;
                    }
                    $( '<span>' ).append( sAddress ).appendTo( container );
                }, 
            },
            { width: '30', name: 'payableActions', 
                type: 'buttons',
                buttons: [{
                    template: function( data ) {
                        let button = $( '<div>' ).addClass( 'dx-icon-overflow' ).css( { 'display' : 'inline-block', 'cursor' : 'pointer' } );
                        return button;
                    }
                }],
            },
        ],
        showRowLines: false,
        rowAlternationEnabled: true,
        filterRow : { visible : true },
        headerFilter : { visible : false },
        onCellClick: function( cce ) {
            const data = cce.data;

            if( cce.column.name === 'payableActions' && data.partnerPayableId > 0 ) {

                  let items = [];

                if(data.sourceType !== 'EAI' )
                {
                    items.push( { text: 'Edit', actionCode: 'editPayable' } );
                    items.push( { text: 'Delete', actionCode: 'deletePayable' } );
                }
                else{

                items.push( { text: 'Delete', actionCode: 'deletePayable' } );
                }

                $( '<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 'deletePayable':
                                    instance.deletePartnerPayable( data );
                                break;

                                case 'editPayable':
                                    instance.payableData = $.extend( true, data, instance.payableData );
                                    instance.editPartnerPayable( instance.payableData );
                                break;
                            }
                        }
                        cme.component.hide();
                    },
                    target: cce.cellElement,
                }).appendTo( 'body' ).dxContextMenu( 'show' );
            }
        },
    }).dxDataGrid( 'instance' );

    return instance.dataGrid.element();
}

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

    instance.toolbar = $( '<div>' ).dxToolbar({
        items:[{
            widget: 'dxButton',
            location: 'after',
            options: {
                icon: 'add',
                hint: 'New Payable',
                onClick: function() {
                    instance.addPartnerPayable();
                }
            }
        },{
            location : "after", widget : "dxButton", options : {
                type : "normal",
                  icon :"help",
                  hint : "View Help",
                  onClick : function( e ) {
                      Fse.Portal.showQuickHelp( "PartnerTradePayables" );
                  }
            }
        }]
    }).dxToolbar( 'instance' );

    return instance.toolbar.element();
}

TradePayables.prototype.addPartnerPayable = function() {
    let instance = this;

    instance.partnerPayableEditor = new PartnerPayableEditor( { partnerId: this.partnerId, partnerType: this.partnerType, partnerPayableId: 0 } );

    instance.partnerPayableEditor.show();
}

TradePayables.prototype.editPartnerPayable = function( data ) {
    let instance = this;

    instance.partnerPayableEditor = new PartnerPayableEditor( data );

    instance.partnerPayableEditor.show();
}

TradePayables.prototype.deletePartnerPayable = function( data ) {
    let instance = this;

    let d = $.Deferred();

    if( confirm( 'Delete Payable?' ) ) {

        //let deleteURL = Fse.Util.updateURL2( $( '#appActionURL' ).attr( 'href' ), { object: 'TPM.act_deletePartnerPayable' } );

        var sDeleteURL = $("link#PortalDocRootURL").attr("href") + "/apps/TPM/index.cfm?do=deletePartnerPayable";

        $.ajax({
            url: sDeleteURL,
            method: 'POST',
            data: { partnerPayableId: data.partnerPayableId },
        }).done( function( e ) {
            d.resolve( e );
            instance.dataGrid.refresh();
        }).fail( function() {
            console.log( 'failed' );
        })
    }

    return d;
}