class FormsManager {

    constructor( options ) {

        let instance = this;

        this.rootElement = $( "<div>" );

        this.formsList = new FormsList( { formsManager : instance, allowEdit : true, allowCopy : true, allowDelete : true });

        this.formsList.dataGrid.on( "selectionChanged", function( e ) {
            if( e.selectedRowsData.length ) {
                instance.formNameElement.text( e.selectedRowsData[0].formName );
            } else {
                instance.formNameElement.text( "" );
            }
        })

        this.formNameElement = $("<div>").text( "Form Name Goes Here" );;


        let navigationToolbar = $("<div>").dxToolbar( {
            items : [

                { location : "before", template : function() { return instance.formNameElement }},
                { location : "after", widget : "dxButton", options : { 
                        icon : "spinprev", 
                        onClick : function( e ) {
                            instance.formsList.selectPrevious();
                        }
                    }
                },
                { location : "after", widget : "dxButton", options : { 
                        text : "Form List", 
                        onClick : function( e ) {
                            instance.multiView.option( "selectedIndex", 0 );
                        }       
                    }
                },
                { location : "after", widget : "dxButton", options : { 
                    icon : "spinnext",
                    onClick : function( e ) {
                            instance.formsList.selectNext();
                        }
                    }
                }

            ]
        }).dxToolbar( "instance" ); 

        this.multiView = $("<div>").dxMultiView( {

            swipeEnabled : false,
            items : [
                { template : function() {
                    return instance.formsList.element();
                    }
                },
                { template : function() {
                    return $("<div>").append( navigationToolbar.element() ).append( $("<div>").text( "Editor" ));
                    }
                }
            ]
    
        }).dxMultiView( "instance" );

        this.rootElement.append( this.multiView.element() );

    }

    selectNext() {

    }

    selectPrevious() {

    }

    editForm( formData ) {

        this.multiView.option( "selectedIndex", 1 );
        console.log( formData )
        let d = $.Deferred();
        d.resolve( formData );
        return d;
    }

    deleteForm( formData ) {
        let d = $.Deferred();
        if( confirm( "Delete Form?" )) {
            d.resolve( formData );
        }
        return d;
    }

    copyForm( formData ) {
        this.multiView.option( "selectedIndex", 1 );
        let d = $.Deferred();
        d.resolve( formData );
        return d;
    }

    
    static create( options ) {
        return new FormsManager( options );
    }

    element() {
        return this.rootElement;
    }

}