"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/* tslint:disable */
var React = require("react");
/* tslint:enable */
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var Dropdown_1 = require("office-ui-fabric-react/lib/Dropdown");
var Toggle_1 = require("office-ui-fabric-react/lib/Toggle");
var Persona_1 = require("office-ui-fabric-react/lib/Persona");
var Pickers_1 = require("office-ui-fabric-react/lib/Pickers");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var PeoplePickerExampleData_1 = require("./PeoplePickerExampleData");
var Button_2 = require("office-ui-fabric-react/lib/Button");
var es6_promise_1 = require("es6-promise");
require("./PeoplePicker.Types.Example.scss");
var suggestionProps = {
    suggestionsHeaderText: 'Suggested People',
    mostRecentlyUsedHeaderText: 'Suggested Contacts',
    noResultsFoundText: 'No results found',
    loadingText: 'Loading',
    showRemoveButtons: true,
    suggestionsAvailableAlertText: 'People Picker Suggestions available'
};
var limitedSearchAdditionalProps = {
    searchForMoreText: 'Load all Results',
    resultsMaximumNumber: 10,
    searchingText: 'Searching...'
};
var limitedSearchSuggestionProps = Utilities_1.assign(limitedSearchAdditionalProps, suggestionProps);
var PeoplePickerTypesExample = (function (_super) {
    tslib_1.__extends(PeoplePickerTypesExample, _super);
    function PeoplePickerTypesExample() {
        var _this = _super.call(this) || this;
        var peopleList = [];
        PeoplePickerExampleData_1.people.forEach(function (persona) {
            var target = {};
            Utilities_1.assign(target, persona);
            peopleList.push(target);
        });
        _this.state = {
            currentPicker: 1,
            delayResults: false,
            peopleList: peopleList,
            mostRecentlyUsed: PeoplePickerExampleData_1.mru,
            currentSelectedItems: []
        };
        return _this;
    }
    PeoplePickerTypesExample.prototype.render = function () {
        var currentPicker = undefined;
        switch (this.state.currentPicker) {
            case 1:
                currentPicker = this._renderNormalPicker();
                break;
            case 2:
                currentPicker = this._renderCompactPicker();
                break;
            case 3:
                currentPicker = this._renderListPicker();
                break;
            case 4:
                currentPicker = this._renderPreselectedItemsPicker();
                break;
            case 5:
                currentPicker = this._renderLimitedSearch();
                break;
            case 6:
                currentPicker = this._renderProcessSelectionPicker();
            case 7:
                currentPicker = this._renderControlledPicker();
                break;
            default:
        }
        return (React.createElement("div", null,
            currentPicker,
            React.createElement("div", { className: 'dropdown-div' },
                React.createElement(Dropdown_1.Dropdown, { label: 'Select People Picker Type', options: [
                        { key: 1, text: 'Normal' },
                        { key: 2, text: 'Compact' },
                        { key: 3, text: 'Members List' },
                        { key: 4, text: 'Preselected Items' },
                        { key: 5, text: 'Limit Search' },
                        { key: 6, text: 'Process Selection' },
                        { key: 7, text: 'Controlled Picker' }
                    ], selectedKey: this.state.currentPicker, onChanged: this._dropDownSelected }),
                React.createElement(Toggle_1.Toggle, { label: 'Delay Suggestion Results', defaultChecked: false, onChanged: this._toggleDelayResultsChange })),
            React.createElement(Button_1.PrimaryButton, { text: 'Set focus', onClick: this._onSetFocusButtonClicked })));
    };
    PeoplePickerTypesExample.prototype._renderListPicker = function () {
        var _this = this;
        return (React.createElement(Pickers_1.ListPeoplePicker, { onResolveSuggestions: this._onFilterChanged, onEmptyInputFocus: this._returnMostRecentlyUsed, getTextFromItem: function (persona) { return persona.primaryText; }, className: 'ms-PeoplePicker', pickerSuggestionsProps: suggestionProps, key: 'list', onRemoveSuggestion: this._onRemoveSuggestion, onValidateInput: this._validateInput, inputProps: {
                onBlur: function (ev) { return console.log('onBlur called'); },
                onFocus: function (ev) { return console.log('onFocus called'); },
                'aria-label': 'People Picker'
            }, componentRef: function (component) { return _this._picker = component; } }));
    };
    PeoplePickerTypesExample.prototype._renderNormalPicker = function () {
        var _this = this;
        return (React.createElement(Pickers_1.NormalPeoplePicker, { onResolveSuggestions: this._onFilterChanged, onEmptyInputFocus: this._returnMostRecentlyUsed, getTextFromItem: function (persona) { return persona.primaryText; }, pickerSuggestionsProps: suggestionProps, className: 'ms-PeoplePicker', key: 'normal', onRemoveSuggestion: this._onRemoveSuggestion, onValidateInput: this._validateInput, removeButtonAriaLabel: 'Remove', inputProps: {
                onBlur: function (ev) { return console.log('onBlur called'); },
                onFocus: function (ev) { return console.log('onFocus called'); },
                'aria-label': 'People Picker'
            }, componentRef: function (component) { return _this._picker = component; } }));
    };
    PeoplePickerTypesExample.prototype._renderCompactPicker = function () {
        var _this = this;
        return (React.createElement(Pickers_1.CompactPeoplePicker, { onResolveSuggestions: this._onFilterChanged, onEmptyInputFocus: this._returnMostRecentlyUsed, getTextFromItem: function (persona) { return persona.primaryText; }, pickerSuggestionsProps: suggestionProps, className: 'ms-PeoplePicker', onRemoveSuggestion: this._onRemoveSuggestion, onValidateInput: this._validateInput, inputProps: {
                onBlur: function (ev) { return console.log('onBlur called'); },
                onFocus: function (ev) { return console.log('onFocus called'); },
                'aria-label': 'People Picker'
            }, componentRef: function (component) { return _this._picker = component; } }));
    };
    PeoplePickerTypesExample.prototype._renderPreselectedItemsPicker = function () {
        var _this = this;
        return (React.createElement(Pickers_1.CompactPeoplePicker, { onResolveSuggestions: this._onFilterChanged, onEmptyInputFocus: this._returnMostRecentlyUsed, getTextFromItem: function (persona) { return persona.primaryText; }, className: 'ms-PeoplePicker', defaultSelectedItems: PeoplePickerExampleData_1.people.splice(0, 3), key: 'list', pickerSuggestionsProps: suggestionProps, onRemoveSuggestion: this._onRemoveSuggestion, onValidateInput: this._validateInput, inputProps: {
                onBlur: function (ev) { return console.log('onBlur called'); },
                onFocus: function (ev) { return console.log('onFocus called'); },
                'aria-label': 'People Picker'
            }, componentRef: function (component) { return _this._picker = component; } }));
    };
    PeoplePickerTypesExample.prototype._renderLimitedSearch = function () {
        var _this = this;
        limitedSearchSuggestionProps.resultsFooter = this._renderFooterText;
        return (React.createElement(Pickers_1.CompactPeoplePicker, { onResolveSuggestions: this._onFilterChangedWithLimit, onEmptyInputFocus: this._returnMostRecentlyUsedWithLimit, getTextFromItem: function (persona) { return persona.primaryText; }, className: 'ms-PeoplePicker', onGetMoreResults: this._onFilterChanged, pickerSuggestionsProps: limitedSearchSuggestionProps, onRemoveSuggestion: this._onRemoveSuggestion, inputProps: {
                onBlur: function (ev) { return console.log('onBlur called'); },
                onFocus: function (ev) { return console.log('onFocus called'); },
                'aria-label': 'People Picker'
            }, componentRef: function (component) { return _this._picker = component; } }));
    };
    PeoplePickerTypesExample.prototype._renderProcessSelectionPicker = function () {
        var _this = this;
        return (React.createElement(Pickers_1.NormalPeoplePicker, { onResolveSuggestions: this._onFilterChanged, onEmptyInputFocus: this._returnMostRecentlyUsed, getTextFromItem: function (persona) { return persona.primaryText; }, pickerSuggestionsProps: suggestionProps, className: 'ms-PeoplePicker', onRemoveSuggestion: this._onRemoveSuggestion, onValidateInput: this._validateInput, removeButtonAriaLabel: 'Remove', onItemSelected: this._onItemSelected, inputProps: {
                onBlur: function (ev) { return console.log('onBlur called'); },
                onFocus: function (ev) { return console.log('onFocus called'); },
                'aria-label': 'People Picker'
            }, componentRef: function (component) { return _this._picker = component; } }));
    };
    PeoplePickerTypesExample.prototype._renderControlledPicker = function () {
        var _this = this;
        var controlledItems = [];
        for (var i = 0; i < 5; i++) {
            var item = this.state.peopleList[i];
            if (this.state.currentSelectedItems.indexOf(item) === -1) {
                controlledItems.push(this.state.peopleList[i]);
            }
        }
        return (React.createElement("div", null,
            React.createElement(Pickers_1.NormalPeoplePicker, { onResolveSuggestions: this._onFilterChanged, getTextFromItem: function (persona) { return persona.primaryText; }, pickerSuggestionsProps: suggestionProps, className: 'ms-PeoplePicker', key: 'controlled', selectedItems: this.state.currentSelectedItems, onChange: this.onItemsChange.bind(this), inputProps: {
                    onBlur: function (ev) { return console.log('onBlur called'); },
                    onFocus: function (ev) { return console.log('onFocus called'); }
                }, componentRef: function (component) { return _this._picker = component; } }),
            React.createElement("label", null, " Click to Add a person "),
            controlledItems.map(function (item) { return React.createElement("div", null,
                React.createElement(Button_2.DefaultButton, { className: 'controlledPickerButton', onClick: function () {
                        _this.setState({
                            currentSelectedItems: _this.state.currentSelectedItems.concat([item])
                        });
                    } },
                    React.createElement(Persona_1.Persona, tslib_1.__assign({}, item)))); })));
    };
    PeoplePickerTypesExample.prototype.onItemsChange = function (items) {
        this.setState({
            currentSelectedItems: items
        });
    };
    PeoplePickerTypesExample.prototype._onSetFocusButtonClicked = function () {
        if (this._picker) {
            this._picker.focus();
        }
    };
    PeoplePickerTypesExample.prototype._renderFooterText = function () {
        return React.createElement("div", null, "No additional results");
    };
    PeoplePickerTypesExample.prototype._onRemoveSuggestion = function (item) {
        var _a = this.state, peopleList = _a.peopleList, mruState = _a.mostRecentlyUsed;
        var indexPeopleList = peopleList.indexOf(item);
        var indexMostRecentlyUsed = mruState.indexOf(item);
        if (indexPeopleList >= 0) {
            var newPeople = peopleList.slice(0, indexPeopleList).concat(peopleList.slice(indexPeopleList + 1));
            this.setState({ peopleList: newPeople });
        }
        if (indexMostRecentlyUsed >= 0) {
            var newSuggestedPeople = mruState.slice(0, indexMostRecentlyUsed).concat(mruState.slice(indexMostRecentlyUsed + 1));
            this.setState({ mostRecentlyUsed: newSuggestedPeople });
        }
    };
    PeoplePickerTypesExample.prototype._onItemSelected = function (item) {
        var processedItem = Object.assign({}, item);
        processedItem.primaryText = item.primaryText + " (selected)";
        return new es6_promise_1.Promise(function (resolve, reject) { return setTimeout(function () { return resolve(processedItem); }, 250); });
    };
    PeoplePickerTypesExample.prototype._onFilterChanged = function (filterText, currentPersonas, limitResults) {
        if (filterText) {
            var filteredPersonas = this._filterPersonasByText(filterText);
            filteredPersonas = this._removeDuplicates(filteredPersonas, currentPersonas);
            filteredPersonas = limitResults ? filteredPersonas.splice(0, limitResults) : filteredPersonas;
            return this._filterPromise(filteredPersonas);
        }
        else {
            return [];
        }
    };
    PeoplePickerTypesExample.prototype._returnMostRecentlyUsed = function (currentPersonas) {
        var mostRecentlyUsed = this.state.mostRecentlyUsed;
        mostRecentlyUsed = this._removeDuplicates(mostRecentlyUsed, currentPersonas);
        return this._filterPromise(mostRecentlyUsed);
    };
    PeoplePickerTypesExample.prototype._returnMostRecentlyUsedWithLimit = function (currentPersonas) {
        var mostRecentlyUsed = this.state.mostRecentlyUsed;
        mostRecentlyUsed = this._removeDuplicates(mostRecentlyUsed, currentPersonas);
        mostRecentlyUsed = mostRecentlyUsed.splice(0, 3);
        return this._filterPromise(mostRecentlyUsed);
    };
    PeoplePickerTypesExample.prototype._onFilterChangedWithLimit = function (filterText, currentPersonas) {
        return this._onFilterChanged(filterText, currentPersonas, 3);
    };
    PeoplePickerTypesExample.prototype._filterPromise = function (personasToReturn) {
        if (this.state.delayResults) {
            return this._convertResultsToPromise(personasToReturn);
        }
        else {
            return personasToReturn;
        }
    };
    PeoplePickerTypesExample.prototype._listContainsPersona = function (persona, personas) {
        if (!personas || !personas.length || personas.length === 0) {
            return false;
        }
        return personas.filter(function (item) { return item.primaryText === persona.primaryText; }).length > 0;
    };
    PeoplePickerTypesExample.prototype._filterPersonasByText = function (filterText) {
        var _this = this;
        return this.state.peopleList.filter(function (item) { return _this._doesTextStartWith(item.primaryText, filterText); });
    };
    PeoplePickerTypesExample.prototype._doesTextStartWith = function (text, filterText) {
        return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
    };
    PeoplePickerTypesExample.prototype._convertResultsToPromise = function (results) {
        return new es6_promise_1.Promise(function (resolve, reject) { return setTimeout(function () { return resolve(results); }, 2000); });
    };
    PeoplePickerTypesExample.prototype._removeDuplicates = function (personas, possibleDupes) {
        var _this = this;
        return personas.filter(function (persona) { return !_this._listContainsPersona(persona, possibleDupes); });
    };
    PeoplePickerTypesExample.prototype._toggleDelayResultsChange = function (toggleState) {
        this.setState({ delayResults: toggleState });
    };
    PeoplePickerTypesExample.prototype._dropDownSelected = function (option) {
        this.setState({ currentPicker: option.key });
    };
    PeoplePickerTypesExample.prototype._validateInput = function (input) {
        if (input.indexOf('@') !== -1) {
            return Pickers_1.ValidationState.valid;
        }
        else if (input.length > 1) {
            return Pickers_1.ValidationState.warning;
        }
        else {
            return Pickers_1.ValidationState.invalid;
        }
    };
    tslib_1.__decorate([
        Utilities_1.autobind
    ], PeoplePickerTypesExample.prototype, "_onSetFocusButtonClicked", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], PeoplePickerTypesExample.prototype, "_renderFooterText", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], PeoplePickerTypesExample.prototype, "_onRemoveSuggestion", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], PeoplePickerTypesExample.prototype, "_onItemSelected", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], PeoplePickerTypesExample.prototype, "_onFilterChanged", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], PeoplePickerTypesExample.prototype, "_returnMostRecentlyUsed", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], PeoplePickerTypesExample.prototype, "_returnMostRecentlyUsedWithLimit", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], PeoplePickerTypesExample.prototype, "_onFilterChangedWithLimit", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], PeoplePickerTypesExample.prototype, "_toggleDelayResultsChange", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], PeoplePickerTypesExample.prototype, "_dropDownSelected", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], PeoplePickerTypesExample.prototype, "_validateInput", null);
    return PeoplePickerTypesExample;
}(Utilities_1.BaseComponent));
exports.PeoplePickerTypesExample = PeoplePickerTypesExample;

//# sourceMappingURL=PeoplePicker.Types.Example.js.map
