EmailCampaignManager = function() {

    let instance = this;

    instance.campaignEditor = null;
    instance.multiView = null;
    instance.copyCampaignForm = null;

    instance.campaignEditorHome = $("<div>");

    instance.toolbarCampaignName = $("<div>").css( { "font-size" : "1.6em", "padding-left" : "5px"  });

    instance.campaignList = new EmailCampaignList( {

        onSelectionChanged : function( selected ) {

            if( selected && selected.length ) {


                if( instance.currentCampaign && instance.currentCampaign.campaignId == selected[0].campaignId ) {
                    // this is the same as the current so do nothing
                    return;
                }

                instance.currentCampaign = selected[0];
                // instance.multiView.option( "selectedIndex", 1 );
            } else {
                instance.currentCampaign = null;
            }

            if( instance.currentCampaign ) {
                instance.createEditor( instance.currentCampaign )
            }

        },
        edit : function( rowData ) {

            instance.switchToEditor();

        },

        emailManager : instance


    });

    instance.deleteCampaignButton = $("<div>").dxButton( {
        icon : "trash",
        disabled : true,
        hint : "Delete this Email Campaign?",
        onClick : function( e ) {

            if( confirm( `Delete '${instance.currentCampaign.campaignName}'?` ) ) {

                EmailCampaignManager.deleteCampaign( instance.currentCampaign )
                    .done( function( returnData ) {
                        instance.campaignList.dataGrid.refresh();
                        instance.switchToList();
                    })
                    .fail( function() {
                        console.log( "failed");
                    })
        
            };

        }
    }).dxButton( "instance" );


    instance.campaignNavigation = $("<div>").css( { "padding" : "0 10px 5px 5px" }).dxToolbar( {
        items : [

            { location : "before", template : function() { return instance.toolbarCampaignName }},
            { location : "after", widget : "dxButton", options : { 
                    icon : "spinprev", 
                    onClick : function( e ) {
                        instance.campaignList.selectPrevious();
                    }
                }
            },
            { location : "after", widget : "dxButton", options : { 
                    text : "Email List", 
                    onClick : function( e ) {
                        instance.multiView.option( "selectedIndex", 0 );
                    }       
                }
            },
            { location : "after", widget : "dxButton", options : { 
                icon : "spinnext",
                onClick : function( e ) {
                        instance.campaignList.selectNext();
                    }
                }
            },

            { location : "after", widget : "dxButton", options : {
                icon : "copy",
                hint : "Copy this Email Campaign?",
                onClick : function( e ) {

                    //console.log(instance.currentCampaign.campaignId);
                    instance.campaignList.copyCampaign(instance.currentCampaign);

                    /*if( confirm( `Copy '${instance.currentCampaign.campaignName}'?` ) ) {

                        EmailCampaignManager.copyCampaign( instance.currentCampaign )
                            .done( function( returnData ) {

                                let dataGrid = instance.campaignList.dataGrid;
                                dataGrid.refresh().done( function() {
                                    dataGrid.selectRows( [ returnData.campaignId ], false ).done( function() {
                                        dataGrid.navigateToRow( returnData.campaignId );
                                        instance.switchToEditor();
                                    })
                                });
                                })
                            .fail( function() {
                                console.log( "failed" );
                            })
                
                    };*/

                }
            }},
            { location : "after", template : function() {
                return instance.deleteCampaignButton.element();
            }
            }
        ]
    }).dxToolbar( "instance" );

    // instance.campaignEditorHome.append( instance.campaignEditor.element() );



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

        swipeEnabled : false,
        items : [
            { template : function() {
                return $("<div>").css( { "padding-top" : "5px" } )
                    .append( instance.campaignList.element() )
                }
            },
            { template : function() {
                return $("<div>").css( { "padding-top" : "5px" } ).append( instance.campaignNavigation.element() ).append( instance.campaignEditorHome )
                }
            }
        ]

    }).dxMultiView( "instance" );

    
}

EmailCampaignManager.prototype.constructor = EmailCampaignManager;

EmailCampaignManager.prototype.element = function() {
    return this.multiView.element();
}

EmailCampaignManager.prototype.newCampaign = function( campaignType ) {

    this.updateToolbar( { campaignId : 0 } );
    this.createEditor( { campaignType : campaignType, campaignId : 0, campaignName : "" } );
    this.switchToEditor();
}

EmailCampaignManager.prototype.onCampaignCreated = function( campaignData ) {
    this.currentCampaign = campaignData;

    // reload the list and select the new record
    this.campaignList.refresh( campaignData.campaignId );

    // this.toolbarCampaignName.text( campaignData.campaignName );
    this.updateToolbar( campaignData );

}

EmailCampaignManager.prototype.onCampaignUpdated = function( campaignData ) {

    this.currentCampaign = campaignData;

    // reload the list and select the record
    this.campaignList.refresh( campaignData.campaignId );

    // this.toolbarCampaignName.text( campaignData.campaignName );
    this.updateToolbar( campaignData );
}

EmailCampaignManager.prototype.updateToolbar = function( campaignData ) {

    this.toolbarCampaignName.empty();

    if( campaignData.campaignId ) {
        this.toolbarCampaignName.append( $("<span>").text( campaignData.campaignName ) );
        let locked = campaignData.statusCd && campaignData.statusCd != 'PEN' ? true : false;
        if( locked ) {
            this.toolbarCampaignName.append( $("<span>").addClass( "dx-icon-lock" ).attr( { title : "This email campaign is read only" } ) );
        }

        this.deleteCampaignButton.option( { "disabled" : locked })
        
    }

}

EmailCampaignManager.prototype.switchToEditor = function() {
    this.multiView.option( "selectedIndex", 1 );
}

EmailCampaignManager.prototype.switchToList = function() {
    this.multiView.option( "selectedIndex", 0 );
}

EmailCampaignManager.prototype.editCampaign = function( emailCampaignId ) {
    instance = this;
    instance.campaignList.dataGrid.selectRows( [ emailCampaignId ], false ).done( function() {
        instance.switchToEditor()
    })    
}

EmailCampaignManager.prototype.createEditor = function( options) {

    let instance = this;


    if( !( options.campaignId || options.campaignType )) {
        // not enough data
        return;
    }

    let tabIndex = 0;
    // dispose of the existing editor
    
    if( instance.campaignEditor ) {
        tabIndex = instance.campaignEditor.getCurrentTabIndex();
        instance.campaignEditor.dispose();
        instance.campaignEditor = null;
    }

    let campaignName = "Unknown Campaign";
    if( ! options.campaignId ) {
        // for new campaigns we start on the first tab
        tabIndex = 0;

        if( options.campaignType == "CRM" ) {
            campaignName = "New CRM Campaign";
        } else if ( options.campaignType == "STD" ) {
            campaignName = "New Standard Campaign";
        } else {
            campaignName = `New ${options.campaignType} Campaign`;

        }
    } else if ( options.campaignName ) {
        campaignName = options.campaignName
    }

    instance.campaignEditor = new EmailCampaignEditor( options, { tabIndex : tabIndex, campaignManager : instance } );
    instance.campaignEditorHome.append( instance.campaignEditor.element() );

    instance.updateToolbar( options );
    // instance.toolbarCampaignName.text( options.campaignName );

}


EmailCampaignManager.copyCampaign = function( campaignData ) {
    // do the save
    let saveURL = Fse.Util.updateURL2( $("link#appActionURL").attr( "href" ), { object : "GTM.copyEmailCampaign" } );
    return $.ajax( { 
        url : saveURL,
        method : "post",
        data : { campaign : JSON.stringify( campaignData ) }
    })
}

EmailCampaignManager.deleteCampaign = function( campaignData ) {

    // do the save
    let saveURL = Fse.Util.updateURL2( $("link#appActionURL").attr( "href" ), { object : "GTM.deleteEmailCampaign" } );
    return $.ajax( { 
        url : saveURL,
        method : "post",
        data : { campaign : JSON.stringify( campaignData ) }
    })

};


EmailCampaignManager.showRecipientMessage = function( data ) {



    $("<div>").dxPopup( {

        title : data.emailSubject,
        height : 640,

        hideOnOutsideClick : true,

        contentTemplate : function() {

            let content = $("<div>");

            // email header
            let emailHeader = $("<div>").css( { "display" : "grid", "grid-template-columns" : "70px auto", "margin-bottom" : "18px" } );

            emailHeader
                .append( "<div>TO:</div>")
                .append( $("<div>").text( data.emailTo ))
                .append( "<div>FROM:</div>" )
                .append( $("<div>").text( data.emailFrom ))
                .append( "<div>SENT:</div>")
                .append( $("<div>").text( DevExpress.localization.formatDate( new Date( Date.parse( data.emailDate )), "longDateLongTime" ) ));

            content.append( emailHeader );

            // actual email
            let emailBodyURL = Fse.Util.updateURL2( $("link#PortalDocRootURL").attr( "href") + "/index.cfm?app=GTM.emailManager", 
                { operation : "getEmailBody", campaignId : data.campaignId, recipientId : data.recipientId, emailId : data.emailId } 
            );
    
            let emailMessageViewer = $("<iframe>").css( {  "height" : "500px", "width" : "100%" } ).attr( {
                src : emailBodyURL
            })
        
            content.append( emailMessageViewer );

            return content;
        },

        onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();
        }
    }).appendTo( "body" ).dxPopup("show");

    
}