StaffPicker = function( options ) {


}

StaffPicker.prototype.constructor = StaffPicker;

StaffPicker.prototype.show = function( options ) {

    let popup = null;

    let addButton = null;

    let availableStaffDataGrid = $("<div>").dxDataGrid( {

        dataSource : Fse.Data.newDataSource( { object : "FSPRO.members", objectParams : { staffMembersOnly : true, loginEnabledOnly : true }, paginate : false }),
        selection : {
            allowSelectAll : false,
            mode : "multiple",
            showCheckBoxesMode : "always"
        },
        scrolling : {
            mode : "virtual"
        },
        height : 225,
        showBorders : true,
        columns : [
            { dataField : "firstName", caption : "First Name" },
            { dataField : "lastName", caption : "Last Name" },
            { dataField : "email", caption : "Email Address" },
            { dataField : "title", caption : "Title" }
        ],
        onSelectionChanged : function( e ) {
            if( e.selectedRowsData.length ) {
                addButton.option( "disabled", false );
            } else {
                addButton.option( "disabled", true );
            }
        }

    }).dxDataGrid( "instance" );


    addButton  =  $("<div>").dxButton( {
        text : "Add Selected", type : "default", disabled : true,
        onClick : function( be ) {
            let selectedItems = null;
            
            if( options.onStaffPicked ) {
                options.onStaffPicked( availableStaffDataGrid.getSelectedRowsData() );
            }
            popup.hide();
        } 
    }).dxButton( "instance" );

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

        title : "Select Staff",
        height : 450,
        width : 1000,
        contentTemplate : function( ) {

            let content = $("<div>");

            content.append( availableStaffDataGrid.element() )

            return content;
        },
        onHidden : function( he ) {
            he.component.element().remove();
            he.component.dispose();
            addButton.dispose();
            availableStaffDataGrid.dispose();
        },
        toolbarItems : [
            { toolbar : "bottom", location : "after", template : function() { return addButton.element() }}
        ]

    }).appendTo( $("body" )).dxPopup( "instance" );
    
    popup.show();    

    




}