"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 SuggestionsStore_1 = require("../../Suggestions/SuggestionsStore");
var FloatingPicker_1 = require("office-ui-fabric-react/lib/FloatingPicker");
var ExtendedPicker_1 = require("office-ui-fabric-react/lib/ExtendedPicker");
var SearchBox_1 = require("office-ui-fabric-react/lib/SearchBox");
require("./FloatingPeoplePicker.Basic.Example.scss");
var FloatingPeoplePickerTypesExample = /** @class */ (function (_super) {
    tslib_1.__extends(FloatingPeoplePickerTypesExample, _super);
    function FloatingPeoplePickerTypesExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onFocus = function () {
            if (_this._picker) {
                _this._picker.showPicker();
            }
        };
        _this._setInputElementRef = function (ref) {
            if (ref && ref.getElementsByClassName('ms-SearchBox-field').length > 0) {
                _this._inputElement = ref.getElementsByClassName('ms-SearchBox-field')[0];
            }
        };
        _this._setComponentRef = function (component) {
            _this._picker = component;
        };
        _this._onSearchChange = function (newValue) {
            if (newValue !== _this.state.searchValue) {
                _this.setState({ searchValue: newValue });
                _this._picker.onQueryStringChanged(newValue);
            }
        };
        _this._onPickerChange = function (selectedSuggestion) {
            _this.setState({ searchValue: selectedSuggestion.text ? selectedSuggestion.text : '' });
            _this._picker.hidePicker();
        };
        _this._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 });
            }
        };
        _this._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 filteredPersonas;
            }
            else {
                return [];
            }
        };
        _this._validateInput = function (input) {
            if (input.indexOf('@') !== -1) {
                return true;
            }
            else if (input.length > 1) {
                return false;
            }
            else {
                return false;
            }
        };
        var peopleList = [];
        ExtendedPicker_1.people.forEach(function (persona) {
            var target = {};
            Utilities_1.assign(target, persona);
            peopleList.push(target);
        });
        _this.state = {
            peopleList: peopleList,
            mostRecentlyUsed: ExtendedPicker_1.mru,
            currentSelectedItems: [],
            searchValue: ''
        };
        return _this;
    }
    FloatingPeoplePickerTypesExample.prototype.render = function () {
        return (React.createElement("div", null,
            React.createElement("div", { className: "ms-SearchBoxSmallExample", ref: this._setInputElementRef },
                React.createElement(SearchBox_1.SearchBox, { placeholder: 'Search a person', onChange: this._onSearchChange, value: this.state.searchValue, onFocus: this._onFocus })),
            this._renderFloatingPicker()));
    };
    FloatingPeoplePickerTypesExample.prototype._renderFloatingPicker = function () {
        var _this = this;
        var suggestionProps = {
            footerItemsProps: [
                {
                    renderItem: function () {
                        return React.createElement("div", null,
                            "Showing ",
                            _this._picker.suggestions.length,
                            " results");
                    },
                    shouldShow: function () {
                        return _this._picker.suggestions.length > 0;
                    }
                }
            ]
        };
        return (React.createElement(FloatingPicker_1.FloatingPeoplePicker, { suggestionsStore: new SuggestionsStore_1.SuggestionsStore(), onResolveSuggestions: this._onFilterChanged, getTextFromItem: this._getTextFromItem, pickerSuggestionsProps: suggestionProps, key: 'normal', onRemoveSuggestion: this._onRemoveSuggestion, onValidateInput: this._validateInput, componentRef: this._setComponentRef, onChange: this._onPickerChange, inputElement: this._inputElement, resolveDelay: 300 }));
    };
    FloatingPeoplePickerTypesExample.prototype._getTextFromItem = function (persona) {
        return persona.text;
    };
    FloatingPeoplePickerTypesExample.prototype._listContainsPersona = function (persona, personas) {
        if (!personas || !personas.length || personas.length === 0) {
            return false;
        }
        return personas.filter(function (item) { return item.text === persona.text; }).length > 0;
    };
    FloatingPeoplePickerTypesExample.prototype._filterPersonasByText = function (filterText) {
        var _this = this;
        return this.state.peopleList.filter(function (item) {
            return _this._doesTextStartWith(item.text, filterText);
        });
    };
    FloatingPeoplePickerTypesExample.prototype._doesTextStartWith = function (text, filterText) {
        return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
    };
    FloatingPeoplePickerTypesExample.prototype._removeDuplicates = function (personas, possibleDupes) {
        var _this = this;
        return personas.filter(function (persona) { return !_this._listContainsPersona(persona, possibleDupes); });
    };
    return FloatingPeoplePickerTypesExample;
}(Utilities_1.BaseComponent));
exports.FloatingPeoplePickerTypesExample = FloatingPeoplePickerTypesExample;
//# sourceMappingURL=FloatingPeoplePicker.Basic.Example.js.map