class WorkflowFormManager {

    constructor() {

        this.multiView = null;

    }


    element() {

        let instance = this;
        if( instance.multiView ) { 
            return instance.multiView.element();
        }
    
        instance.multiView = $("<div>").dxMultiView( {
    
            swipeEnabled : false,
            selectedIndex : 0,
            items : [
                { template : function() {

                    let content = $("<div>")

                    // content.append( instance.createListToolbar().element().css( { "padding-bottom" : "5px" }));

                    instance.workflowFormList = new WorkflowFormList( { workflowFormManager : instance } );
                    content.append( instance.workflowFormList.element() )

                    return content.css( {"padding": "5px" } );
                    }
                },
                { template : function() {
                    instance.workflowFormEditorPage = $("<div>").css( {"padding": "5px" } );
                    return instance.workflowFormEditorPage;
                }}
            ],
            onSelectionChanged : function( e ) {
                
                if( e.component.option( "selectedIndex" ) == 1 ) {
                    instance.createWorkflowFormEditor();
                }
                
            }
    
    
        }).dxMultiView( "instance" );
    
        instance.multiView.element().addClass( "WorkFlowFormManager" );
    
        return instance.multiView.element();

    }

    /*
    createListToolbar() {

        let instance = this;

        instance.listToolbar = $("<div>").dxToolbar( {
            items : [
                { widget : "dxButton", options : {
                    icon : "plus",
                    onClick : function( e ) {
                        instance.addWorkflowForm();
                    }
                }}
            ]
            // height : 50
        }).dxToolbar( "instance" );

        return instance.listToolbar;

    }
        */

    createWorkflowFormEditor() {


        let instance = this;


        if( instance.workflowFormEditor ) {
            instance.workflowFormEditor.element().remove();
        }

        instance.workflowFormEditorPage.empty();

        instance.workflowFormEditorPage
            // .append( instance.createHeading().element().css( { "padding-bottom" : "5px" } ) )
            .append( instance.createNavigation().element().css( { "padding-bottom" : "5px" } ) );
    
    
        instance.workflowFormEditor = new WorkflowFormEditor( instance.currentWorkflowFormData, { workflowFormManager : instance } );
        instance.workflowFormEditorPage.append( instance.workflowFormEditor.element() );
    
    }

    onSelectionChanged( workflowFormData ) {

        let instance = this;

        if( workflowFormData.length ) {
            instance.setCurrentWorkflowFormData( workflowFormData[0] );
        } else {
            instance.setCurrentWorkflowFormData( null ); 
        }

    }

    onWorkflowFormUpdated( workflowFormData ) {

        let instance =  this;
        instance.workflowFormList.refresh();
        instance.setCurrentWorkflowFormData( workflowFormData )

        if( instance.navigation ) {
            instance.navigation.option( "items", instance.buildNavigationItems() );
        }


    }

    
    setCurrentWorkflowFormData( workflowFormData ) {
        let instance = this;
        instance.currentWorkflowFormData = workflowFormData;
    }

    addWorkflowForm() {

        this.setCurrentWorkflowFormData( { formId : 0, formName : "New Form" } )
        let selectedIndex = this.multiView.option( "selectedIndex" );
        if( selectedIndex == 1 ) {
            this.createWorkflowFormEditor();
        } else {
            this.multiView.option( "selectedIndex", 1 );
        }
        
        return;

    }


    editWorkflowForm( data ) {


        this.setCurrentWorkflowFormData( data );
        let selectedIndex = this.multiView.option( "selectedIndex" );
        if( selectedIndex == 1 ) {
            this.createWorkflowFormEditor();
        } else {
            this.multiView.option( "selectedIndex", 1 );
        }
        
        return;

        
            
    }

    deleteWorkflowForm( workflowFormData ) {

        let instance = this;

        let d = $.Deferred();
        if( confirm( `Delete '${workflowFormData.formName}'?` ) ) {

            let saveURL = Fse.Util.updateURL2( $("link#appActionURL").attr( "href" ), { object : "WRK.deleteForm" } );
            $.ajax( { 
                url : saveURL,
                method : "post",
                data : { workflowForm : JSON.stringify( workflowFormData ) }
            })
            .done( function( returnData ) {
                d.resolve( returnData );
                instance.setCurrentWorkflowFormData( null );
                instance.multiView.option( "selectedIndex", 0 );
                instance.workflowFormList.refresh();
            })
            .fail( function() {
                console.log( "failed");
            })

        };

        return d;
    }


    copyWorkflowForm( workflowFormData ) {

        let d = $.Deferred();

        let instance = this;

        if( confirm( `Copy '${workflowFormData.formName}'?` ) ) {


            Fse.Ajax.performAction( {
                object : "WRK.copyForm",
                data : {
                    formId : workflowFormData.formId
                }
            }).done( function( result ) {

                instance.workflowFormList.refresh();

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

                dataStore.byKey( result.newFormId )
                    .done( function( workflowFormData ) {
                        instance.setCurrentWorkflowFormData( workflowFormData );

                        let selectedIndex = instance.multiView.option( "selectedIndex" );
                        if( selectedIndex == 1 ) {
                            instance.createWorkflowFormEditor();
                        } else {
                            instance.multiView.option( "selectedIndex", 1 );
                        }
                
                    })
                            
                console.log( result );

                d.resolve()

            })
        };

        return d;


    }


    createHeading() {

        let instance = this;
    
        if( instance.heading ) {
            instance.heading.element().remove();
            instance.heading.dispose();
        }
    

        let workflowFormData = instance.currentWorkflowFormData;

        let toolbarItems = [
    
            {
                location : "before",
                template : function() {
    
    
                    let content = $("<div>").css( { "xfont-size" : "18px" } ) 
                    // content.append( $("<div>").css( { "padding-bottom" : "5px" } ));
    
                    content.append( $("<span>").text( workflowFormData.formName ) )
    

                    return content;
                }
            }
    
        ]
    
        toolbarItems.push( {
            location : "after",
            widget : "dxButton",
            options : {
                icon : "pdffile",
                hint : "Preview",
                onClick : function( e ) {
                    WorkflowFormManager.previewForm( workflowFormData.formId )
                }
            }
        })
    
       
       
    
        instance.heading = $("<div>").dxToolbar( {
            items : toolbarItems,
            // height : 50
        }).dxToolbar( "instance" );
    
        return instance.heading;
    
    }

    buildNavigationItems() {

        let instance = this;

        let toolbarItems = []
    
        toolbarItems.push(  {
            location : "before",
            template : function() {
                return $("<div>").text( instance.currentWorkflowFormData.formName ).css( { "font-size" : "18px"})
            }
        })

        /*
        toolbarItems.push( {
            location : "after",
            widget : "dxButton",
            options : { 
                icon : "plus",
                hint : "New form",
                disabled : instance.currentWorkflowFormData.formId == 0,
                onClick : function( e ) {
                    instance.addWorkflowForm();
                }
            }
        });
        */

        
       

        
        toolbarItems.push( {
            location : "after",
            widget : "dxButton",
            options : {
                text : "Preview",
                hint : "Preview this form",
                disabled : instance.currentWorkflowFormData.formId == 0,
                onClick : function ( e ) {
                    WorkflowFormManager.previewForm(  instance.currentWorkflowFormData.formId )
                }
            }
        })

        toolbarItems.push( {
            location : "after",
            widget : "dxButton",
            options : { 
                icon : "copy",
                hint : "Copy this form",
                disabled : instance.currentWorkflowFormData.formId == 0,
                onClick : function( e ) {
                    instance.copyWorkflowForm( instance.currentWorkflowFormData );
                }
            }
        });
        

        toolbarItems.push( {
            location : "after",
            widget : "dxButton",
            options : { 
                icon : "trash",
                hint : "Delete this form?",
                disabled : instance.currentWorkflowFormData.formId == 0,
                onClick : function( e ) {

                    instance.deleteWorkflowForm( instance.currentWorkflowFormData );
    
                }
            }
        });

    
       
        
        /*
        toolbarItems.push(
            { location : "after", widget : "dxButton", options : { 
                    icon : "spinprev", 
                    onClick : function( e ) {
                        instance.workflowFormList.selectPrevious();
                    }
                }
            })
        */

        toolbarItems.push(
            { location : "after", widget : "dxButton", options : { 
                    text : "Form List", 
                    icon : "back",
                    onClick : function( e ) {
                        instance.multiView.option( "selectedIndex", 0 );
                    }       
                }
            });

        /*
        toolbarItems.push(
            { location : "after", widget : "dxButton", options : { 
            icon : "spinnext",
            onClick : function( e ) {
                    instance.workflowFormList.selectNext();
                }
            }
        })
        */     
       
        return toolbarItems;

    }

    createNavigation() {

        let instance = this;
  
        if( instance.navigation ) {
            instance.navigation.dispose();
            instance.navigation = null;
        }
  
  
        let toolbarItems = instance.buildNavigationItems()
    
        /*
        toolbarItems.push(  {
            location : "before",
            template : function() {
                return $("<div>").text( instance.currentWorkflowFormData.formName )
            }
        })

        toolbarItems.push( {
            location : "after",
            widget : "dxButton",
            options : { 
                icon : "plus",
                hint : "New form",
                disabled : instance.currentWorkflowFormData.formId == 0,
                onClick : function( e ) {
                    instance.addWorkflowForm();
                }
            }
        });
        


        toolbarItems.push( {
            location : "after",
            widget : "dxButton",
            options : { 
                icon : "copy",
                hint : "Copy this form",
                disabled : instance.currentWorkflowFormData.formId == 0,
                onClick : function( e ) {
    

                    alert( "Not implemented yet" );
    
                }
            }
        });
        

        toolbarItems.push( {
            location : "after",
            widget : "dxButton",
            options : { 
                icon : "trash",
                hint : "Delete this form?",
                disabled : instance.currentWorkflowFormData.formId == 0,
                onClick : function( e ) {
    

                    alert( "Not implemented yet" );
                    
    
                }
            }
        });

    
       
        
        
        toolbarItems.push(
            { location : "after", widget : "dxButton", options : { 
                    text : "Form List", 
                    icon : "back",
                    onClick : function( e ) {
                        instance.multiView.option( "selectedIndex", 0 );
                    }       
                }
            });

        */
    
  
        instance.navigation = $("<div>").dxToolbar( {
            items : toolbarItems
        }).dxToolbar( "instance" );    
  
        return instance.navigation;
    }

    static getFormURL = function( options ) {

        let formURL = Fse.Util.updateURL( $("link#PortalDocRootURL").attr( "href" ) + "/public/form.cfm", {
            formId : options.formId,
            linkId : 0,
            linkType : '*',
            token : options.formTk
        });

        return formURL;

    }

    static previewForm = function( formId ) {


        /*
        let url = Fse.Util.updateURL( $("link#PortalDocRootURL").attr( "href" ) + "/public/form.cfm", {
            formId : formId,
            linkId : 0,
            linkType : '*',
            token : 'PREVIEW'
        });
        */

        let url = WorkflowFormManager.getFormURL( { formId : formId, formTk : "PREVIEW" })
        
        let w = window.open( url, `_formPreview${formId}`, 'top=20,left=40,width=800,height=600,location=no,menubar=0,location=0,scrollbars=1,resizable=1');
        w.focus();
    
    }

}