EmailTemplateManager = function() {

}

EmailTemplateManager.prototype.constructor = EmailTemplateManager;

EmailTemplateManager.prototype.show = function() {

    let popup = null;

    let multiView = null;

    let deleteTemplate = null;

    let previewFrame = $("<iframe>").css( { "height" : "400px", "width" : "100%" } );
    let emailTemplateDataGrid = $("<div>").dxDataGrid( {

        dataSource : Fse.Data.newDataSource( { object : "GTM.emailTemplates", paginate : false }),
        scrolling : {
            mode : "virtual"
        },
        height : 425,
        showBorders : true,
        columns : [
            { dataField : "templateTitle", caption : "Title" },
            { dataField : "templateDescription", caption : "Description" },
            { type : "buttons",
              buttons : [
                { icon : "showpanel", text : "View Template", onClick( e ) {
                    if( e.row && e.row.rowType == "data" ) {
                        multiView.option( "selectedIndex", 1 );

                        let operationParams = {
                            operation : "getTemplateText",
                            templateId : e.row.data.templateId
                        }

                        let templateURL = Fse.Util.updateURL2( $("link#PortalDocRootURL").attr( "href") + "/index.cfm?app=GTM.emailManager", operationParams );
                        
                        previewFrame.attr( { src : templateURL } );

                    
                    }
                } },
                { icon : "edit", text : "Edit Template", onClick : function( e ) {

                        if( e.row && e.row.rowType == "data" ) {
                            let designer = new EmailCampaignDesigner();
                            designer.show( { 
                                templateId : e.row.data.templateId, 
                                templateTk : e.row.data.templateTk,
                                onSave : function() {
                                    emailTemplateDataGrid.refresh();
                                }
                            } );
                        }

                    }
                },
                { icon : "trash", text : "Delete Template ", onClick : function( e ) {

                    if( e.row && e.row.rowType == "data" ) {
                        deleteTemplate( e.row.data.templateId, e.row.data.templateTitle );
                    }

                }}
              ]
            }
        ],

        onToolbarPreparing : function( e ) {

            if( ! e.toolbarOptions.items ) {
                e.toolbarOptions.items = [];
            }

            e.toolbarOptions.items.push( {
                location : "after",
                widget : "dxButton",
                options : {
                    text : "New Template",
                    icon : "add",
                    onClick : function( e ) {

                        let designer = new EmailCampaignDesigner();
                        designer.show( { 
                            newTemplate : true,
                            onSave : function() {
                                emailTemplateDataGrid.refresh();
                            }
                        } );                        
                    }
                }
            })

        }

    }).dxDataGrid( "instance" );

    deleteTemplate = function( templateId, templateName ) {
        if( ! confirm( `Delete "${templateName}"` ) ) {
            return;
        }

        // do the save
        let saveURL = Fse.Util.updateURL2( $("link#appActionURL").attr( "href" ), { object : "GTM.deleteEmailTemplate" } );
        $.ajax( { 
            url : saveURL,
            method : "post",
            data : { templateId : templateId }
        })
        .done( function( returnData ) {
            console.log( returnData );
            emailTemplateDataGrid.refresh();
        })
        .fail( function() {
        })
                
    }

    let emailTemplatePreview = $("<div>")

    $("<div>").dxToolbar( {
        items : [
            { location : "after", widget : "dxButton", options : { text : "Back to List", onClick : function( e ) {
                multiView.option( "selectedIndex", 0 );
            }}}
        ]
    }).appendTo( emailTemplatePreview );

    emailTemplatePreview.append( previewFrame );





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

        swipeEnabled : false,
        items : [
            { template : function() {
                return emailTemplateDataGrid.element();
                }
            },
            { template : function() {
                return emailTemplatePreview;
                }
            }
        ]

    }).dxMultiView( "instance" );


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

        title : "Email Templates",
        height : 515,
        width : 1000,
        contentTemplate : function( ) {

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

            content.append( multiView.element() )

            return content;
        },
        onHidden : function( he ) {
            he.component.element().remove();
            he.component.dispose();
            emailTemplateDataGrid.dispose();
            multiView.dispose();
        },
        toolbarItems : [
            { toolbar : "bottom", location : "after", widget : "dxButton", options : {
                    text : "Close",
                    style : "submit",
                    onClick : function ( e ) {
                        popup.hide();
                    }
                }
            }
        ]

    }).appendTo( $("body" )).dxPopup( "instance" );
    
    popup.show();    


}