DistributorProfile = function( distributor, options ) {

    let instance = this;

    instance.distributorId = 0;
    let distributorData =  $.extend( true, {}, distributor );
    distributorData = $.extend( true, { distributorId : 0 }, distributorData );


    instance.options = $.extend( true, { initialTabId : "detail" }, options );

    instance.portfolio = instance.options.portfolio;
    
    instance.distributorId = distributorData.distributorId;

    instance.data = { distributorId : instance.distributorId };

    instance.readyPromise = $.Deferred();


}

DistributorProfile.prototype.constructor = DistributorProfile;

DistributorProfile.openPopupEditor = function( cdr_recordId ) {

    let savePromise = $.Deferred();

    let popup = $("<div>").dxPopup( {
            title : "Distributor Profile",
            height : "95vh",
            width : "95vw",
            contentTemplate : function() {
                let op = new DistributorProfile( { distributorId : cdr_recordId }, { initialDataReady : false } );
                return op.element();
            },
            onHidden : function( e ) {
                e.component.element().remove();
                e.component.dispose();
            }
        }).appendTo( $("body")).dxPopup( "instance" );

    popup.show();

    return savePromise;

}


DistributorProfile.prototype.ready = function() {
    return this.readyPromise.promise();
}

DistributorProfile.prototype.load = function( distributorPorfolioListRefreshNeeded ) {


    let instance = this;

    let d = $.Deferred();

    let waitingFor = {
        data : instance.options.initialDataReady ? false : true, // if we already have the data, then no need to loaded it
        flexValues : true,
        flexTabs : instance.flexTabs ? false : true,
        flexFields : instance.flexFields ? false : true    
        //data : true,
        //flexValues : false,
        //flexTabs : false,
        //flexFields : false
    }
    
    //console.log('instance',instance)
    // setting this to false so that if the load method is called again it will load the data
    instance.options.initialDataReady = false;
    
    d.progress( function( notify ) {

        waitingFor[notify.id] = false;
        if( ! waitingFor.data && ! waitingFor.flexTabs && ! waitingFor.flexFields && ! waitingFor.flexValues ) {
            
            
            let fieldsByCategory = DevExpress.data.query( instance.flexFields ).groupBy( "category" ).sortBy( "sortRank" ).thenBy( "label" ).toArray();
            instance.fieldCategoryStore = new DevExpress.data.ArrayStore( { data : fieldsByCategory, key : "key" } );
        
            instance.flexTabs.forEach( function( flexTab ) {

                flexTab.hasFields = false;

                flexTab.categories.forEach( function( category ) {

                    if( ! category.fields ) {
                        category.hasFields = false;
                        instance.fieldCategoryStore.byKey( category.name ).done( function( data ) {
                            category.fields = data.items;
                            category.hasFields = true;
                            flexTab.hasFields = true;
                        })
                        if( ! category.fields ) {
                            category.fields = [];
                        }
                    }

                });

            })
            
            d.resolve( instance.data );
            instance.readyPromise.resolve( instance.data );
        }

    }) 
    

    let loadPanel = $("<div>").dxLoadPanel( {
        message : "Loading...",
        hideOnOutsideClick : false,
        onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();
        }
    }).appendTo( $("body") ).dxLoadPanel( "instance" )
    
    loadPanel.show();

    console.log('waitingFor',waitingFor)

    if( waitingFor.flexFields ) {
        let dataSource = Fse.Data.newDataSource( { object : "CDR.flexFields", paginate : false, keyField : "fieldId" });
        dataSource.load().done( function( data ) {
            instance.flexFields = data;
            d.notify( { id : "flexFields", data } )
        })
    }
   
    if( waitingFor.flexTabs ) {
        let dataSource = Fse.Data.newDataSource( { object : "CDR.flexTabs", paginate : false, keyField : "displayName", objectParams : { cdr_recordId : instance.distributorId } });
        dataSource.load().done( function( data ) {
            instance.flexTabs = data;
            d.notify( { id : "flexTabs", data } )
        })
    }

    let flexDataSource = Fse.Data.newDataSource( { object : "CDR.flexValues", paginate : false, objectParams : { cdr_recordId : instance.distributorId } });
    flexDataSource.load().done( function( data ) {
        instance.flexValues = data;
        d.notify( { id : "flexValues", data } )
    })
    
    let dataSource = Fse.Data.newDataSource( { object : "CDR.distributorDetails", paginate : false, keyField : "cdr_recordId", objectParams : { cdr_recordId : instance.distributorId }  });
    dataSource.load().done( function( data ) {
        instance.data = data[0];
        d.notify( { id : "data", data : instance.data } );
    })

    d.done( function() {
        loadPanel.hide();
        if( instance.portfolio ) {
            instance.portfolio.currentDistributor = instance.data;
            instance.portfolio.listRefreshNeeded = distributorPorfolioListRefreshNeeded;
            instance.portfolio.repaintHeading();

        }
        
        
    })

    return d;

}

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

}

DistributorProfile.prototype.element = function() {

    let instance = this;

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


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

    instance.load().done( function() {
        instance.createUI( instance.options.initialTabId );
    });

    return instance.rootElement;


}

DistributorProfile.prototype.getCurrentTabId = function() {

    let tabId = null;

    if( this.tabPanel ) {
        tabId = this.tabPanel.option( "selectedItem" ).id;
    }

    return tabId;

}

DistributorProfile.prototype.createUI = function( tabId ) {

    let instance = this;


    instance.rootElement.empty();    


    let tabs = [
        { id : "detail", title : "Details", 
            template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%"  } ).append( ( new DistributorDetails( instance ) ).element() ) }
        }
    ];
    instance.flexTabs.forEach( function( flexTab ) {
        if( flexTab.hasFields ) {
            tabs.push( {
                id : flexTab.displayName, title : flexTab.displayName,
                template : function() {
                    return $("<div>").css( { "height" : "100%", "padding" : "8px" } ).append( instance.flexTabTemplate( flexTab, instance.data ));
                }
            })
        }
    })
    
    let opportunitiesTabEnabled = Fse.Portal.getConfiguration( "102.profile.opportunitiesTabEnabled" ) == "true" ? true : false;
    let tradeTabEnabled = Fse.Portal.getConfiguration( "102.profile.tradeTabEnabled" ) == "true" ? true : false;
    let contactsTabEnabled = Fse.Portal.getConfiguration( "102.profile.contactsTabEnabled" ) == "true" ? true : false;
    let interactionsTabEnabled = Fse.Portal.getConfiguration( "102.profile.interactionsTabEnabled" ) == "true" ? true : false;
    let purchasingTabEnabled = Fse.Portal.getConfiguration( "102.profile.purchasingTabEnabled" ) == "true" ? true : false;
    let notesTabEnabled = Fse.Portal.getConfiguration( "102.profile.notesTabEnabled" ) == "true" ? true : false;
    let filesTabEnabled = Fse.Portal.getConfiguration( "102.profile.filesTabEnabled" ) == "true" ? true : false;
    let usingConferenceApp = Fse.Portal.appConfiguration["102"].usingConferenceApp == "true" && Fse.Portal.checkPermission( "EventsManager" ) ? true : false;
    
    let interactionsPermission = Fse.Portal.checkPermission( "BCRMCallTracking" ) ? true : false;
    let tradePermission = Fse.Portal.checkPermission( "TradeManagement" ) ? true : false;
    let purchasingPermission = Fse.Portal.checkPermission( "DistributorProfilePurchasing" ) ? true : false;
    let operatorPermission = Fse.Portal.checkPermission( "OperatorManagement" ) ? true : false;
    let opportunitiesPermission = Fse.Portal.checkPermission( "SalesPipeline" ) ? true : false;
    
    
    
    if ( contactsTabEnabled ){
        tabs.push( 
            { id : "contact", title : "Contacts", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.contactsTabTemplate( instance.data )) }}
        );    
    }
    
    if ( purchasingTabEnabled && purchasingPermission){
        tabs.push( 
            { id : "purchasing", title : "Purchasing", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.purchasingTabTemplate( instance.data )) }}
        );        
    }
    
    if ( interactionsTabEnabled && interactionsPermission ){
        tabs.push( 
            { id : "interactions", title : "Interactions", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.interactionsTabTemplate( instance.data )) }}
        );
    }

    if ( operatorPermission ){    
        tabs.push ( 
            { id : "operators", title : `${getTextPlural( 'OPERATOR' )}`, template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.distributorOperatorsTabTemplate( instance.data )) }}
        )
    }    
    
    
    if ( opportunitiesTabEnabled || opportunitiesPermission ){    
        tabs.push( 
            { id : "objectives", title : "Opportunities", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.opportunitiesTabTemplate( instance.data )) }}
        );
    }
    
    tabs.push( 
        { id : "tasks", title : "Tasks", template : function() { 
            return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.tasksTabTemplate( instance.data ))    
        }}
    )
    
    if( ( Fse.Portal.appConfiguration.STP.ownerType == "MFR" || Fse.Portal.appConfiguration.STP.ownerType == "BRO" ) && tradeTabEnabled && tradePermission ) {
        tabs.push( 
            { id : "trade", title : "Trade", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.tradeTabTemplate( instance.data )) }}
        );
    }
    
    if( usingConferenceApp && Fse.Portal.appConfiguration.STP.ownerType == "MFR" && (instance.data.dstcompanytype == "G" || instance.data.dstcompanytype == "P") ) {
        tabs.push( 
            { id : "conferences", title : "Conferences", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.conferenceTabTemplate( instance.data )) }}
        );
    }
    
    if ( Fse.Portal.appConfiguration.STP.ownerType == "BRO" ) {
    
        if (Fse.Portal.checkPermission( "BidManagement" ) ){
            tabs.push( 
                { id : "bids", title : "Bids", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.bidsTabTemplate( instance.data )) }},
            )
        }

        if( Fse.Portal.checkPermission( "DistributorManagementEdit") ) {
            tabs.push( 
            { id : "mfrs", title : "Manufacturers", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.manufacturersTabTemplate( instance.data )) }}
            )
        }
        
    }
    
    if ( notesTabEnabled  ){    
        tabs.push( 
            { id : "notes", title : "Notes", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.notesTabTemplate( instance.data )) }},
        )
    }
    if ( filesTabEnabled  ){            
        tabs.push( 
            { id : "files", title : "Files", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.filesTabTemplate( instance.data )) }}
        )
    }
    
    let tabIndex = 0;
    for( tx = 0; tx < tabs.length; tx++ ) {
        if( tabs[tx].id == tabId ) {
            tabIndex = tx;
            break;
        }
    }
        

    // remove the old panels if they exist
    if( instance.tabPanel ) {

        tabIndex = instance.tabPanel.option( "selectedIndex" );
        instance.tabPanel.element().remove();
        instance.tabPanel.dispose();
        instance.tabPanel = null;
    }

    instance.tabPanel = $("<div>").dxTabPanel( {
        items : tabs,
        selectedIndex : tabIndex,
        swipeEnabled : false,
        height : "100%"

    }).dxTabPanel( "instance" ); 

    instance.rootElement.append( instance.tabPanel.element() );


}

DistributorProfile.prototype.contactsTabTemplate = function( data ) {
    let instance = this;

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

    instance.contactList = new PartnerContactList( { partnerId : data.distributorId, partnerType : 'CDR' , primaryContactId : data.primaryContactId } )

    return instance.contactList.element();

 
}

DistributorProfile.prototype.filesTabTemplate = function( data ) {

    let assetGrid = new AssetGrid( { 
        contentDomain : "CDR", 
        containerType : "CDR", 
        containerId : data.distributorId,
        visibleColumns : [ "fileExt", "docTitle", "docDescription", "updateDate", "buttons" ],
        categoryEnabled : false
     });

     return assetGrid.element();
}

DistributorProfile.prototype.manufacturersTabTemplate = function( data ) {
    let instance = this;

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

    instance.mfrTab = new DistributorManufacturers( { cdr_recordId : data.distributorId } )
    return instance.mfrTab.element();
}

DistributorProfile.prototype.bidsTabTemplate = function( data ) {

    let instance = this;

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

    instance.bidTab = new PartnerBids( { partnerType : "CDR", partnerId : data.distributorId } )

    return instance.bidTab.element();
}

DistributorProfile.prototype.membersTabTemplate = function( data ) {
    let distributorMembers = new DistributorMembers( data );
    return distributorMembers.element();
}

DistributorProfile.prototype.distributorOperatorsTabTemplate = function( data ) {

    let distributorOperatorList = new DistributorOperatorList( data );
    return distributorOperatorList.element();

}
DistributorProfile.prototype.purchasingTabTemplate = function( data ) {

    let distributorPurchasing = new DistributorPurchasing( data );
    return distributorPurchasing.element();


}

DistributorProfile.prototype.tradeTabTemplate = function( data ) {
    let instance = this;

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

    instance.tradeTab = new PartnerTrade( { partnerType : "CDR", partnerId : data.distributorId } )

    return instance.tradeTab.element();
}

DistributorProfile.prototype.conferenceTabTemplate = function( data ) {
    let instance = this;

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

    instance.conferenceTab = new DistributorConferences( { partnerType : "CDR", partnerId : data.distributorId } )

    return instance.conferenceTab.element();
}


DistributorProfile.prototype.interactionsTabTemplate = function( data ) {


    let instance = this;
    if( instance.interactionsTab ) {
        instance.interactionsTab.element().remove();
        instance.interactionsTab = null;
    }

    instance.interactionsTab = new PartnerInteractions( { partnerType : "CDR", partnerId : data.distributorId}  )

    return instance.interactionsTab.element();


}


DistributorProfile.prototype.opportunitiesTabTemplate = function( data ) {

    let opportunityList = new OpportunityList( {
        partnerId : data.distributorId, partnerType : "CDR", height : 575,  allowAdd : Fse.Portal.checkPermission( 'SalesPipelineWrite' ) ? true : false
    })

    let content = $("<div>").append( opportunityList.element() );
    opportunityList.applyFilters();
    return content;
}

DistributorProfile.prototype.notesTabTemplate = function( data ) {
    let instance = this;

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

    instance.notesTab = new PartnerNotes( { partnerType : "CDR", partnerId : data.distributorId } );

    return instance.notesTab.element();
}


DistributorProfile.prototype.tasksTabTemplate = function( data ) {

    let instance = this;

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

    instance.tasksTab = new PartnerTasks( { partnerType : "CDR", partnerId : data.distributorId } )

    return instance.tasksTab.element();

}


DistributorProfile.prototype.flexTabTemplate = function( flexTab, data ) {

    let instance = this;
    if( flexTab.form ) {
        flexTab.form.element().remove();
        flexTab.form.dispose();
        flexTab.form = null;
    }

    let formData = {
        categories : []
    };



    let formItems = [];

    flexTab.categories.forEach( function( category ) {

        if( ! category.hasFields ) {
            return;
        }

        formData.categories.push( category.name );

        if( instance.flexValues[0][category.name] ) {
            let values = {};  values[category.name] = instance.flexValues[0][category.name];
            $.extend( true, formData, values );
        }


        let categoryItem = {
            itemType : "group", caption : category.title, items : []
        }

        // instance.buildFlexFieldItems( category.fields, categoryItem.items );
        FlexFields.buildFormItems( category.fields, categoryItem.items, 1 );

        formItems.push(  categoryItem );

    })


    // let template = $("<div>").css( { "padding" : "10px" } );

    // let scrollView = $("<div>").css( { "padding-bottom" : "10px" } );

    flexTab.form = $("<div>").dxForm( {
        items : formItems,
        formData : formData,
        height : "100%"
    }).dxForm( "instance" );

    // scrollView.append( flexTab.form.element() ).dxScrollView(
    //     {
    //         height : 500
    //     }
    // ).appendTo( template );

    let toolbar = $("<div>").dxToolbar( {
        items : [
            { location : "after",
              widget : "dxButton",
              options : {
                text : "Save",
                type : "default",
                onClick : function( e ) {

                    let vr = flexTab.form.validate();
                    if( ! vr.isValid ) {
                        return;
                    }
                    
                    let dataToSend = { 
                        cdr_recordId : data.distributorId,
                        flexValues : flexTab.form.option( "formData" )
                    }

                    Fse.Ajax.performAction( {
                        object : "CDR.saveFlexValues", 
                        data : dataToSend
                    }).done( function( result ) {

                        Fse.UI.toast( `${flexTab.displayName} Saved`, "success", 1000 );
            
                    });

                }
              }
            }
        ]
    })

    // toolbar.appendTo( template );
    let template = $("<div>").css( { "xmargin": "10px" }).dxBox( {
        height : "100%",
        direction : "col",
        items : [
            {
                ratio : 1,
                template : function() {
                    
                    return $("<div>").append( flexTab.form.element() ).dxScrollView( {
                        height : "100%"
                    })
                    
                }

            },
            {
                baseSize : 30,
                template : function() {
                    return toolbar;                 
                }
            }
        ]
    })    

    return template;

}


// DistributorProfile.prototype.buildFlexFieldItems = function( fields, targetArray, colCount ) {


//     if( ! colCount ) {
//         colCount = 1;
//     }

//     let parseConfig = function( configString ) {
//         let fieldConfig = {};

//         if( ! configString ) {
//             return fieldConfig;
//         }
//         let fieldConfigAVP = configString.split( "," );
//         fieldConfigAVP.forEach( function( avp ) {
//             let parts = avp.split( "=" );
//             fieldConfig[parts[0]] = parts[1];
//         })

//         return fieldConfig;
//     }

//     let formItems = [];

//     let colSpanCount = function() {
//         let colSpan = 0;
//         formItems.forEach( function( fi ) {

//             if( fi.colSpan ) {
//                 colSpan += fi.colSpan
//             } else {
//                 colSpan ++;
//             }

//         })
//         return colSpan;
//     }


//     fields.forEach( function( field ) {


//         let fieldItem = {
//             flexField : true,
//             dataField : `${field.category}.${field.name}`,
//             label : { text : field.label, location : "left" },
//             isRequired : field.required == "Y" ? true : false,
//             validationRules : []
//         }

//         // select
//         if( field.type == "SELECT" ) {
//             fieldItem.editorType = "dxSelectBox",
//             fieldItem.editorOptions = {
//                 dataSource : { store : { type : "array", key : "value", data : field.lookupValues } },
//                 displayExpr : "text",
//                 valueExpr : "value",
//                 showClearButton : true
//             }

//             if( colCount == 1 ) {

//                 let fieldConfig = parseConfig( field.config );
//                 if( fieldConfig.size ) {
//                     fieldItem.editorOptions.width = `${fieldConfig.size}em`;
//                 } else {
//                     fieldItem.editorOptions.width = 300;
//                 }
//                 //console.log( "SELECTBOX" );
//                 //console.log( fieldConfig );
    
//             }



//         } 

//         // radio
//         if( field.type == "RADIO" ) {
//             fieldItem.editorType = "dxRadioGroup";
//             fieldItem.editorOptions = {
//                 layout : "horizontal",
//                 dataSource : { store : { type : "array", key : "value", data : field.lookupValues } },
//                 displayExpr : "text",
//                 valueExpr : "value",
//                 showClearButton : true
//             }
//         }

//         // textarea
//         if ( field.type == "TEXTAREA" ) {

//             if( colCount != 1 ) {

//                 let colSpan = colSpanCount() % colCount;
//                 if( colSpan ) {
//                     colSpan = colCount - colSpan;
//                     formItems.push( { flexField : true, itemType : "empty", colSpan : colSpan });
//                 }


//                 fieldItem.colSpan = colCount;
//             }

//             fieldItem.editorType = "dxTextArea";
//             fieldItem.editorOptions = {
//                 maxLength : field.maxLength
//             }

//             let fieldConfig = parseConfig( field.config );

//             if( fieldConfig.rows ) {
//                 fieldItem.editorOptions.minHeight = fieldConfig.rows * 30;
//             }

//             if( colCount == 1 ) {
//                 if( fieldConfig.cols ) {
//                     fieldItem.editorOptions.width = `${fieldConfig.cols}em`;
//                 }

//                 if( fieldConfig.size ) {
//                     fieldItem.editorOptions.width = `${fieldConfig.size}em`;
//                 }
//             }


//         }

//         // checkbox
//         if( field.type == "CHECKBOX" ) {

//             fieldItem = {
//                 flexField : true,
//                 itemType : "group",
//                 items : [],
//                 colCount : colCount == 1 ? 3 : 2
//             }

//             if( true || colCount != 1  ) {
//                 // fieldItem.caption = field.label;
//                 // fieldItem.captionTemplate = function( itemData, container ) {
//                 //     container.append( $("<div>").css( {"color" : "red" } ).text( itemData.caption ));
//                 // }
//                 fieldItem.label = { text : field.label, location : "left", template : function( itemData, container ) {
//                     container.append($("<span>").text( itemData.text ).css( { "xcolor" : "red" } ) ); // css( { "font-weight" : "bold" } ).
//                 } }
//             }


//             if( field.lookupValues ) {
//                 field.lookupValues.forEach( function( cbi ) {

//                     let checkBoxItem = {
//                         dataField : `${field.category}.${field.name}.${cbi.value}`,
//                         label : { text : cbi.text, location : 'left' },
//                         editorType : "dxCheckBox"
//                     }
    
//                     fieldItem.items.push( checkBoxItem );
    
//                 })
//             }


//         }

//         // this is not fully implemented, and as such it is not in the list of fields returned by flexFields
//         if( field.type == "FILE" ) {

//             fieldItem.template = function( options, itemElement ) {

//                 let customEditors = options.component.option( "customEditors" );
//                 if( ! customEditors ) {
//                     customEditors = {};
//                 }

//                 let editorContainer = $("<div>"); 
//                 let fileUploader = $("<div>").dxFileUploader({


//                 }).dxFileUploader( "instance" );
//                 editorContainer.append( fileUploader.element() );

//                 itemElement.append( editorContainer ).addClass( "find-me" );
                
//                 customEditors[fieldItem.dataField] = fileUploader;
//                 options.component.option( "customEditors", customEditors );


//             }
//         }


//         /*
//         if( ! fieldItem.editorType && field.type != 'CHECKBOX' ) {
//             console.log( "FIELDTYPE " + field.type );
//             console.log( field )
//         }
//         */

//         // all other- default is a text box with a length limit
//         if( ! fieldItem.editorType && field.type != "FILE" ) {

//             fieldItem.editorOptions = {};

//             if( field.format == "email" ) {
//                 fieldItem.editorType = "dxTextBox";
//                 fieldItem.editorOptions.placeholder = "mailbox@company.com";
//                 fieldItem.validationRules.push( { type : "email" } );
//             }

//             if( field.format == "url" ) {
//                 fieldItem.editorType = "dxTextBox";
//                 fieldItem.editorOptions.placeholder = "https://company.com";
//                 let validURLPattern = /^https?:\/\/([-\w\.]+)+(:\d+)?(:\w+)?(@\d+)?(@\w+)?([-\w\.]+)(\/([\w\/_\.]*(\?\S+)?)?)?/i;
//                 fieldItem.validationRules.push( { type : "pattern", message : "Invalid URL", pattern : validURLPattern } );
//             }

//             if( field.format == "date" ) {
//                 fieldItem.editorType = "dxDateBox";
//                 fieldItem.editorOptions.placeholder = "mm/dd/yyyy";
//                 fieldItem.editorOptions.openOnFieldClick = true;
//             }

//             if( field.format == "integer" || field.format == "decimal" ) {
//                 fieldItem.editorType = "dxNumberBox";
//                 fieldItem.editorOptions.showSpinButtons = false;
//                 if( field.format == "integer" ) {
//                     fieldItem.editorOptions.format = "#";
//                 } 
//                 if( field.format == "decimal" ) {
//                     fieldItem.editorOptions.format = "#.0#";
//                 }
//                 if( field.maxLength > 0 ) {
//                     fieldItem.editorOptions.maxLength = field.maxLength;
//                 }
//             }

//             if( ! fieldItem.itemType && ! fieldItem.editorType) {
//                 fieldItem.editorType = "dxTextBox";
//             }

//             if( fieldItem.editorType == "dxTextBox" && field.maxLength > 0 ) {
//                 fieldItem.editorOptions.maxLength = field.maxLength;
//             }
            
//             if( colCount == 1 ) {
//                 let fieldConfig = parseConfig( field.config );
//                 if( fieldConfig.size ) {
//                     fieldItem.editorOptions.width = `${fieldConfig.size}em`;
//                 }
//             }


//         }

//         if( field.lockEdit == "Y" ) {
        
//             if( field.type != "CHECKBOX" ) {
//                 fieldItem.editorOptions = fieldItem.editorOptions ? fieldItem.editorOptions : {};
//                 fieldItem.editorOptions.readOnly = true;
//             }else{
//                 let x = 0;
//                 field.lookupValues.forEach( function( ) {
//                     //fieldItem.items[x].readOnly = true; //does not work
//                     fieldItem.items[x].disabled = true;
//                     x++;
//                 })
//             }
            
//         } 
    
//         formItems.push( fieldItem );

//         if( field.type == "CHECKBOX" ) {
//             let fieldSeparatorItem = { name : `fieldSeparator_${field.name}`, itemType : "empty" }
//             console.log( "fieldSeparatorItem", fieldSeparatorItem );
//             formItems.push( fieldSeparatorItem )
//         }

//     })


    
//     if( colCount != 1 ) {
//         let colSpan = colSpanCount() % colCount;
//         if( colSpan ) {
//             colSpan = colCount - colSpan;
//             formItems.push( { itemType : "empty", colSpan : colSpan })
//         }
//     }

//     if( targetArray ) {
//         formItems.forEach( function( fi ) {
//             targetArray.push( fi );
//         })
//     }


//     return formItems;

// }