LeadManager = function( options ) {
    this.rootElement = null;
    this.multiView = null;
    this.leadEditor = null;
    this.leadList = null;
    this.leadEditorPage = null;
    this.currentLead = null;
    this.navigation = null;
}

LeadManager.prototype.constructor = LeadManager;

LeadManager.prototype.element = function() {
    let instance = this;
    if( instance.multiView ) { 
        return instance.multiView.element();
    }



    instance.multiView = $("<div>").dxMultiView( {

        swipeEnabled : false,
        items : [
            { template : function() {
                instance.leadList = new LeadList( { leadManager : instance } );
                return $("<div>").css( { "padding-top" : "5px" }).append( instance.leadList.element() );
                }
            },
            { template : function() {
                instance.leadEditorPage = $("<div>").css( { "padding-top" : "5px" });
                return instance.leadEditorPage;
                }
            }
        ],
        onSelectionChanged : function( e ) {
            if( e.component.option( "selectedIndex" ) == 1 ) {
                instance.createLeadEditor();
            }
        }


    }).dxMultiView( "instance" );

    return instance.multiView.element();


}

LeadManager.prototype.edit = function( lead ) {
    this.currentLead = lead;
    this.multiView.option( "selectedIndex", 1 );
}

LeadManager.prototype.onLeadChanged = function( lead ) {
    // console.log( "onLeadChanged");
    let instance = this;
    instance.currentLead = lead;

    if( instance.multiView.option( "selectedIndex" ) == 1 ) {
        instance.createLeadEditor();
    }
}

LeadManager.prototype.createLeadEditor = function() {

    let instance = this;

    if( instance.navigation ) {
        instance.navigation.dispose();
        instance.navigation = null;
    }

    instance.navigation = $("<div>").dxToolbar( {
        items : [
            // { location : "before", template : function() { return instance.toolbarCampaignName }},
            { location : "after", widget : "dxButton", options : { 
                    icon : "spinprev", 
                    onClick : function( e ) {
                        instance.leadList.selectPrevious();
                    }
                }
            },
            { location : "after", widget : "dxButton", options : { 
                    text : "Lead List", 
                    onClick : function( e ) {
                        instance.multiView.option( "selectedIndex", 0 );
                    }       
                }
            },
            { location : "after", widget : "dxButton", options : { 
                icon : "spinnext",
                onClick : function( e ) {
                        instance.leadList.selectNext();
                    }
                }
            }
        ]
    }).dxToolbar( "instance" );    

    let leadEditor = new LeadEditor( instance.currentLead, {
        leadSaved : function( leadSaveResult ) {

            instance.leadList.refresh( leadSaveResult ).done( function() {

                if( leadSaveResult.leadStatus != '?') {

                    let goNext = ! instance.leadList.atEnd();

                    if( goNext ) {
                        instance.leadList.selectNext();
                    } else {
                        instance.multiView.option( "selectedIndex", 0 ); // go back to the list
                    }

                }
            });

        }
    } );

    instance.leadEditorPage.empty().append( instance.navigation.element() ).append( leadEditor.element() );


}