AssetManager = function() {

    let instance = this;

    instance.assetEditor = null;
    instance.multiView = null;

    instance.assetEditorHome = $("<div>").css( { "height" : "100%" });

    instance.toolbarAssetName = $("<div>");

    //from Listmanager for selections
    instance.rootElement = null;
    instance.popup = null;
    //instance.options = $.extend( true, {}, options )

    instance.selectionMetaData = null;
    instance.currentList = null;
    instance.detailListMode = false;
    instance.enableSelect = false;


    instance.assetList = new AssetList( {

        assetManager : {
            editAsset : function( assetData ) {
                let d = $.Deferred();
               // d.resolve();
                instance.show({ assetSelectionKey : assetData.assetSelectionKey , assetName : assetData.docTitle });
                //instance.createEditor( { assetId : assetData.fileId , assetName : assetData.docTitle });
                console.log("coming to editasset");
                instance.switchToEditor();
               
                return d;
            },

            deleteAsset : function( assetData ) {

                let instance = this;

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

                    // do the delete
                    let deleteURL = Fse.Util.updateURL2( $("link#appActionURL").attr( "href" ), { object : "CMA.deleteAsset" } );
                    $.ajax( { 
                        url : deleteURL,
                        method : "post",
                        data : { assetData : JSON.stringify( assetData ) }
                    })
                    .done( function( returnData ) {
                       // console.log( returnData );
                        d.resolve( returnData );
                        // instance.dataGrid.refresh();
                    })
                    .fail( function() {
                        console.log( "failed");
                    })


                };

                return d;

            },

            downloadAsset : function( assetData ) {

               // console.log(assetData);

                let instance = this;
                let d = $.Deferred();
                let contentURL = assetData.contentURL;
                //let fileName = assetData.docTitle;
                let download = $("<a>").attr( { "download" : assetData.docTitle } ).appendTo( $("body") );

               if( ! contentURL ) { return };

                let fileParts = contentURL.split( "/" );
                let fileName = fileParts[fileParts.length-1];
            
                download
                    .attr( { "href" : contentURL, "target" : fileName, "xdownload" : fileName } )
                    .html( contentURL );
            
                download[0].click(); 

                return d;
            },

            addAsset : function( used ) {
                let d = $.Deferred();
                //d.resolve();
                instance.show({ assetSelectionKey : "" });
                console.log("coming to addasset");
                instance.switchToEditor();
                

              /*  instance.createEditor( { assetId : 0 });
                instance.switchToEditor();*/
                return d;
            },

            selectionShow : function( selectionOptions) {
                instance.selectionShow(selectionOptions);
            }
        }

    });



    instance.assetNavigation = $("<div>").dxToolbar( {
        items : [
            { location : "before", template : function() { return instance.toolbarAssetName }},
            { location : "after", widget : "dxButton", options : { 
                    icon : "spinprev", 
                    onClick : function( e ) {
                        instance.assetList.selectPrevious();
                    }
                }
            },
            { location : "after", widget : "dxButton", options : { 
                    text : "Asset List", 
                    onClick : function( e ) {
                        instance.multiView.option( "selectedIndex", 0 );
                    }       
                }
            },
            { location : "after", widget : "dxButton", options : { 
                icon : "spinnext",
                onClick : function( e ) {
                        instance.assetList.selectNext();
                    }
                }
            }
        ]
    }).dxToolbar( "instance" );


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

        swipeEnabled : false,
        height : "100%",
        items : [

         
            { template : function() {
                return $("<div>").css( { "padding-top" : "5px", "height" : "100%" })
                    .append( instance.assetList.element());
                }
            },
         
            { template : function() {
                return $("<div>").css( { "padding-top" : "5px" }).append( instance.assetNavigation.element().css( { "padding-bottom" : "5px" }) ).append( instance.assetEditorHome )
                
                }
            }
        ]

    }).dxMultiView( "instance" );

    
}

AssetManager.prototype.constructor = AssetManager;

AssetManager.prototype.element = function() {
    return this.multiView.element();
}

AssetManager.prototype.newAsset = function(  ) {

    this.popup.hide();
    this.updateToolbar( { assetSelectionKey : "" } );
    this.show({ assetSelectionKey : "" });
 
}

AssetManager.prototype.onAssetCreated = function( assetData ) {
    this.currentAsset = assetData;

    if(null != assetData && assetData.saveAnother)
    {

        this.newAsset();
    }

    else{
    
        this.assetList.refresh( assetData.assetSelectionKey );
        this.updateToolbar( assetData );
        //this.show({ assetId : assetData.assetId });
        //this.popup.hide();
    }

}

AssetManager.prototype.onAssetUpdated = function( assetData ) {

    this.currentAsset = assetData;

    // reload the list and select the record
    this.assetList.refresh( assetData.assetSelectionKey );
   // this.popup.hide();

    this.updateToolbar( assetData );
}

AssetManager.prototype.onAssetCancelled = function( flag ) {

    // reload the list and select the record
    //this.assetList.refresh( assetData.fileId );
    if(flag)
    {

        if(this.popup)
        {
            this.popup.hide();
        }
        else if(this.selectionPopup)
        {
            this.selectionPopup.hide();
        }
    }
  
}

AssetManager.prototype.updateToolbar = function( assetData ) {

   this.toolbarAssetName.empty();
   console.log("in toolbar");
   console.log(assetData);

    if( assetData.fileId  || assetData.assetSelectionKey != "") {
        let content = $("<div>").css( { "font-size" : "18px",  "padding-left" : "8px" } ) 
        //content.append( $("<div>").css( { "padding" : "50px" } ));
        content.append( $("<span>").text( assetData.docTitle ) )
        this.toolbarAssetName.append( content);

  }
}

AssetManager.prototype.switchToEditor = function() {
    //this.multiView.option( "selectedIndex", 1 );
}


AssetManager.prototype.show = function( editorOptions ) {

    let instance = this;
  
    editorOptions = editorOptions ? editorOptions : {};
    editorOptions.data = editorOptions.data ? editorOptions.data : {};
  
    instance.data = editorOptions.data;

    console.log("in show");
    console.log(editorOptions);

    let assetName = "Unknown Asset";
    if( editorOptions.assetSelectionKey == "" ) {
        // for new campaigns we start on the first tab
        tabIndex = 0;
        assetName = `New Asset`;

    } else if ( editorOptions.assetSelectionKey != "" ) {
        assetName = editorOptions.assetName;
    }

    
  
    instance.popup =  $("<div>").dxPopup( {

        title : assetName,
        height : "80vh",
        width: "80vw",
        hideOnOutsideClick : true,
        toolbarItems : instance.toolbarAssetName,

        contentTemplate : function() {

            let tabIndex = 0;
            console.log("in content template");
           // console.log(editorOptions);

            if( instance.assetEditor ) {
                tabIndex = instance.assetEditor.getCurrentTabIndex();
                console.log("existing editor tab index: " + tabIndex );
                instance.assetEditor.dispose();
                instance.assetEditor = null;
            }
    
      
        // dispose of the existing editor

          let  assetEditor = new AssetEditor( editorOptions, { tabIndex : tabIndex, assetManager : instance } );
            return assetEditor.element();

        },

      /*  onShown: function (e) {
      },*/

       onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();

            instance.assetEditor = null;
            instance.popup = null;
        }
    }).dxPopup( "instance" );

   
    instance.popup.element().appendTo( "body" );
    instance.popup.show();
  
   
  
  }


  AssetManager.prototype.selectionShow = function( selectionOptions) {

    let instance = this;

    //console.log("in selectionShow");
    //console.log(selectionOptions);


    let dataSourceConfig = { object : selectionOptions.selectionMetaData, keyField : "selectionKey", paginate : false };

    /*if( Array.isArray( instance.options.selections )) {
        dataSourceConfig.objectParams = {
            selections : instance.options.selections 
        }
        instance.selections = instance.options.selections;
    } */

    let ds = Fse.Data.newDataSource( dataSourceConfig );
    

    ds.load().done( function( items ) {
        instance.selectionMetaData = items[0];

       /* if( instance.selectionMetaData.detailType ) {
            instance.detailListMode = true;
        }

        if( ! instance.selectionMetaData.selectionContacts ) {
            instance.selectionMetaData.selectionContacts = [];
        }*/

        instance.createPopup();
        instance.selectionPopup.show();
    
    })

}


AssetManager.prototype.onAssetsBulkUpdated = function( selectedAssets, clearFlag ) {

    // reload the list

    //console.log("in onAssetsBulkUpdated");
    console.log( selectedAssets );
    console.log( "clearFlag: " + clearFlag );
    if( clearFlag ) {
        console.log("clearing selections as per flag"); 
         this.assetList.clearAllSelections(false, true);
          this.assetList.refresh();
    }
    else{
        //retain selections
         this.assetList.refresh( selectedAssets );
    }
   
   
    this.selectionPopup.hide();
}

AssetManager.prototype.createPopup = function() {

    let instance = this;


    let formattedCompanyCount = DevExpress.localization.formatNumber( instance.selectionMetaData.selectionCount, { type : "fixedPoint", precision : 0 } );

    let titleText = "Asset Manager - Edit Selected Assets";
   /* let partnerTypeText = instance.selectionMetaData.partnerType;
    if( instance.selectionMetaData.partnerType == "OPR" ) {
        partnerTypeText = "Operator";
    } else if( instance.selectionMetaData.partnerType == "CDR" ) {
        partnerTypeText = "Distributor";
    }

*/

//instance.selectionMetaData.selectionAssets

    let popupToolbarItems = [];

    let bulkEditFormItems = [];
    bulkEditFormItems.push({
        itemType: "simple",
        template: function(data, itemElement) {

            // Create a container
            const container = $("<div>").addClass("dx-field");

            // Checkbox
            const checkBox = $("<div>").appendTo(container).dxCheckBox({
                value: instance.enableSelect,
                text: "Enable options",
                onValueChanged: function(e) {
                    instance.enableSelect = e.value;
                    selectBox.option("disabled", !e.value);
                }
            }).dxCheckBox("instance");

            // SelectBox
            const selectBox = $("<div>").appendTo(container).dxSelectBox({
                dataSource: ["Option A", "Option B", "Option C"],
                value: null,

                disabled: !instance.enableSelect,
                placeholder: "Select an option",
                onValueChanged: function(e) {
                   // data.formData.selectedValue = e.value;
                }
            }).dxSelectBox("instance");

            itemElement.append(container);
        }
    
        });

        instance.bulkEditForm = $( "<div>").dxForm( {
            formData : null,//assetDefaults,
            colCount : 1,
            items : bulkEditFormItems,
            
           
        }).dxForm( "instance" );


    instance.saveButton = $("<div>").dxButton( {
        text : "Submit",
        type : "default",
        onClick : function( e ) {
            instance.save();
        }
    }).dxButton("instance");


    popupToolbarItems.push( { 
        toolbar : "bottom",
        location : "after",

        template : function() {
            return instance.saveButton.element();
        }
        
    });


    instance.selectionPopup = $("<div>").dxPopup( {

        hideOnOutsideClick : true,
        title : titleText,
       //  height : "auto",
       // width: 600,

        onHidden : function( e ) {


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

        },

        contentTemplate : function() {

            let tabIndex = 0;
          //  console.log("in content template");

            
           // console.log(editorOptions);

            if( instance.assetbulkEditor ) {
                tabIndex = instance.assetbulkEditor.getCurrentTabIndex();
                //console.log("existing editor tab index: " + tabIndex );
                instance.assetbulkEditor.dispose();
                instance.assetbulkEditor = null;
            }
    
      
        // dispose of the existing editor

          let  assetbulkEditor = new AssetBulkEditor( null, 
            { tabIndex : 0, assetManager : instance , selectionMetaData : instance.selectionMetaData } );
            return assetbulkEditor.element();

        },
        /*contentTemplate : function() {
            return instance.bulkEditForm.element()
        },*/


       // toolbarItems : popupToolbarItems


    }).dxPopup( "instance" );

    instance.selectionPopup.element().appendTo( "body" );

}