import * as tslib_1 from "tslib";
import * as React from 'react';
import { ExtendedPeoplePicker } from 'office-ui-fabric-react/lib/ExtendedPicker';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { SuggestionsStore, FloatingPeoplePicker } from 'office-ui-fabric-react/lib/FloatingPicker';
import { SelectedPeopleList } from 'office-ui-fabric-react/lib/SelectedItemsList';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
import { FocusZoneTabbableElements } from 'office-ui-fabric-react/lib/FocusZone';
// Helper imports to generate data for this particular examples. Not exported by any package.
import { people, mru, groupOne, groupTwo } from './PeopleExampleData';
import * as stylesImport from './ExtendedPeoplePicker.Basic.Example.scss';
// tslint:disable-next-line:no-any
var styles = stylesImport;
var ExtendedPeoplePickerBasicExample = /** @class */ (function (_super) {
    tslib_1.__extends(ExtendedPeoplePickerBasicExample, _super);
    function ExtendedPeoplePickerBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _this._toggleControlledComponent = function (ev, 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) {
            var controlledComponent = _this.state.controlledComponent;
            var filteredPersonas = [];
            if (filterText) {
                filteredPersonas = _this._filterPersonasByText(filterText);
                filteredPersonas = _this._removeDuplicates(filteredPersonas, currentPersonas);
            }
            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;
            }
        };
        _this.state = {
            peopleList: people,
            mostRecentlyUsed: 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 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: FloatingPeoplePicker,
            floatingPickerProps: _this._floatingPickerProps
        };
        _this._focusZoneProps = {
            shouldInputLoseFocusOnArrowKey: _this._shouldInputLoseFocusOnArrowKey,
            handleTabKey: FocusZoneTabbableElements.all
        };
        return _this;
    }
    ExtendedPeoplePickerBasicExample.prototype.render = function () {
        return (React.createElement("div", null,
            this._renderExtendedPicker(),
            React.createElement(Toggle, { label: "Controlled component", defaultChecked: false, onChange: this._toggleControlledComponent }),
            React.createElement(PrimaryButton, { text: "Set focus", onClick: this._onSetFocusButtonClicked })));
    };
    ExtendedPeoplePickerBasicExample.prototype._renderExtendedPicker = function () {
        return (React.createElement(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: FloatingPeoplePicker, onRenderSelectedItems: SelectedPeopleList, 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(), focusZoneProps: this._focusZoneProps }));
    };
    ExtendedPeoplePickerBasicExample.prototype._renderHeader = function () {
        return React.createElement("div", { "data-is-focusable": true }, "TO:");
    };
    ExtendedPeoplePickerBasicExample.prototype._getEditingItemText = function (item) {
        return item.text;
    };
    ExtendedPeoplePickerBasicExample.prototype._onCopyItems = function (items) {
        var copyText = '';
        items.forEach(function (item, index) {
            copyText += item.text;
            if (index < items.length - 1) {
                copyText += ', ';
            }
        });
        return copyText;
    };
    ExtendedPeoplePickerBasicExample.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;
    };
    ExtendedPeoplePickerBasicExample.prototype._filterPersonasByText = function (filterText) {
        var _this = this;
        return this.state.peopleList.filter(function (item) { return _this._doesTextStartWith(item.text, filterText); });
    };
    ExtendedPeoplePickerBasicExample.prototype._doesTextStartWith = function (text, filterText) {
        return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
    };
    ExtendedPeoplePickerBasicExample.prototype._removeDuplicates = function (personas, possibleDupes) {
        var _this = this;
        return personas.filter(function (persona) { return !_this._listContainsPersona(persona, possibleDupes); });
    };
    ExtendedPeoplePickerBasicExample.prototype._getTextFromItem = function (persona) {
        return persona.text;
    };
    ExtendedPeoplePickerBasicExample.prototype._convertResultsToPromise = function (results) {
        // tslint:disable-next-line:no-any
        return new Promise(function (resolve, reject) { return setTimeout(function () { return resolve(results); }, 150); });
    };
    ExtendedPeoplePickerBasicExample.prototype._getExpandedGroupItems = function (item) {
        switch (item.text) {
            case 'Group One':
                return groupOne;
            case 'Group Two':
                return groupTwo;
            default:
                return [];
        }
    };
    ExtendedPeoplePickerBasicExample.prototype._shouldInputLoseFocusOnArrowKey = function () {
        return true;
    };
    return ExtendedPeoplePickerBasicExample;
}(React.Component));
export { ExtendedPeoplePickerBasicExample };
//# sourceMappingURL=ExtendedPeoplePicker.Basic.Example.js.map