ObjectiveStaffPicker = function( options ) {

    let instance = this;

    instance.existingStaff = options.existingStaff ? options.existingStaff : [];
    instance.territories = options.territories ? options.territories : [];

    if( ! Array.isArray( instance.existingStaff ) ) instance.existingStaff = [ instance.existingStaff ];
    if( ! Array.isArray( instance.territories ) ) instance.territories = [ instance.territories ];

    console.log( "ObjectiveStaffPicker", options )

}

ObjectiveStaffPicker.prototype.constructor = ObjectiveStaffPicker;

ObjectiveStaffPicker.prototype.show = function() {

    let instance = this;

    let popup = null;

    let pickPromise = $.Deferred();

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

    instance.addButton = $("<div>").dxButton( {
        text : "Add Selected",
        type : "default",
        dislabled : true,
        onClick : function( e ) {


            let selectedItems = instance.userList.option( "selectedItems" );

            if( ! selectedItems.length ) return;

            pickPromise.resolve( selectedItems );
            popup.hide();

        }
    }).dxButton( "instance" );


    instance.groupFilter = $("<div>").dxSelectBox( {
        placeholder : "select group",
        showClearButton : true,
        dataSource : Fse.Data.newDataSource( { object : "SEC.groups", key : "groupId", objectParams : { includeSystemGroups : true }} ),
        displayExpr : "groupName",
        valueExpr : "groupId",
        searchEnabled : true,
        searchExpr : "groupName",
        searchMode : "contains",
        onValueChanged : function( e ) {
            instance._setStaffListDataSource( e.value );
        }
    }).dxSelectBox( "instance" );

    instance.userList = $("<div>").dxList( {
        // dataSource is set later
        displayExpr : "fullName",
        keyExpr : "fspro_userId",
        selectionMode : "multiple",
        searchEnabled : true,
        searchExpr : "fullName",
        searchMode : "contains",
        showSelectionControls : true,
        pageLoadMode : "scrollBottom",
        onOptionChanged : function( e ) {
            if( e.name == "selectedItems" ) {
                if( e.value && e.value.length ) {
                    selectionCountElement.text( `${e.value.length} users selected` );
                    instance.addButton.option( "disabled", false );
                } else {
                    selectionCountElement.empty();
                    instance.addButton.option( "disabled", true );
                }
            }
        }
    }).dxList( "instance" );


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

        title : "Add Staff",
        hideOnOutsideClick : true,
        width : 400,
        height : 400,

        contentTemplate : function() {

            let box = $("<div>").dxBox( {
                height : "100%",
                direction : "col",
                items : [
                    {
                        baseSize : 35,
                        template : function() {
                            return instance.groupFilter.element();
                        }
                    },
                    {
                        ratio : 1,
                        template : function() {
                            return instance.userList.element();
                        }
                    }
                ]
            })

            return box;

        },

        toolbarItems : [
            { 
                toolbar : "bottom",
                location : "before",
                template : function() {
                    return selectionCountElement;
                }
            },
            { 
                toolbar : "bottom",
                location : "after",
                template : function() {
                    return instance.addButton.element();
                }
            }
        ],

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

        onShown : function( e ) {
            instance._setStaffListDataSource();
        }

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

    return pickPromise;


}

ObjectiveStaffPicker.prototype._setStaffListDataSource = function( groupId ) {


    let instance = this;


    let existingStaffStore = new DevExpress.data.ArrayStore( { data : instance.existingStaff, key : "fspro_userId" } );

    let objectParams = {};

    if( groupId ) {
        objectParams.groupId = groupId
    }

    let territoryFilter = [];
    instance.territories.forEach( function( territory ) {
        if( territoryFilter.length ) territoryFilter.push( "or" );
        territoryFilter.push( [ "territoryIdList", "contains", `#${territory.territoryId};` ] );
    })

    if( territoryFilter.length == 0 ) territoryFilter = null;    

    let salesRepDataSource = Fse.Data.newDataSource( { object : "CRM.salesRepList", key : "fspro_userId", paginate : false, filter : territoryFilter,
        objectParams : objectParams,
        map : function( item ) {

            existingStaffStore.byKey( item.fspro_userId ).done( function() {
                item.disabled = true;
            }).fail( function() {
                item.disabled = false;
            })
            return item;
        }
    } );
    
    instance.userList.option( "dataSource", salesRepDataSource );

}