SalesCallHistory = function( options ) {

    let instance = this;

    this.partnerId = options.partnerId;
    this.partnerType = options.partnerType;
    this.excludeInteractionId = options.excludeInteractionId;
    this.days = options.days;

    this.rootElement = null;

}

SalesCallHistory.prototype.constructor = SalesCallHistory;

SalesCallHistory.prototype.element = function() {

    if( this.rootElement ) return this.rootElement;

    let instance = this;


    let dataSource = Fse.Data.newDataSource( { object : "BCM.salesCallHistory", keyField : "interactionId", paginate : false, objectParams : { partnerId : instance.partnerId, partnerType : instance.partnerType, excludeInteractionId : instance.excludeInteractionId, days : instance.days } } );

    instance.dataGrid = $("<div>").css( { "height" : "100%" }) .dxDataGrid( {

		height : "100%",
		width : "100%",
		dataSource : dataSource,
		scrolling : { mode : "virtual" },
		showBorders : true,
		columns : [
			{ dataField : "interactionDate", caption : "Call Date", dataType : "date", format : "shortDate", width : 80 },
			{ dataField : "dispositionDate", caption : "Updated", dataType : "date", format : "shortDate", width : 80 },
			{ dataField : "salesRepFullName", caption : "Sales Rep", width : 125 },
			{ dataField : "contactFullName", caption : "Contact", width : 125 },
			{ dataField : "notes", caption : "Comments" }
		],

		masterDetail : {
			autoExpandAll : false,
			enabled : true,
			template : function( container, info ) {


				$("<div>").dxDataGrid( {
					dataSource: info.data.details,
                    showBorders : true,
					columns : [
						{ allowSorting : true, caption : "Status", width : 70,
							calculateDisplayValue : function( data ) {
								if( data.detailDisposition == "FU" ) {
									return "Follow Up"
								} else if( data.detailDisposition == "STD" ) {
									return "Sale"
								} else if( data.detailDisposition == "1T" ) {
									return "Sale"
								} else if( data.detailDisposition == "NS" ) {
									return "No Sale"
								} else {
									return data.detailDisposition
								}
							} 
						},
						{ caption : "Manufacturer", dataField : "mfr_name", width : 200 },

						{ allowSorting : true, caption : "Item Code", width : 125,
							calculateDisplayValue : function( data ) {
								if( data.sku ) {
									return data.sku;
								} else if( data.product ) {
									return data.product
								} else {
									return ''
								}
							}
						},

						{ caption : "Quantity", width : "auto",
							calculateDisplayValue : function( data ) {
								return `${data.qty} ${data.qtyUOM} ${data.qtyDuration}`
							}
						},

						{ allowSorting : true, caption : "Item Description", 
							calculateDisplayValue : function( data ) {
								if( data.sku ) {
									return data.skuDesc;
								} else if( data.product ) {
									return data.shortDesc;
								} else {
									return ''
								}
							}
						},

					]
				}).appendTo( container );

                container.css( { "background-color" : "#f5ffef"} );

			}
		}



	}).dxDataGrid( "instance" );  
    
    let gridDataSource = instance.dataGrid.getDataSource();
    gridDataSource.on( "loadingChanged", function( isLoading ) {
        if( ! isLoading ) {

            let visibleRows = instance.dataGrid.getVisibleRows();
            if( visibleRows.length && ! visibleRows[0].isExpanded ) {
                console.log( "The DATA IS LOADED" );
                instance.dataGrid.expandRow( visibleRows[0].key );
            }

        }
    })

    instance.rootElement = $("<div>").css( { "height" : "100%" } ).append( instance.dataGrid.element() );

    return instance.rootElement;

}