ObjectiveStaff = function( data ) {
	let instance = this;
	instance.data = $.extend( true, {}, data );

	instance.data.staff = instance.data.staff ? instance.data.staff : [];
	instance.data.territories = instance.data.territoryId ? [ { territoryId : instance.data.territoryId }] : [];

	instance.toolbar = null;
	instance.list = null;

	instance.updatedPromise = $.Deferred();
}

ObjectiveStaff.prototype.construtor = ObjectiveStaff;

ObjectiveStaff.prototype.element = function() {

	let instance =this;
	if( instance.rootElement ) return instance.rootElement;

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

	instance.toolbar = $("<div>").dxToolbar( {
		items : [
			{ location : "after", widget : "dxButton", 
				options : { 
					text : "Add Sales Team",
					icon : "plus",
					onClick : function( e ) {
						instance._addUsers();
					}
				}
			}
		]

	}).dxToolbar( "instance" );

	instance.list = $("<div>").dxList( {
		allowItemDeleting : true,
		itemDeleteMode : "static",
        height : "100%",
		items : instance.data.staff,
		noDataText : "No staff members selected. Click 'Add Sales Team' to get started.",
		onOptionChanged : function( e ) {
			if( e.name == "items" ) {
				instance.updatedPromise.notify( e.value );
			}
		},
		itemTemplate : function( data ) {
                return $("<div>").text( `${data.fullName} (${data.email})`);
		}
	}).css( { "border-style" : "solid", "border-width" : "1px" }).addClass( "dx-theme-border-color" ).dxList( "instance" );


    $("<div>").dxBox( {
        height : "100%",
        direction : "col",
        items : [
            {
                baseSize : 35,
                template : function() {
                    return instance.toolbar.element();
                } 
            },
            { 
                ratio : 1,
                template : function() {
                    return instance.list.element();
                }
            }
        ]
    }).appendTo( instance.rootElement );


	return instance.rootElement;
	

}

ObjectiveStaff.prototype._addUsers = function() {

	let instance = this;

	let pickerOptions = {
		territories : instance.data.territories,
		existingStaff : instance.data.staff
	}

	let osp = new ObjectiveStaffPicker( pickerOptions );
	osp.show().done( function( pickedStaff ) {


		let selectedStaff = instance.list.option( "items" );

		pickedStaff.forEach( function( i ) {


			let staff = {
				fullName : i.fullName,
				email : i.email,
				linkId : 0,
				fspro_userId : i.fspro_userId
			}

			selectedStaff.push( staff );
			refresh = true;


		})

		if( refresh ) {
			instance.list.option( "items", selectedStaff );;
		}

	})

}

ObjectiveStaff.prototype.update = function() {
	let instance = this;

	let objectiveStaff = instance.list.option( "items" );

	instance.updatedPromise.resolve( objectiveStaff );
}

ObjectiveStaff.prototype.updated = function() {
	return this.updatedPromise;
}