SaveReportPopup = function( options ) {

    let instance = this;

    options = options ? options : {};

    instance.savedReportId = options.savedReportId ? parseInt( options.savedReportId ) : 0;
    instance.frm_reportCenter = options.frm_reportCenter;
    instance.reportCode = options.reportCode;

}

SaveReportPopup.prototype.constructor = SaveReportPopup;

SaveReportPopup.prototype.show = function() {

    let instance = this;

    let cancelButton = null;
    let saveAsNewButton = null;
    let saveAndReplaceButton = null;

    let form = null;
    let popup = null;

    let savePromise = $.Deferred();


    let saveReport = function( saveAsNew ) {

        let saveReportURL = Fse.Util.updateURL( $("link#PortalDocRootURL").attr( "href" ) + "/apps//RPT/index.cfm", {
            do : "saveReport",
            saveType : 2,
            mode : "direct"
        });

        let saveData = form.option( "formData" );

        if( saveAsNew && saveData.savedReportId ) {
            saveData.savedReportId = 0;
            saveData.saveAs = true;
        } else {
            saveData.saveAs = false;
        }

        $.ajax( {
            method : "POST",
            url : saveReportURL,
            data : saveData
        }).done( function( saveResult  ) {
            popup.hide();
            savePromise.resolve( saveResult );
        })  

    }

    popup = $("<div>").dxPopup( {
        title : "Save Report",
        width : 700,
        height : "auto",
        contentTemplate : function() {

            form = $("<div>").dxForm( {

                formData : {
                    shareThisReport : "N",
                    setReportDefaults : "N",
                    savedReportId : instance.savedReportId,
                    frm_reportCenter : instance.frm_reportCenter,
                    reportCode : instance.reportCode
                },

                items : [
                    // {
                    //     template : function() {
                    //         return $("<div>")
                    //             .append( $("<p>").text( "Enter a name by which you can refer to this saved report." ))
                    //             .append( $("<p>").text( "If you use a name that you have already used you will overwrite the existing saved report definition with this one." ))
                    //             .append( $("<p>").text( "Change the name of the report to \"Save As\" a copy." ))
                    //     }
                    // },
                    {
                        dataField : "userReportName",
                        label : { text : "Report Name" },
                        editorType : "dxTextBox",
                        isRequired : true,
                        editorOptions : {
                            maxLength : 200
                        }
                    }
                    // ,
                    // {
                    //     template : function() {
                    //         return $("<div>")
                    //             .append( $("<p>").text( "You can group your saved reports by entering a name or phrase below." ) )
                    //     }
                    // }
                    , 
                    {
                        dataField : "userReportGroup",
                        editorType : "dxDropDownBox",
                        label : { text : "Group Name" },
                        editorOptions : {
                            valueExpr : "userReportGroup",
                            displayExpr : "userReportGroup",
                            showClearButton : true,

                            onValueChanged : function ( e ) {
                                e.component.close();
                            },
                           
                            fieldTemplate: function (value, fieldElement) {
                                let field = $("<div>").dxTextBox({
                                    value: value,
                                    maxLength : 125,
                                    placeholder : "double click to type new group"
                                });
                                fieldElement.append(field);
                            },
                            contentTemplate : function( options ) {
                                let ddbx = options.component;
                                let value = options.value;
                                let list = $("<div>").dxList({
                                        dataSource : Fse.Data.newDataSource( { object : "RPT.userReportGroups", paginate : false, key : "userReportGroup" } ),
                                        keyExpr : "userReportGroup",
                                        itemTemplate : function( itemData ) {
                                            return $("<div>").text( itemData.userReportGroup );
                                        },
                                        selectedItemKeys : value ? [ value ] : null,
                                        onItemClick : function( e ) {
                                            ddbx.close();
                                            ddbx.option( { "value" : e.itemData.userReportGroup } );
                                        }
                                        
                                    }).dxList( "instance");

                                return list.element();
                            }
                        }
                    },
                    {
                        dataField : "shareThisReport",
                        label : { text : "Share This Report" },
                        editorType : "dxRadioGroup",
                        editorOptions : {
                            layout : "horizontal",
                            items : [
                                { text : "Yes", value : "Y" },
                                { text : "No", value : "N" }
                            ],
                            valueExpr : "value"
                        }
                    }
                    // ,
                    // {
                    //     template : function() {
                    //         return $("<div>")
                    //             .append( $("<p>").text( "By Sharing this report it will be available for other users to run as it is saved. Only users that can already run this report will be able to run the saved copy. They will not be able to alter the saved report or schedule delivery of it." ));
                    //     }
                    // }

                    // ,
                    // {
                    //     dataField : "setReportDefaults",
                    //     label : { text : "Set Report Defaults" },
                    //     editorType : "dxRadioGroup",
                    //     editorOptions : {
                    //         layout : "horizontal",
                    //         items : [
                    //             { text : "Yes", value : "Y" },
                    //             { text : "No", value : "N" }
                    //         ],
                    //         valueExpr : "value"
                    //     }
                    // }

                    // ,
                    // {
                    //     template : function() {
                    //         return $("<div>")
                    //             .append( $("<p>").text( "Select \"Yes\" to use the settings from this report to set the default settings of this report for all users. Selecting \"Yes\" does not affect any user's previously saved definitions of this report." ));
                    //     }
                    // }

                ]



            }).dxForm( "instance") ;



            if( instance.savedReportId ) {

                Fse.Data.newDataSource( { object : "RPT.savedReports", key : "savedReportId" } ).store().byKey( instance.savedReportId ).done( function( savedReport ) {
                    form.updateData( {
                        "shareThisReport" : savedReport.shared == "Y" ? "Y" : "N",
                        "userReportName" : savedReport.userReportName,
                        "userReportGroup" : savedReport.userReportGroup
                    })
                })

            }


            return form.element();






        },
        toolbarItems : [
            {
                toolbar : "top",
                location : "after",
                widget : "dxButton",
                options : {
                    icon : "help",
                    stylingMode : "text",
                    onClick : function( e ) {
                          Fse.Portal.showQuickHelp( "ReportCenterSaveReport" );
                    }
                }
            },
            {
                toolbar : "bottom",
                location : "after",
                template : function() {

                    cancelButton = $( '<div>' ).dxButton({
                        text: 'Cancel',
                        type: 'normal',
                        onClick: function( e ) {
                            popup.hide();
                        },
                    }).dxButton( 'instance' );                    

                    return cancelButton.element();

                }
            }
            ,
            {
                toolbar : "bottom",
                location : "after",
                template : function() {

                    saveAsNewButton = $( '<div>' ).dxButton({
                        text: 'Save as New',
                        type: instance.savedReportId ? 'normal' : 'default',
                        onClick: function( e ) {

                            let vr = form.validate();
                            if( ! vr.isValid ) return;
                            saveReport(true);
                        },
                    }).dxButton( 'instance' );                    

                    return saveAsNewButton.element();

                }
            }
            ,
            {
                toolbar : "bottom",
                location : "after",
                visible : instance.savedReportId ? true : false,
                template : function() {

                    saveAndReplaceButton = $( '<div>' ).dxButton({
                        text: 'Save & Replace',
                        type: 'default',
                        onClick: function( e ) {

                            let vr = form.validate();
                            if( ! vr.isValid ) return;
                            saveReport(false);
                        },
                    }).dxButton( 'instance' );                    

                    return saveAndReplaceButton.element();

                }
            }
        ],
        onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();
        }

    }).dxPopup( "instance" )

    $("body").append( popup.element() );
    popup.show();

    return savePromise;



}