WorkflowFormDetail = function( formData, editManager ) {
    
    this.formData = $.extend( true, {}, this.getDefaults(), formData  );

    this.editManager = editManager;

    this.rootElement = null;
    this.formDetails = null;
    
}


WorkflowFormDetail.prototype.constructor = WorkflowFormDetail



WorkflowFormDetail.prototype.getDefaults = function() {


    let publishDate = new Date();
    publishDate.setHours(0)
    publishDate.setMinutes(0)
    publishDate.setSeconds(0);
    publishDate.setMilliseconds(0);

    let unpublishDate = new Date();
    unpublishDate.setHours(0)
    unpublishDate.setMinutes(0)
    unpublishDate.setSeconds(0);
    unpublishDate.setMilliseconds(0);
    unpublishDate.setFullYear( unpublishDate.getFullYear() + 5 )


    const defaults = {
        formId : 0,
        formName : null,
        synopsis : null,
        publishDate : publishDate,
        unpublishDate: unpublishDate,
        isGeneralApplicable: false,
        isDistributorApplicable: false,
        isInteractionApplicable: false,
        isOperatorApplicable: false,
        isOpportunityApplicable: false,
        isEmailCampaignApplicable: false,
        isBrokerApplicable: false,
        isWebsiteApplicable : false,
        confirmationMessageText : null,
        confirmationMessageTitle : null

    }

    return defaults;
}

WorkflowFormDetail.prototype.getData = function() {
    if( this.formDetails ) {
        return this.formDetails.option( "formData" );
    } else {
        return null;
    }
}

WorkflowFormDetail.prototype.save = function() {
   
    let instance = this;

    let workflowFormData = instance.getData();

    console.log( "SAVE FORM" );
    console.log( workflowFormData );

    let savePromise = Fse.Ajax.performAction( {
        object : "WRK.saveForm", 
        data : workflowFormData 
    })
    
    savePromise.done( function( result ) {

        if( result.success ) {
            instance.formId = result.formId
            if( instance.editManager ) {
                instance.editManager.formId = instance.formId;
            }
        }

    })

    return savePromise;

}


WorkflowFormDetail.prototype.element = function() {
   
    let instance = this;
    let defaultConfig = {}
    let options = {}

    if( instance.rootElement ) {
        return instance.rootElement;
    }

    instance.saveButton = $("<div>").dxButton( {
        type : "default",
        text : "Save Details",
        disabled : true,
        onClick : function( e ) {

            let vr = DevExpress.validationEngine.validateGroup( "WorkflowFormDetails" );
            if( ! vr.isValid ) {
                return;
            }

            instance.save().done( function() {

                Fse.UI.toast( `Details Saved`, "success", 1000 );
                if( instance.editManager ) {
                    instance.editManager.saved();
                }

            });

        }
    }).dxButton( "instance" );
    

    instance.config = $.extend( true, {}, defaultConfig, options );

    instance.rootElement = $("<div>").addClass( "WorkflowFormDetail" )
    
                
    instance.formDetails = $("<div>").dxForm({
        formData: {
            formId: instance.formData.formId,
            formName: instance.formData.formName,
            synopsis: instance.formData.synopsis,
            publishDate: instance.formData.publishDate,
            unpublishDate: instance.formData.unpublishDate,
            title: instance.formData.confirmationMessageTitle,
            message: instance.formData.confirmationMessageText, 
            General: instance.formData.isGeneralApplicable,
            Distributors: instance.formData.isDistributorApplicable,
            Interactions: instance.formData.isInteractionApplicable,
            Operators: instance.formData.isOperatorApplicable,
            Opportunities: instance.formData.isOpportunityApplicable,
            EmailCampaign: instance.formData.isEmailCampaignApplicable,
            Brokers: instance.formData.isBrokerApplicable,
            Website: instance.formData.isWebsiteApplicable
        },
        items: [{
                dataField: 'formName', isRequired : true, editorType : "dxTextBox", editorOptions : { maxLength : 200 }
            }, {
                dataField: 'synopsis',
                editorType: 'dxTextArea', editorOptions : { maxLength : 500 }
            },{
                dataField: 'publishDate', isRequired : true,
                editorType: 'dxDateBox', editorOptions : { width : 100 }
            },{
                dataField: 'unpublishDate', isRequired : true,
                editorType: 'dxDateBox', editorOptions : { width : 100 }
            },{
                itemType: "group",
                colSpan: 3,
                colCount: 3,
                caption: "Applicability",
                items: [{
                    dataField: 'General', 
                    editorType: 'dxCheckBox',   
                },{
                    dataField: 'Distributors',
                    editorType: 'dxCheckBox',    
                },{
                    dataField: 'Interactions',
                    editorType: 'dxCheckBox',
                },{
                    dataField: 'Operators',
                    editorType: 'dxCheckBox',
                },{
                    dataField: 'Opportunities',
                    editorType: 'dxCheckBox',
                },{
                    dataField: 'EmailCampaign',
                    editorType: 'dxCheckBox',
                },{
                    dataField: 'Website',
                    editorType: 'dxCheckBox',
                },{
                    dataField: 'Brokers',
                    visible : Fse.Portal.appConfiguration.STP.ownerType !== "BRO" ? true : false,
                    editorType: 'dxCheckBox',
            }],
        },{
            itemType: "group",
            caption: "Confirmation",
            items: [{
                dataField: 'title', editorType : "dxTextBox",  editorOptions: { maxLength : 200 }
            },{
                dataField: 'message',
                editorType: 'dxTextArea'    
            }],
        }],
        validationGroup : "WorkflowFormDetails",
        onFieldDataChanged : function( e ) {
            console.log( e );
            instance.saveButton.option( { "disabled" : false } );
        }
    }).dxForm( "instance" );


    instance.formValidator = $("<div>").dxValidator( {
        validationGroup : "WorkflowFormDetails",
        validationRules : [
            {
                type : "custom",
                message : "Publish date must be before Unpublish date",
                reevaluate : true,
                validationCallback : function( options ) {


                    let formData = options.value;

                    //console.log( "MY VALIDATOR" );
                    //console.log( formData );
                    if( formData.publishDate && formData.unpublishDate ) {

                        let startDate = new Date( formData.publishDate );
                        let endDate = new Date( formData.unpublishDate );

                        if( startDate.getTime() >= endDate.getTime() ) {
                            // console.log( "start on or after end" );
                            return false;
                        }

                        // console.log( "start before end" );
                        return true;

                    } else {
                        // console.log( "start and/or end not set yet" );
                        return true;
                    }

                }
            }
        ],
        adapter : {
            applyValidationResults : function( vr ) {

                if( ! vr.isValid ) {
                    alert( vr.brokenRule.message );
                }

            },
            getValue : function() {
                return instance.formDetails.option( "formData")
            }
        }
    }).dxValidator("instance");


    let bottomToolbar = $("<div>").dxToolbar( {
        items : [
            { location : "after", 
                template : function() {
                    return instance.saveButton.element() 
                }
            }
        ]
    })

    instance.rootElement
        .append( instance.formDetails.element() ) 
        .append( bottomToolbar )
        .append( instance.formValidator.element() )


    return instance.rootElement
}