OperatorMembers = function( operatorData ) {

    let instance = this;

    instance.data = operatorData;
}

OperatorMembers.prototype.constructor = OperatorMembers;

OperatorMembers.prototype.element = function() {

    let instance =this;
    if( instance.rootElement ) return instance.rootElement;

    instance.rootElement = $("<div>").addClass( "OperatorMembers" );

    
    return instance.rootElement.append( instance.contentTemplate() )


}

OperatorMembers.prototype.contentTemplate = function() {

    let instance = this;

    let columns = [

        { dataField : "territoryName", caption : "Territory", groupIndex : 0 },
        { dataField : "partnerAffiliateNbr", caption : "Member #", width : 100 },
        { dataField : "buyingDecisions", caption : "Buying Dec.", width : 80  },
        { dataField : "companyName", caption : "Operator Name", cellTemplate : function( container, options ) {
            if( options.data.parentOperatorId ) {
                $( "<div>" )
                    .append( $("<div>").text( options.data.companyName ) )
                    .append( $("<div>").append( $("<i>").text( `${options.data.parentCompanyName} Unit` ) ) )
                    .appendTo( container );
            } else {
                container.append( options.data.companyName )
            }
        },
        allowFiltering : true,
        calculateFilterExpression: function (filterValue, selectedFilterOperation, target) {

            let filter = [
                [ "companyName", selectedFilterOperation, filterValue ],
                "or",
                [ "parentCompanyName", selectedFilterOperation, filterValue ]
            ];

            return filter;
            
        } },
        { dataField : "address", caption : "Address", cellTemplate : function( container, options ) {

                let content = $("<div>")
                    .append( $( "<div>").text( options.data.address ) )
                    .append( $("<div>").text( `${options.data.city}, ${options.data.state} ${options.data.zipCode}`) )

                container.append( content );


        },
        calculateFilterExpression: function (filterValue, selectedFilterOperation, target) {

            let filter = [
                [ "address", selectedFilterOperation, filterValue ],
                "or",
                [ "city", selectedFilterOperation, filterValue ],
                "or",
                [ "state", selectedFilterOperation, filterValue ],
                "or",
                [ "zipCode", selectedFilterOperation, filterValue ]
            ];

            return filter;
            
        }},
        { name : "memberActions", visible : true, showInColumnChooser : false, width : 30, allowEditing : false,
                type: "buttons",
                buttons: [{
                    template: function(data) {
                        let button = $("<div>").addClass("dx-icon-overflow").css( { "display" : "inline-block", "cursor" : "pointer" });
                        return button;
                    }
                }]
            }
    ];

    let dataSource = Fse.Data.newDataSource( { object : "OPR.memberGroupMembers", keyField : "affiliationId", objectParams : { orgId : instance.data.operatorId }, paginate : false } );
    dataSource.filter( [ "affiliationStatus", "=", "A" ] );

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

        dataSource : dataSource,
        scrolling : { mode : "virtual" },
        showBorders : true,
        columns : columns,
        height : 400,

        /*
        selection : {
            mode : "multiple",
            allowSelectAll : false,
            showCheckBoxesMode : "always"
        },
        */
        rowAlternationEnabled : true,
        filterRow : {  visible : true },

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

            const data = cce.data;

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

                if( data.operatorId ) {

                    let items = [
                        { text : "Quick View", actionCode : "quickView" }
                    ];

                    if( OperatorPortfolio.getInstance()) {
                        items.push(
                           { text : `Go to '${data.companyName}'`, actionCode : "operatorProfile" }
                        )
                    }


                    $("<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 'quickView' :
                                        OperatorPortfolio.showOperatorProfileDialog( data.operatorId );
                                    break;

                                    case 'operatorProfile' :
                                        OperatorPortfolio.getInstance().gotoProfile( data );
                                    break;

                                }
                            }

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

                    
                }

            }

        }             

    }).dxDataGrid( "instance" );

    return instance.dataGrid.element();
}