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

    instance.partnerId = options.partnerId;
    instance.partnerType = options.partnerType;

    this.rootElement = null;
}

TradeAgreementRefs.prototype.constructor = TradeAgreementRefs;

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

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

    instance.rootElement = $("<div>").addClass( "TradeAgreementRefs" ).css({ "height": "100%" });

    let sPartnerType = 'Operator';
    if( instance.partnerType !== 'OPR' ) {
        sPartnerType = 'Distributor';
    }

    //create elements
    //$( '<p>' ).html( 'The following Claim Contract Ref#s provided by this ' + sPartnerType + ' have been mapped to the associated Trade Contract#s below. If a <span style="color:red;">Claim Contract Ref# is red</span>, it has been mapped to more than one Trade Contract#. If a <span style="color:red;">Trade Contract# is red</span>, multiple Claim Contract Ref#s have been mapped to it.' )
    $( '<p>' ).html( 'The following Claim Contract Ref#s provided by this ' + sPartnerType + ' have been mapped to the associated Trade Contract#s below.' )
        .css( 'margin', '10px' )
        .appendTo( instance.rootElement );
    $( '<p>' ).text( 'Explicit mappings can be removed by checking the box next to the Explicit mapping (E) and clicking the "remove selected mappings" button.  Removing a mapping will not affect any previously processed or in process claims.  The Claim Contract Ref# is encountered again a new mapping will be established by the claim processing team.' ).css( 'margin', '10px' ).appendTo( instance.rootElement );
    instance.createToolbar();//</cfif><cfif _multipleRefErrors>  If a <span style="color:red;">Trade Contract# is red</span>, multiple Claim Contract Ref#s have been mapped to it.
    instance.createDataGrid();
    
    //append elements
    instance.rootElement.append( instance.toolbar.element().css( { 'margin-top' : '5px', "margin-bottom" : "5px" } ) );
    instance.rootElement.append( instance.dataGrid.element() );

    return instance.rootElement.css( { "padding-left": "5px", "padding-right" : "5px" });
}

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

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

    const agreementRefDataSource = Fse.Data.createDataSource({
        customStore: {
            dataURL: appDataURL,
            object: 'TPM.agreementRefs',
            objectParams: { partnerId: this.partnerId, partnerType: this.partnerType },
        }
    });

    //let multipleMappingCount = {};

    instance.dataGrid = $( '<div id="agreementRefDataGrid">' ).dxDataGrid({
        dataSource: agreementRefDataSource,
        showBorders: true,
        filterRow: { visible: true },
        scrolling: { mode: 'virtual' },
        remoteOperations: { filtering: true, paging: true, sorting: true },
        columns: [
            { width: '200', dataField: 'contractRef', caption: 'Contract Ref#', allowSorting: false,
                groupIndex: 0,
                /*groupCellTemplate: function( container, options ) {

                    multipleMappingCount = {};
                    const groupedData = options.component.getDataSource().items();

                    groupedData.forEach( group => {
                        if( group.key ) {
                            multipleMappingCount[ group.key ] = 0;
                            let uniqueAssignedContractNbrs = new Set();
                            if( group.items ) {
                                group.items.forEach( item => {
                                    if( item.assignedContractNbr ) {
                                        uniqueAssignedContractNbrs.add( item.assignedContractNbr );
                                    }
                                });
                            }
                            multipleMappingCount[ group.key ] = uniqueAssignedContractNbrs.size;
                        }
                    })
                    
                    let groupName = $( '<div>' ).text( options.value );
                    if( multipleMappingCount[ options.value ] > 1 ) {
                        //console.log( 'This one has more than one mapping!' );
                        groupName.css( 'color', 'red' );
                    };

                    groupName.appendTo( container );
                },*/
            },
            { width: '70', dataField: 'type', caption: 'Mapping', allowSorting: false,
                cellTemplate: function( container, options ) {
                    let sTypeValue = 'I';
                    let sTypeTitle = 'Implicit';
                    
                    if( options.data.type === 'E' ) {
                        sTypeValue = 'E';
                        sTypeTitle = 'Explicit';
                    };

                    $( '<label>' ).append( sTypeValue ).attr( 'title', sTypeTitle ).appendTo( container );

                    if( sTypeValue === 'E' ) {
                        let removeMappingCheckbox = $( '<div>' ).dxCheckBox({
                            name: 'removeMapping',
                            hint: 'Remove Mapping',
                            onValueChanged: function( e ) {
                                options.row.isSelected = e.value;
                            }
                        });

                        removeMappingCheckbox.css( 'margin-left', '20px' ).appendTo( container );
                    };
                }    
            },
            { width: '150', dataField: 'assignedContractNbr', caption: 'Agreement #', allowSorting: false,
                cellTemplate: function( container, options ) {
                    if( options.data.requestId > 0 ) {
                        $( '<a>' ).append( options.data.assignedContractNbr ).attr( 'onclick', 'Fse.TPM.viewRequest(' + options.data.requestId + ' )' ).appendTo( container ).css( 'cursor', 'pointer' );
                    } else {
                        container.append( options.data.assignedContractNbr );
                    };
                }
            },
            { width: '175', dataField: 'partnerName', caption: 'Partner', allowSorting: false },
            { dataField: 'description', caption: 'Description', allowSorting: false },
            { width: '200', dataField: 'endDate', caption: 'Dates', allowSorting: false, alignment: 'center',
                cellTemplate: function( container, options ) {
                    var formattedStartDate = DevExpress.localization.formatDate( new Date( options.data.startDate ), "MM/dd/yyyy" );
                    var formattedEndDate = DevExpress.localization.formatDate( new Date( options.data.endDate ), "MM/dd/yyyy" );

                    container.append( formattedStartDate + ' - ' + formattedEndDate );
                },
                sortOrder: 'desc', 
            },
            { width: '70', dataField: 'claimCount', caption: 'Claims', allowSorting: false },
            { width: '100', dataField: 'confirmDate', caption: 'Confirmed', allowSearch: false, allowSorting: true, alignment: 'center',
                cellTemplate: function( container, options ) {
                    if( options.data.confirmed === 'Y' ) {
                        var formattedConfirmedDate = DevExpress.localization.formatDate( new Date( options.data.confirmDate ), "MM/dd/yyyy" );
                        container.append( formattedConfirmedDate );
                    } else {
                        container.append( 'NO' );
                    }
                }    
            },
        ],
        showRowLines: false,
        hoverStateEnabled: true,
        rowAlternationEnabled: false,
        filterRow : { visible : true },
        headerFilter : { visible : false },
    }).dxDataGrid( 'instance' );

    return instance.dataGrid.element();
}

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

    instance.toolbar = $( '<div>' ).dxToolbar({
        items:[{
            location: 'before',
            widget: 'dxButton',
            options: {
                text: 'Remove Selected Mapping',
            },
            onClick: function( e ) {
                let visibleRows = instance.dataGrid.getVisibleRows();
                let selectedRows = [];

                $.each( visibleRows, function( index, value ) {
                    if( visibleRows[index].isSelected ) {
                        let sRequestId = visibleRows[index].data.requestId;
                        let sContractRef = visibleRows[index].data.contractRef;
                        let sKeyValue = sRequestId + ':' + sContractRef;
                        selectedRows.push( sKeyValue );
                    }
                });
                
                //let removeMappingURL = Fse.Util.updateURL2( $( "link#appActionURL" ).attr( "href" ), { object : "TPM.act_saveContractRefs" } );
                
                var removeMappingURL = $("link#PortalDocRootURL").attr("href") + "/apps/TPM/index.cfm?do=saveContractRefs";

                if( selectedRows.length > 0 ) {
                    removedMappingIds = selectedRows.join();
                    $.ajax({
                        url: removeMappingURL,
                        method: 'POST',
                        data: { 'partnerId' : instance.partnerId, 'partnerType' : instance.partnerType, 'removeMapping' : removedMappingIds },
                    }).always( function() {
                        instance.dataGrid.refresh();
                    });
                } else {
                    alert( 'Please make a selection.' );
                }
            }
        },{
            location : "after", widget : "dxButton", options : {
                type : "normal",
                  icon :"help",
                  hint : "View Help",
                  onClick : function( e ) {
                      Fse.Portal.showQuickHelp( "PartnerTradeAgreementRefs" );
                  }
            }
        }]
    }).dxToolbar( 'instance' );

    return instance.toolbar.element();
}