AccountReachSummaryWidget = function( widgetOptions ) {

    this.rootElement = null;

    this.activeFilterPreferences = {};

    this.widgetOptions = widgetOptions;

	this.widgetOptions.config = $.extend( true, {}, this.getDefaultConfig(), widgetOptions.config );
}

AccountReachSummaryWidget.prototype.constructor = AccountReachSummaryWidget;

AccountReachSummaryWidget.prototype.getDefaultSize = function() {
    return {
        width : 1,
        height : 2
    }
}


AccountReachSummaryWidget.prototype.onDashboardLayout = function( layout )  { 
    // this.dataGrid.option( "height", layout.portletContentHeight - 15 );
} 


AccountReachSummaryWidget.prototype.element = function() {

    if( this.rootElement ) return this.rootElement;

    let instance = this;

    /*
    instance.dataGrid = $("<div>").dxDataGrid( {
        xwidth : 908,
        //dataSource : Fse.Data.newDataSource( { object : "MFR207.accountReachSummary", paginate : false, keyField : "accountType", objectParams : objectParams  }),
        showBorders : true,
        columns : [
            { dataField : "accountType", caption : "section", width : 100 },
            {dataField : "totalAccounts", width : 100, dataType : "number"},
            {dataField : "withOpps", width : 100, dataType : "number"},
            {dataField : "active", width : 100, dataType : "number"},
            {dataField : "activePlus", caption : "Active > 20%", width : 100, dataType : "number"},
            {dataField : "sale", width : 100, dataType : "number"},
            {dataField : "noSale", width : 100, dataType : "number"},
            {dataField : "closeRate", width : 100, dataType : "number", format : "percent"},
            { dataField : "planReach", caption : "Reach", width : 100, dataType : "number", format : "percent" }
        ]
    }).dxDataGrid( "instance" );
    */

    instance.rootElement = $("<div>").addClass( "AccountReachSummaryWidget" );
    // instance.rootElement.append( instance.dataGrid.element() )

    instance.applyFilters();

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

}

AccountReachSummaryWidget.prototype.updateUI = function() {

    let style = $("style#accountReachSummaryWidgetCSS" );
    if( ! style.length ) {
        $("<style>")
            .attr( { type : "text/css", id : "accountReachSummaryWidgetCSS" } )
            .text( 
                ".AccountReachSummaryWidget div.arsw-heading { white-space: nowrap; overflow: hidden; padding : 5px; background-color : #776bcd; color : white; text-align : center; font-size : 14px } " 
                + ".AccountReachSummaryWidget div.arsw-heading > div:first-child { font-size : 18px }"
                + ".AccountReachSummaryWidget .left div.arsw-heading { background-color : #27aeef }"
                + ".AccountReachSummaryWidget .TER div.arsw-heading { background-color : #9EA3A7 }"
                + ".AccountReachSummaryWidget div.arsw-heading2 { white-space: nowrap; text-align : center; text-transform : uppercase; padding-top : 8px; padding-bottom : 8px; background-color : #DADCE0; color : #81878C }"
            )
            .appendTo( $("body") );
    }

    let instance = this;
    instance.rootElement.empty();

    $("<div>").dxBox( {
        height : "100%",
        direction : "col",
        width : "100%",
        items : [
            {
                ratio : 1,
                template : function() {
                    return instance.sectionTemplate( instance.bookOfBusinessData );
                }
            },
            {
                ratio : 1,
                template : function() {
                    return instance.sectionTemplate( instance.territoryData );
                }
            }
        ]
    }).appendTo( instance.rootElement );


}

AccountReachSummaryWidget.prototype.sectionTemplate = function( data ) {


    let instance = this;

    let container = $("<div>").dxBox( {
        direction : "row",
        width : "100%",
        height : "100%",
        items : [
            { 
                ratio : 1,
                template : function() {
                    return instance.leftTemplate( data );
                }
            },
            { 
                ratio : 1,
                template : function() {
                    return instance.rightTemplate( data );
                }
            },
        ]
    })

    return container.addClass( data.accountType );


}

AccountReachSummaryWidget.prototype.leftTemplate = function( data ) {


    let instance = this;

    let container = $("<div>").css( { "margin-right" : "4px" } ).addClass( "left" ).dxBox( {

        direction : "col",
        height : "100%",
        width : "100%",
        xonItemClick : function( e ) {
            if( e.itemData.id == "heading" ) {
                if( data.accountType == "BOB" || data.totalAccounts >= 0 ) {
                    instance.viewOpportunities( data, "totalAccounts" );
                }
            }
        },
        items : [
            { 
                id : "heading",
                ratio : 1,
                template : function() {
                    let content = $("<div>").addClass( "arsw-heading" );

                    if( data.accountType == "BOB" ) {
                        $("<div>").text( DevExpress.localization.formatNumber( data.totalAccounts, "fixedPoint" ) ).appendTo( content );
                        $("<div>").text( 'BOB Accounts' ).appendTo( content );
                    } else {
                        if( data.totalAccounts >= 0 ) {
                            $("<div>").text( DevExpress.localization.formatNumber( data.totalAccounts, "fixedPoint" ) ).appendTo( content );
                        } else {
                            $("<div>").text( "n/a" ).appendTo( content );
                        }
                        $("<div>").text( 'Territory Accounts' ).appendTo( content );
                    }

                    return content;
                }
            },
            { 
                id : "data",
                ratio : 3,
                template : function() {


                    let items = [];
                    items.push( 
                        {  text : "Active", value : data.active, metricField : "active" },
                        {  text : "Active > 20%", value : data.activePlus, metricField : "activePlus" },
                        {  text : "Sale", value : data.sale, metricField : "sale" },
                        {  text : "No Sale", value : data.noSale, metricField : "noSale" }
                    )

                    let content = $("<div>")

                    $("<div>").text( "Number of Accounts" ).addClass( "arsw-heading2" ).appendTo( content );

                    $("<div>").dxDataGrid( {
                        showColumnHeaders : false,
                        showRowLines : true,
                        showColumnLines : false,
                        showBorders : false,
                        dataSource : items,
                        onRowClick : function(e) {
                            if( e.rowType == "data" ) {
                                instance.viewOpportunities( data, e.data.metricField );
                            }
                        },
                        columns : [
                            { dataField : "text" },
                            { dataField : "value", dataType : "number", format : "fixedPoint" }
                        ]
                    }).appendTo( content );

                    return content.css( { "margin-top" : "9px" } );

                }
            }

        ]

    })

    return container;

}

AccountReachSummaryWidget.prototype.rightTemplate = function( data ) {


    let instance = this;

    let container = $("<div>").css( { "margin-left" : "4px" } ).dxBox( {


        direction : "col",
        height : "100%",
        width : "100%",
        onItemClick : function( e ) {
            if( e.itemData.id == "heading" ) {
                instance.viewOpportunities( data, "withOpps" );
            }
        },
        items : [
            { 
                id : "heading",
                ratio : 1,
                template : function() {
                    let content = $("<div>").addClass( "arsw-heading" );
                    $("<div>").text( DevExpress.localization.formatNumber( data.withOpps, "fixedPoint" ) ).appendTo( content );

                    if( data.accountType == "BOB" ) {
                        $("<div>").text( 'BOB Accounts w/Opps' ).appendTo( content );
                    } else {
                        $("<div>").text( 'Territory Accounts w/Opps' ).appendTo( content );
                    }

                    return content;
                }
            },
            { 
                id : "charts",
                ratio : 3,
                template : function() {

                    let container = $("<div>").dxBox( {
                        direction : "row",
                        width : "100%",
                        height : "100%",
                        align : "middle",
                        items : [
                            {
                                ratio : 1,
                                template : function() {

                                    // let colorNbr = "#db4425";
                                    let colorNbr = "#4b286d";
                                    return instance.chartTemplate( data, { color : colorNbr, value : data.closeRate, metricField : "sale", title : "Close Rate"} ).css( { "margin-right" : "auto", "margin-left" : "auto" } );
                                }
                            },
                            {
                                ratio : 1,
                                template : function() {
                                    if( data.accountType == "BOB" ) {
                                        return instance.chartTemplate( data, { color : "#27aeef", value : data.planReach, metricField : "withOpps", title : "Plan Reach" } ).css( { "margin-right" : "auto", "margin-left" : "auto" } );
                                    } else {
                                        return $("<div>");
                                    }
                                    
                                }
                            }
                        ]
                    })

                    return container.css( { "margin-top" : "9px" } );
                }
            }

        ]

    })

    return container;

}

AccountReachSummaryWidget.prototype.chartTemplate = function( data, options ) {

    let instance = this;

    let dataSource = [ 
        { argument : "value", val : options.value, tooltipValue : options.tooltip ? options.tooltip.value : null },
        { argument : `value_gap`, val : 1.0 - options.value }
    ];

    let createText = function (x, y, fontSize, textAnchor, color, content) {
        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    
        text.setAttribute('x', x);
        text.setAttribute('y', y);
        text.setAttribute('fill', color );
        text.setAttribute('text-anchor', textAnchor);
        text.setAttribute('font-size', fontSize);
        text.setAttribute('font-weight', "bold" );
    
        text.textContent = content;
        $( text ).on( "click", function() { instance.viewInteractions() } );
        return text;
    }    


    let chart = $("<div>").dxPieChart({
        type: 'doughnut',
        palette: 'Soft Pastel',
        size : {
            width : 100,
            height : 120
        },
        startAngle : 270,
        dataSource : dataSource,
        title: { 
            text : options.title,
            verticalAlignment : "bottom",
            placeholderSize : 25,
            font : { size : "13px" }
        },
        centerTemplate :  function (pie, container) {
            const text = createText(25, 80, 12, 'start', options.color, DevExpress.localization.formatNumber( options.value, "percent" ));
            container.appendChild(text);
        },
        customizePoint : function( pointInfo ) {
            console.log( pointInfo );
            if( pointInfo.argument.match( /_gap$/ )) {
                return { color : "#DADCE0" };
            }
        },
        onPointClick : function( e ) {
           instance.viewOpportunities( data, options.metricField );
        },
        series: [{
            color : options.color,
            argumentField: 'argument',
            valueField : "val"
        }],
        tooltip : {
            enabled : options.tooltip ? true : false,
            contentTemplate: function( pointInfo, container ) {

                if( ! pointInfo.argument.match( /_gap$/) ) {

                    let value = pointInfo.point.data.tooltipValue;
                    let formattedValue = DevExpress.localization.formatNumber( value, { type : "fixedPoint" } )

                    container.append(  `${formattedValue} ${options.tooltip.label}` );
                }
            }
        }
    })    

    return chart;
    // return $("<div>").text( "Chart" );
}

AccountReachSummaryWidget.prototype.viewOpportunities = function( data, metricField ) {

    let instance = this;

    instance.loadMetaData().done( function( metaData ) {


        console.log( `META DATA ${data.accountType}` );
        console.log( metaData );


        let searchParams = {
            effectiveRepOwnerType : "MFR",
            partnerClassificationKey : []
        }

        if( metricField == "active" ) {
            searchParams.stageId = metaData.activeStageIds
        } else if ( metricField == "activePlus" ) {
            searchParams.stageId = metaData.activePlusStageIds
        } else if ( metricField == "sale" ) {
            searchParams.stageId = metaData.saleStageIds
        } else if ( metricField == "noSale" ) {
            searchParams.stageId = metaData.noSaleStageIds
        } else {
            searchParams.stageId = metaData.stageIds
        }

        let fieldNames = [];
        if( data.accountType == "BOB" ) {
            fieldNames.push( "bobOPRClassificationIds", "bobCDRClassificationIds" );
        } else {
            fieldNames.push( "terOPRClassificationIds", "terCDRClassificationIds" );
        }

        fieldNames.forEach( function( fn ) {

            let partnerType = "OPR";
            if( fn.search( /CDR/ ) > 0 ) {
                partnerType = "CDR";
            }

            let classificationIds = metaData[fn];
            classificationIds.forEach( function( classificationId ) {
                searchParams.partnerClassificationKey.push( `${partnerType}:${classificationId}` );
            })

            if( data.accountType != "BOB" ) {
                searchParams.partnerClassificationKey.push( `${partnerType}:0` );
            }


        })

        // merge in widget filters
        for( p in instance.widgetOptions.config ) {
            if( instance.widgetOptions.config[p] && ! searchParams[p]) {
                searchParams[p] = instance.widgetOptions.config[p]
            }
        }
        // translate salesRepId
        if( searchParams.salesRepId ) {
            searchParams.effectiveRepId = searchParams.salesRepId;
        }
        delete searchParams.salesRepId;

        if( ! searchParams.effectiveRepId ) {
            searchParams.excludeEffectiveRepId = metaData.excludeSalesRepId;
        }

        // translate territoryPath
        if( searchParams.territoryPath ) {
            searchParams.partnerTerritoryPath = searchParams.territoryPath;
        }
        delete searchParams.territoryPath;

        console.log( searchParams );
        instance.widgetOptions.dashboard.tabSearch( "OpportunityAnalyzer", searchParams );


    })

}

AccountReachSummaryWidget.prototype.loadMetaData = function() {
    let instance = this;

    let d = $.Deferred();

    let appDataURL = $("link#appDataURL").attr( "href" );
    let bobMetaDataURL = Fse.Util.updateURL( appDataURL, { object : "SPL.bookOfBusinessMetaData", mode : "direct" } )
    $.ajax( {
        url : bobMetaDataURL,
        method : "GET"
    }).done( function( metaData ) {
        instance.metaData = metaData;
        d.resolve( instance.metaData );
    }).fail( function() {
        d.reject();
    })

    return d;

}

AccountReachSummaryWidget.prototype.edit = function( applyFn ) {

    let widgetPreferenceEditor = new BookOfBusinessWidgetPreferences( this );
    widgetPreferenceEditor.show( applyFn );

}

AccountReachSummaryWidget.prototype.getDefaultConfig = function() {

    let estOrderDateRange = Fse.CRM.dateRanges.rangeByKey( "F,TY" ); // fiscal this year

    return {
        territoryPath : null,
        productHierarchyPath : null,
        estOrderDateStart : estOrderDateRange.startDate,
        estOrderDateEnd : estOrderDateRange.endDate,
        estOrderDateRange : estOrderDateRange.rangeKey,
        clientSegPath : null,
        productSetTags : null,
        partnerType : null,
        salesRepId : null,
        objPath : null
    }

}

AccountReachSummaryWidget.prototype.applyPreferences = function( preferences ) {
    this.widgetOptions.config = $.extend( true, {}, preferences );
    this.applyFilters();
}

AccountReachSummaryWidget.prototype.applyFilters = function() {

    let instance = this;
    let widgetFilters = $.extend( true, {}, instance.widgetOptions.config );

    let filterPreferences = instance.widgetOptions.filterPreferences;
    let activeFilterPreferences = instance.activeFilterPreferences;

    console.log( instance.widgetOptions );


	// global filters suppored by this widget, when the global filters are expressed with different variable names, they need to translated to this widgets variable names
	const globalFilters = {
		// widgetVariableName : "globalFilterVariableName"
		salesRepId : "salesRepId",
		territoryPath : "territoryPath",
        productHierarchyPath : "productHierarchyPath",
        productSetTags : "productSetTags",
        clientSegPath : "clientSegPath"
	};

	for( let p in globalFilters ) {

		// apply translation - global filter param is not the same name as widget param
		let gp = globalFilters[p];

		// if the global filter preferences have the propery and it has a value, update the objectparams
		if( filterPreferences.hasOwnProperty( gp ) && filterPreferences[gp]) {

			if( widgetFilters[p] == null ) {
				widgetFilters[p] = filterPreferences[gp];
				activeFilterPreferences[p] = widgetFilters[p]; // indicate that this widget parameter has an active filter preference - used when displaying the edit page
			}
		}
	}    

    let opportunityFilters = [];
    let accountFilters = [];

    let salesRepFilterActive = false;

    if( widgetFilters.estOrderDateStart && widgetFilters.estOrderDateEnd ) {
        opportunityFilters.push( [
            [ "estOrderDate", ">=", widgetFilters.estOrderDateStart ],
            "and",
            [ "estOrderDate", "<=", widgetFilters.estOrderDateEnd ]
        ])
    }

    if( widgetFilters.productSetTags ) {
        let filter = [];
        widgetFilters.productSetTags.forEach( function( ve ) {
            if( filter.length ) {
                filter.push( "or" );
            }
            filter.push( [ "productSetTags", "contains", ve ] );
        })
        if( filter.length ) {
            if( opportunityFilters.length ) opportunityFilters.push( "and" );
            opportunityFilters.push( filter );
        }
    }
    if( widgetFilters.productHierarchyPath ) {
        let filter = [];
        widgetFilters.productHierarchyPath.forEach( function( ve ) {
            if( filter.length ) {
                filter.push( "or" );
            }
            filter.push( [ "productHierarchyPath", "startswith", ve ] );
        })
        if( filter.length ) {
            if( opportunityFilters.length ) opportunityFilters.push( "and" );
            opportunityFilters.push( filter );
        }
    }

    if( widgetFilters.objPath ) {

        let objPaths = widgetFilters.objPath;
        // there are 5 objective path fields to search
        if( ! Array.isArray( objPaths ) ) {
            objPaths = [objPaths];
        }
        filter = [];
        objPaths.forEach( function( objPath ) {
            let objPathFilter = [
                ["objPath1", "startswith", objPath],
                "or",
                ["objPath2", "startswith", objPath],
                "or",
                ["objPath3", "startswith", objPath],
                "or",
                ["objPath4", "startswith", objPath],
                "or",
                ["objPath5", "startswith", objPath]
            ]
            if( filter.length ) {
                filter.push( "or" )
            } 
            filter.push( objPathFilter );
        })
        
        if( filter.length ) {
            if( opportunityFilters.length ) opportunityFilters.push( "and" );
            opportunityFilters.push( filter );
        }

    }

    if( widgetFilters.territoryPath ) {
        let filter = [];
        widgetFilters.territoryPath.forEach( function( ve ) {
            if( filter.length ) {
                filter.push( "or" );
            }
            filter.push( [ "territoryPath", "startswith", ve ] );
        })
        if( filter.length ) {
            if( accountFilters.length ) accountFilters.push( "and" );
            accountFilters.push( filter );
        }
    }

    if( widgetFilters.clientSegPath ) {
        let filter = [];
        widgetFilters.clientSegPath.forEach( function( ve ) {
            if( filter.length ) {
                filter.push( "or" );
            }
            filter.push( [ "clientSegPath", "startswith", ve ] );
        })
        if( filter.length ) {
            if( accountFilters.length ) accountFilters.push( "and" );
            accountFilters.push( filter );
        }
    }

    if( widgetFilters.salesRepId ) {
        let filter = [];
        widgetFilters.salesRepId.forEach( function( ve ) {
            if( filter.length ) {
                filter.push( "or" );
            }
            filter.push( [ "salesRepId", "=", ve ] );
        })
        if( filter.length ) {
            if( accountFilters.length ) accountFilters.push( "and" );
            accountFilters.push( filter );
            salesRepFilterActive = true;
        }
    }

   
    if( widgetFilters.partnerType ) {
        if( accountFilters.length ) accountFilters.push( "and" );
        accountFilters.push( [ "partnerType", "=", widgetFilters.partnerType ] );
    }

    objectParams = {
        salesRepFilterActive : salesRepFilterActive
    };

    if( opportunityFilters.length ) {
        objectParams.opportunityFilters = opportunityFilters;
    }
    if( accountFilters.length ) {
        objectParams.accountFilters = accountFilters;
    }


    let dataSource = Fse.Data.newDataSource( { object : "SPL.accountReachSummary", paginate : false, objectParams : objectParams  });
    dataSource.load().done( function( data ) {

        console.log( "Data Loaded" );
        console.log( data );

        instance.bookOfBusinessData = {};
        instance.territoryData = {};

        data.forEach( function( item ) {
            if( item.accountType == "BOB" ) {
                instance.bookOfBusinessData = item;
            } else if ( item.accountType == "TER" ) {
                instance.territoryData = item;
            }
        })

        instance.updateUI();

        // instance.dataGrid.option( "dataSource", data );

    })


}	

Fse.Portal.addWidgetFactory( "AccountReachSummaryWidget", function( widgetDef ) {
	return new AccountReachSummaryWidget( widgetDef  );
})