WorkflowFormSubmissions = function( workflowFormData ) {

    let instance = this;

    instance.formId = workflowFormData.formId;
    instance.rootElement = $("<div>").addClass( "WorkflowFormSubmissions" );

}


WorkflowFormSubmissions.prototype.constructor = WorkflowFormSubmissions;


WorkflowFormSubmissions.prototype.element = function() {

    let instance = this;

    let submissionDataSource = Fse.Data.newDataSource( { object : "WRK.formSubmissions", keyField : "formId", paginate : false });
    submissionDataSource.filter( [ "formId", "=", instance.formId ]);

    instance.formSubmissions = $("<div>").dxDataGrid({
        dataSource : submissionDataSource,
        showBorders : true,
        rowAlternationEnabled : true,
        scrolling : { mode : "virtual" },
        editing : {
            allowUpdating : true,
            mode : "batch",
            selectTextOnEditStart : true
        },
        columns: [
            { dataField : "submissionTime",  dataType: "date", caption : "Submission Time", format : "shortDateShortTime", width : 150 },
            { name : "lastNameFirstName", dataType: "text",
                calculateDisplayValue: function (rowData) { 
                    return rowData.lastName + ", " + rowData.firstName;
                }, caption : "Name"
            },
            /* { dataField : "submissionStatus", dataType: "text", caption : "Status" } , */
            { width : 60, type : "buttons", buttons : [{
                    type : "normal",
                    icon :"trash",
                    hint : "Delete submission...",
                    onClick : function( e ) {
                        instance.deleteSubmission( e.row.data ).done( function(){
                            instance.formSubmissions.refresh();
                        });
                    },
                },{
                    type : "normal",
                    icon :"showpanel",
                    hint : "View submission...",
                    onClick : function( e ) {
                        instance.submissionDetails( e.row.data );
                    }
                },
            ]}
        ],    
    }).dxDataGrid( "instance" )
    return instance.formSubmissions.element();

	return this.rootElement;
}

WorkflowFormSubmissions.viewDetails = function( data ) {

    let formId = data.formId;
    let submissionId = data.submissionId;
  

    let submissionDetails = $("<div>").dxPopup( {
        title: "Submission Summary",
        hideOnOutsideClick: true,
        height: "auto",
        width: "600",
        contentTemplate : function() {
            const submissionDetails = $('<div>').addClass('form');
            // Submission Detail
            $("<h3>").css({"background-color":"lightgrey", "padding":"5px", "font-size" : "18px" } ).text("Submission Detail").appendTo(submissionDetails);;
            $("<div>").css({"padding":"5px 10px"}).appendTo(submissionDetails);
            $("<b>").css({"padding":"10px"}).text("Date & Time: ").appendTo(submissionDetails);
            $("<div>").css({"padding-left":"10px"}).text(data.submissionTime).appendTo(submissionDetails);
            $("<div>").css({"padding":"5px 10px"}).appendTo(submissionDetails);
            $("<b>").css({"padding":"10px"}).text("Submitted By: ").appendTo(submissionDetails);
            $("<div>").css({"padding-left":"10px"}).text(data.firstName + " " + data.lastName).appendTo(submissionDetails);
            $("<div>").css({"padding-left":"10px"}).text(data.email).appendTo(submissionDetails);
            $("<div>").css({"padding":"5px 10px"}).appendTo(submissionDetails);
            $("<b>").css({"padding":"10px"}).text("Status: ").appendTo(submissionDetails);
            $("<div>").css({"padding-left":"10px"}).text(data.submissionStatus).appendTo(submissionDetails);
            // Field Data
            $("<div>").css({"padding":"5px 10px"}).appendTo(submissionDetails);
            $("<h3>").css({"background-color":"lightgrey", "padding":"5px", "font-size" : "18px" } ).text("Submission Data").appendTo(submissionDetails);

            $("<div>").css( { "margin-top": "5px" } ).dxDataGrid( {
                dataSource : Fse.Data.newDataSource( { object : "WRK.formSubmission", paginate : false, keyField : "fieldId", objectParams : { formId : formId, submissionId : submissionId }}),
                showBorders : true,
                scrolling : { mode : "virtual" },
                rowAlternationEnabled : true,
                height : 250,
                columns : [
                    { dataField : "fieldLabel", caption : "Field", xwidth : 250 },
                    { dataField : "submissionValue", caption : "Submission" }
                ]
            }).appendTo( submissionDetails )
      
            return submissionDetails;
          },
        onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();
        },
        toolbarItems : [
            { location : "after", toolbar : "bottom", widget : "dxButton", options : { text : "Close",
                onClick : function( te ) {
                    submissionDetails.hide();
                }
             }}
        ]
                                                
    }).dxPopup( "instance" ); 

    $("body").append( submissionDetails.element() );
    submissionDetails.show();
    
}

WorkflowFormSubmissions.prototype.submissionDetails = function( data ) {

    WorkflowFormSubmissions.viewDetails( data );
    return;

    let instance = this;

    let formId = data.formId;
    let submissionId = data.submissionId;

  

    let submissionDetails = $("<div>").dxPopup( {
        title: "Submission Summary",
        hideOnOutsideClick: true,
        height: "auto",
        width: "600",
        contentTemplate : function() {
            const submissionDetails = $('<div>').addClass('form');
            // Submission Detail
            $("<h3>").css({"background-color":"lightgrey", "padding":"5px", "font-size" : "18px" } ).text("Submission Detail").appendTo(submissionDetails);;
            $("<div>").css({"padding":"5px 10px"}).appendTo(submissionDetails);
            $("<b>").css({"padding":"10px"}).text("Date & Time: ").appendTo(submissionDetails);
            $("<div>").css({"padding-left":"10px"}).text(data.submissionTime).appendTo(submissionDetails);
            $("<div>").css({"padding":"5px 10px"}).appendTo(submissionDetails);
            $("<b>").css({"padding":"10px"}).text("Submitted By: ").appendTo(submissionDetails);
            $("<div>").css({"padding-left":"10px"}).text(data.firstName + " " + data.lastName).appendTo(submissionDetails);
            $("<div>").css({"padding-left":"10px"}).text(data.email).appendTo(submissionDetails);
            $("<div>").css({"padding":"5px 10px"}).appendTo(submissionDetails);
            $("<b>").css({"padding":"10px"}).text("Status: ").appendTo(submissionDetails);
            $("<div>").css({"padding-left":"10px"}).text(data.submissionStatus).appendTo(submissionDetails);
            // Field Data
            $("<div>").css({"padding":"5px 10px"}).appendTo(submissionDetails);
            $("<h3>").css({"background-color":"lightgrey", "padding":"5px", "font-size" : "18px" } ).text("Submission Data").appendTo(submissionDetails);

            $("<div>").css( { "margin-top": "5px" } ).dxDataGrid( {
                dataSource : Fse.Data.newDataSource( { object : "WRK.formSubmission", paginate : false, keyField : "fieldId", objectParams : { formId : formId, submissionId : submissionId }}),
                showBorders : true,
                scrolling : { mode : "virtual" },
                rowAlternationEnabled : true,
                height : 250,
                columns : [
                    { dataField : "fieldLabel", caption : "Field", xwidth : 250 },
                    { dataField : "submissionValue", caption : "Submission" }
                ]
            }).appendTo( submissionDetails )
      
            return submissionDetails;
          },
        onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();
        },
        toolbarItems : [
            { location : "after", toolbar : "bottom", widget : "dxButton", options : { text : "Close",
                onClick : function( te ) {
                    submissionDetails.hide();
                }
             }}
        ]
                                                
    }).dxPopup( "instance" ); 

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

}

WorkflowFormSubmissions.prototype.deleteSubmission = function( data ) {

    let instance = this;

    let d = $.Deferred();
    if( confirm( `Delete Submission?` ) ) {

        let deleteFormSubmissionOptions = {
            formId : data.formId,
            submissionId : data.submissionId
        }

        Fse.Ajax.performAction( { 
            object : "WRK.deleteFormSubmission",
            data : deleteFormSubmissionOptions
        }).done( function( result ) {
            if( result.status ) {
                d.resolve();
            } else {
                d.reject();
            }
        }).fail( function() {
            d.reject();
        })

    } else {
        d.reject();
    };

    return d;

}