WorkflowFormEditor = function( workflowFormData, options ) {

    let instance = this;
    
    instance.workflowFormData = $.extend( true, {}, workflowFormData );

    instance.formManager = options.workflowFormManager;

    instance.formId = workflowFormData.formId;

    instance.rootElement = $("<div>").addClass( "WorkflowFormEditor" )

    instance.dataStore = Fse.Data.newDataSource( { object : "WRK.forms", keyField : "formId", paginate : false }).store();

    instance.refresh();
    
}

WorkflowFormEditor.prototype.constructor = WorkflowFormEditor

WorkflowFormEditor.prototype.getCurrentTabIndex = function() {

    if( this.myTabpanel ) {
        return this.myTabpanel.option( "selectedIndex" );
    } else {
        return this.options.tabIndex;
    }
}

WorkflowFormEditor.prototype.load = function() {

    let instance = this;

    let loadPromise = null;

    if( instance.formId ) {

        loadPromise = instance.dataStore.byKey( instance.formId );

        loadPromise.done( function( workflowFormData ) {
            instance.workflowFormData = $.extend( true, {}, workflowFormData );
        })
    
    } else {

        loadPromise = $.Deferred();

        instance.workflowFormData.formId = 0;

        loadPromise.resolve();

    }


    return loadPromise;
    


}

WorkflowFormEditor.prototype.saved = function() {
    let instance = this;
    let p = instance.refresh();
    if( instance.formManager ) {
        p.done( function() {
            instance.formManager.onWorkflowFormUpdated( instance.workflowFormData );
        })
    }
}

WorkflowFormEditor.prototype.refresh = function() {
    let instance = this;
    let loadPromise = instance.load();
    loadPromise.done( function() {
        instance.createUI();
    })
    return loadPromise;
}

WorkflowFormEditor.prototype.element = function() {

    return this.rootElement;

}


WorkflowFormEditor.prototype.createUI = function() {
   
    let instance = this;
    let defaultConfig = {}
    let options = {}

    if( ! instance.rootElement ) {
        return;
    }

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

    if( instance.myTabPanel ) {
        instance.myTabPanel.element().remove();
        instance.myTabPanel.dispose();
        instance.myTabPanel = null;
    }

    
    instance.myTabPanel = $("<div>").dxTabPanel( {
        itemType: 'tabbed',
        deferRendering : true,
        items: [{
            title: 'Details',
            template: function () {
                let wfd = new WorkflowFormDetail( instance.workflowFormData, instance )
                return wfd.element().css( {"padding": "5px", "height" : "561px" } );

            
            }

        },{
            title: 'Fields',
            disabled : instance.formId ? false : true,

            template : function() {

                let ffm = new FlexFieldManager( {
                    domain : instance.workflowFormData.fieldDomain,
                    category : instance.workflowFormData.fieldCategory,
                    flexType : "form"
                }, instance )

                return $("<div>")
                    .css( { "height" : 561 } )
                    .append( ffm.element() ).css( {"padding": "5px" } );

            }
                
        }, {
            title: 'Sections',
            disabled : instance.formId ? false : true,
            template : function() {

                let wfs = new WorkflowFormSections( {
                    formId : instance.workflowFormData.formId, 
                    fieldDomain : instance.workflowFormData.fieldDomain, 
                    fieldCategory : instance.workflowFormData.fieldCategory
                }, instance );
        
                return wfs.element().css( {"padding": "5px" } );
                
            }
        },{
            title: 'Field/CRM Mapping',
            disabled : instance.formId ? false : true,
            template : function() {

                let wfem = new WorkflowFormEntityMapping( {
                    formId : instance.workflowFormData.formId,
                    fieldDomain : instance.workflowFormData.fieldDomain,
                    fieldCategory : instance.workflowFormData.fieldCategory
                }, instance );

                return wfem.element().css( {"padding": "5px" } );

            }
            },{
                title: 'Routing',
                disabled : instance.formId ? false : true,
                template: function () {


                    let wfr = new WorkflowFormRecipients( {
                        formId : instance.workflowFormData.formId,
                        fieldDomain : instance.workflowFormData.fieldDomain,
                        fieldCategory : instance.workflowFormData.fieldCategory
                    }, instance );
            
                    return wfr.element().css( {"padding": "5px" } );

                },
            },{
                title: 'Submissions',
                disabled : instance.formId ? false : true,
                template : function() {

                let wfs = new WorkflowFormSubmissions( {
                    formId : instance.workflowFormData.formId
                }, instance )

                return wfs.element().css( {"padding": "5px" } );
                } 
            },{
                title : "External",
                disabled : instance.formId ? false : true,
                template : function() {

                
                    let content = $("<div>").css( { "font-size" : "larger", "height" : "555px", "padding" : "5px" } );

                    let formURL = WorkflowFormManager.getFormURL(  { formId : instance.workflowFormData.formId, formTk : 'PREVIEW', external : true  } );

                    content.append( $("<p>").text( "The following URL can used on a external web page or sent in an email." ));
                    content.append( $("<pre>").text( formURL ).css( { "margin-left" : "10px" } ));


                    let text = `<iframe src="${formURL}"></iframe>`;

                    content.append( $("<p>").text( "The following HTML snippet can be used to embed this form directly on an external web page.  Security restrictions on the external web page may need to be adjusted." ) );
                    content.append( $("<pre>").text( text ).css( { "margin-left" : "10px" } ) );

                    return content;
            
                }
            }

        
        
        ],
    } ).dxTabPanel( "instance" );
    
    instance.rootElement.append( instance.myTabPanel.element() )
}