define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/ExtendedPicker", "office-ui-fabric-react/lib/Button", "./PeopleExampleData", "office-ui-fabric-react/lib/FloatingPicker", "office-ui-fabric-react/lib/SelectedItemsList", "office-ui-fabric-react/lib/Toggle", "./ExtendedPeoplePicker.Basic.Example.scss"], function (require, exports, tslib_1, React, Utilities_1, ExtendedPicker_1, Button_1, PeopleExampleData_1, FloatingPicker_1, SelectedItemsList_1, Toggle_1, stylesImport) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    // tslint:disable-next-line:no-any
    var styles = stylesImport;
    // tslint:disable-next-line:no-any
    var ExtendedPeoplePickerTypesExample = /** @class */ (function (_super) {
        tslib_1.__extends(ExtendedPeoplePickerTypesExample, _super);
        function ExtendedPeoplePickerTypesExample(props) {
            var _this = _super.call(this, props) || this;
            _this._toggleControlledComponent = function (toggleState) {
                _this.setState({ controlledComponent: toggleState });
            };
            _this._setComponentRef = function (component) {
                _this._picker = component;
            };
            _this._onSetFocusButtonClicked = function () {
                if (_this._picker) {
                    _this._picker.focus();
                }
            };
            _this._onExpandItem = function (item) {
                if (_this.state.controlledComponent) {
                    var currentlySelectedItems = _this.state.currentlySelectedItems;
                    var indexToRemove = currentlySelectedItems.indexOf(item);
                    var newItems = currentlySelectedItems;
                    newItems.splice.apply(newItems, [indexToRemove, 1].concat(_this._getExpandedGroupItems(item)));
                    _this.setState({ currentlySelectedItems: newItems });
                }
                else {
                    if (_this._picker.selectedItemsList.current) {
                        // tslint:disable-next-line:no-any
                        _this._picker.selectedItemsList.current.replaceItem(item, _this._getExpandedGroupItems(item));
                    }
                }
            };
            _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) {
                var controlledComponent = _this.state.controlledComponent;
                var filteredPersonas = [];
                if (filterText) {
                    filteredPersonas = _this._filterPersonasByText(filterText);
                    filteredPersonas = _this._removeDuplicates(filteredPersonas, currentPersonas);
                    filteredPersonas = limitResults ? filteredPersonas.splice(0, limitResults) : filteredPersonas;
                }
                if (controlledComponent) {
                    _this.setState({ suggestionItems: filteredPersonas });
                }
                return controlledComponent ? null : _this._convertResultsToPromise(filteredPersonas);
            };
            _this._returnMostRecentlyUsed = function (currentPersonas) {
                var controlledComponent = _this.state.controlledComponent;
                var mostRecentlyUsed = _this.state.mostRecentlyUsed;
                mostRecentlyUsed = _this._removeDuplicates(mostRecentlyUsed, _this._picker.items);
                if (controlledComponent) {
                    _this.setState({ suggestionItems: mostRecentlyUsed });
                }
                return controlledComponent ? null : _this._convertResultsToPromise(mostRecentlyUsed);
            };
            _this._shouldShowForceResolve = function () {
                return Boolean(_this._picker.floatingPicker.current &&
                    _this._validateInput(_this._picker.floatingPicker.current.inputText) &&
                    _this._picker.floatingPicker.current.suggestions.length === 0);
            };
            _this._shouldShowSuggestedContacts = function () {
                return _this._picker !== undefined && _this._picker.inputElement !== null && _this._picker.inputElement.value === '';
            };
            _this._onInputChanged = function () {
                _this.setState({ searchMoreAvailable: true });
            };
            _this._onItemAdded = function (selectedSuggestion) {
                _this.setState({ currentlySelectedItems: _this.state.currentlySelectedItems.concat(selectedSuggestion) });
            };
            _this._onItemsRemoved = function (items) {
                var newItems = _this.state.currentlySelectedItems.filter(function (value) { return items.indexOf(value) === -1; });
                _this.setState({ currentlySelectedItems: newItems });
            };
            _this._validateInput = function (input) {
                if (input.indexOf('@') !== -1) {
                    return true;
                }
                else if (input.length > 1) {
                    return false;
                }
                else {
                    return false;
                }
            };
            var peopleList = [];
            PeopleExampleData_1.people.forEach(function (persona) {
                var target = {};
                Utilities_1.assign(target, persona);
                peopleList.push(target);
            });
            _this.state = {
                peopleList: peopleList,
                mostRecentlyUsed: PeopleExampleData_1.mru,
                searchMoreAvailable: true,
                currentlySelectedItems: [],
                controlledComponent: false,
                suggestionItems: []
            };
            _this._suggestionProps = {
                headerItemsProps: [
                    {
                        renderItem: function () {
                            return (React.createElement("div", { className: styles.headerItem },
                                "Use this address:",
                                ' ',
                                _this._picker && _this._picker.inputElement && _this._picker.inputElement
                                    ? _this._picker.inputElement.value
                                    : ''));
                        },
                        shouldShow: function () {
                            return (_this._picker !== undefined &&
                                _this._picker.inputElement !== null &&
                                _this._picker.inputElement.value.indexOf('@') > -1);
                        },
                        onExecute: function () {
                            if (_this._picker.floatingPicker.current !== null) {
                                _this._picker.floatingPicker.current.forceResolveSuggestion();
                            }
                        },
                        ariaLabel: 'Use the typed address'
                    },
                    {
                        renderItem: function () {
                            return React.createElement("div", { className: styles.headerItem }, "Suggested Contacts");
                        },
                        shouldShow: _this._shouldShowSuggestedContacts
                    }
                ],
                footerItemsProps: [
                    {
                        renderItem: function () {
                            return React.createElement("div", { className: styles.footerItem }, "No results");
                        },
                        shouldShow: function () {
                            return (_this._picker !== undefined &&
                                _this._picker.floatingPicker !== undefined &&
                                _this._picker.floatingPicker.current !== null &&
                                _this._picker.floatingPicker.current.suggestions.length === 0);
                        }
                    },
                    {
                        renderItem: function () {
                            return React.createElement("div", { className: styles.footerItem }, "Search for more");
                        },
                        onExecute: function () {
                            _this.setState({ searchMoreAvailable: false });
                        },
                        shouldShow: function () {
                            return _this.state.searchMoreAvailable && !_this._shouldShowSuggestedContacts();
                        },
                        ariaLabel: 'Search more'
                    }
                ],
                shouldSelectFirstItem: function () {
                    return !_this._shouldShowSuggestedContacts();
                }
            };
            _this._floatingPickerProps = {
                suggestionsStore: new FloatingPicker_1.SuggestionsStore(),
                onResolveSuggestions: _this._onFilterChanged,
                getTextFromItem: _this._getTextFromItem,
                pickerSuggestionsProps: _this._suggestionProps,
                key: 'normal',
                onRemoveSuggestion: _this._onRemoveSuggestion,
                onValidateInput: _this._validateInput,
                onZeroQuerySuggestion: _this._returnMostRecentlyUsed,
                showForceResolve: _this._shouldShowForceResolve,
                onInputChanged: _this._onInputChanged,
                onSuggestionsHidden: function () {
                    console.log('FLOATINGPICKER: hidden');
                },
                onSuggestionsShown: function () {
                    console.log('FLOATINGPICKER: shown');
                }
            };
            _this._selectedItemsListProps = {
                onCopyItems: _this._onCopyItems,
                onExpandGroup: _this._onExpandItem,
                removeMenuItemText: 'Remove',
                copyMenuItemText: 'Copy name',
                editMenuItemText: 'Edit',
                getEditingItemText: _this._getEditingItemText,
                onRenderFloatingPicker: _this._onRenderFloatingPicker,
                floatingPickerProps: _this._floatingPickerProps
            };
            return _this;
        }
        ExtendedPeoplePickerTypesExample.prototype.render = function () {
            return (React.createElement("div", null,
                this._renderExtendedPicker(),
                React.createElement(Toggle_1.Toggle, { label: "Controlled component", defaultChecked: false, onChanged: this._toggleControlledComponent }),
                React.createElement(Button_1.PrimaryButton, { text: "Set focus", onClick: this._onSetFocusButtonClicked })));
        };
        ExtendedPeoplePickerTypesExample.prototype._renderExtendedPicker = function () {
            return (React.createElement(ExtendedPicker_1.ExtendedPeoplePicker, { selectedItems: this.state.controlledComponent ? this.state.currentlySelectedItems : undefined, suggestionItems: this.state.controlledComponent ? this.state.suggestionItems : undefined, onItemAdded: this.state.controlledComponent ? this._onItemAdded : undefined, onItemsRemoved: this.state.controlledComponent ? this._onItemsRemoved : undefined, floatingPickerProps: this._floatingPickerProps, selectedItemsListProps: this._selectedItemsListProps, onRenderFloatingPicker: this._onRenderFloatingPicker, onRenderSelectedItems: this._onRenderSelectedItems, className: 'ms-PeoplePicker', key: 'normal', inputProps: {
                    onBlur: function (ev) { return console.log('onBlur called'); },
                    onFocus: function (ev) { return console.log('onFocus called'); },
                    'aria-label': 'People Picker'
                }, componentRef: this._setComponentRef, headerComponent: this._renderHeader() }));
        };
        ExtendedPeoplePickerTypesExample.prototype._renderHeader = function () {
            return React.createElement("div", null, "TO:");
        };
        ExtendedPeoplePickerTypesExample.prototype._onRenderFloatingPicker = function (props) {
            return React.createElement(FloatingPicker_1.FloatingPeoplePicker, tslib_1.__assign({}, props));
        };
        ExtendedPeoplePickerTypesExample.prototype._onRenderSelectedItems = function (props) {
            return React.createElement(SelectedItemsList_1.SelectedPeopleList, tslib_1.__assign({}, props));
        };
        ExtendedPeoplePickerTypesExample.prototype._getEditingItemText = function (item) {
            return item.text;
        };
        ExtendedPeoplePickerTypesExample.prototype._onCopyItems = function (items) {
            var copyText = '';
            items.forEach(function (item, index) {
                copyText += item.text;
                if (index < items.length - 1) {
                    copyText += ', ';
                }
            });
            return copyText;
        };
        ExtendedPeoplePickerTypesExample.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;
        };
        ExtendedPeoplePickerTypesExample.prototype._filterPersonasByText = function (filterText) {
            var _this = this;
            return this.state.peopleList.filter(function (item) {
                return _this._doesTextStartWith(item.text, filterText);
            });
        };
        ExtendedPeoplePickerTypesExample.prototype._doesTextStartWith = function (text, filterText) {
            return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
        };
        ExtendedPeoplePickerTypesExample.prototype._removeDuplicates = function (personas, possibleDupes) {
            var _this = this;
            return personas.filter(function (persona) { return !_this._listContainsPersona(persona, possibleDupes); });
        };
        ExtendedPeoplePickerTypesExample.prototype._getTextFromItem = function (persona) {
            return persona.text;
        };
        ExtendedPeoplePickerTypesExample.prototype._convertResultsToPromise = function (results) {
            // tslint:disable-next-line:no-any
            return new Promise(function (resolve, reject) { return setTimeout(function () { return resolve(results); }, 150); });
        };
        ExtendedPeoplePickerTypesExample.prototype._getExpandedGroupItems = function (item) {
            switch (item.text) {
                case 'Group One':
                    return PeopleExampleData_1.groupOne;
                case 'Group Two':
                    return PeopleExampleData_1.groupTwo;
                default:
                    return [];
            }
        };
        return ExtendedPeoplePickerTypesExample;
    }(React.Component));
    exports.ExtendedPeoplePickerTypesExample = ExtendedPeoplePickerTypesExample;
});
//# sourceMappingURL=ExtendedPeoplePicker.Basic.Example.js.map