import * as React from 'react';
import { Checkbox } from '@fluentui/react/lib/Checkbox';
import { CompactPeoplePicker, ValidationState } from '@fluentui/react/lib/Pickers';
import { people, mru } from '@fluentui/example-data';
var suggestionProps = {
    suggestionsHeaderText: 'Suggested People',
    mostRecentlyUsedHeaderText: 'Suggested Contacts',
    noResultsFoundText: 'No results found',
    loadingText: 'Loading',
    showRemoveButtons: true,
    suggestionsAvailableAlertText: 'People Picker Suggestions available',
    suggestionsContainerAriaLabel: 'Suggested contacts',
};
var checkboxStyles = {
    root: {
        marginTop: 10,
    },
};
export var PeoplePickerPreselectedItemsExample = function () {
    var _a = React.useState(false), delayResults = _a[0], setDelayResults = _a[1];
    var _b = React.useState(false), isPickerDisabled = _b[0], setIsPickerDisabled = _b[1];
    var _c = React.useState(mru), mostRecentlyUsed = _c[0], setMostRecentlyUsed = _c[1];
    var _d = React.useState(people), peopleList = _d[0], setPeopleList = _d[1];
    var picker = React.useRef(null);
    var onFilterChanged = function (filterText, currentPersonas, limitResults) {
        if (filterText) {
            var filteredPersonas = filterPersonasByText(filterText);
            filteredPersonas = removeDuplicates(filteredPersonas, currentPersonas);
            filteredPersonas = limitResults ? filteredPersonas.slice(0, limitResults) : filteredPersonas;
            return filterPromise(filteredPersonas);
        }
        else {
            return [];
        }
    };
    var filterPersonasByText = function (filterText) {
        return peopleList.filter(function (item) { return doesTextStartWith(item.text, filterText); });
    };
    var filterPromise = function (personasToReturn) {
        if (delayResults) {
            return convertResultsToPromise(personasToReturn);
        }
        else {
            return personasToReturn;
        }
    };
    var returnMostRecentlyUsed = function (currentPersonas) {
        return filterPromise(removeDuplicates(mostRecentlyUsed, currentPersonas));
    };
    var onRemoveSuggestion = function (item) {
        var indexPeopleList = peopleList.indexOf(item);
        var indexMostRecentlyUsed = mostRecentlyUsed.indexOf(item);
        if (indexPeopleList >= 0) {
            var newPeople = peopleList
                .slice(0, indexPeopleList)
                .concat(peopleList.slice(indexPeopleList + 1));
            setPeopleList(newPeople);
        }
        if (indexMostRecentlyUsed >= 0) {
            var newSuggestedPeople = mostRecentlyUsed
                .slice(0, indexMostRecentlyUsed)
                .concat(mostRecentlyUsed.slice(indexMostRecentlyUsed + 1));
            setMostRecentlyUsed(newSuggestedPeople);
        }
    };
    var onDisabledButtonClick = function () {
        setIsPickerDisabled(!isPickerDisabled);
    };
    var onToggleDelayResultsChange = function () {
        setDelayResults(!delayResults);
    };
    return (React.createElement("div", null,
        React.createElement(CompactPeoplePicker
        // eslint-disable-next-line react/jsx-no-bind
        , { 
            // eslint-disable-next-line react/jsx-no-bind
            onResolveSuggestions: onFilterChanged, 
            // eslint-disable-next-line react/jsx-no-bind
            onEmptyInputFocus: returnMostRecentlyUsed, getTextFromItem: getTextFromItem, className: 'ms-PeoplePicker', defaultSelectedItems: peopleList.slice(0, 3), key: 'list', selectionAriaLabel: 'Selected contacts', removeButtonAriaLabel: 'Remove', pickerSuggestionsProps: suggestionProps, 
            // eslint-disable-next-line react/jsx-no-bind
            onRemoveSuggestion: onRemoveSuggestion, onValidateInput: validateInput, inputProps: {
                onBlur: function (ev) { return console.log('onBlur called'); },
                onFocus: function (ev) { return console.log('onFocus called'); },
                'aria-label': 'People Picker',
            }, componentRef: picker, resolveDelay: 300, disabled: isPickerDisabled }),
        React.createElement(Checkbox, { label: "Disable People Picker", checked: isPickerDisabled, 
            // eslint-disable-next-line react/jsx-no-bind
            onChange: onDisabledButtonClick, styles: checkboxStyles }),
        React.createElement(Checkbox, { label: "Delay Suggestion Results", defaultChecked: delayResults, 
            // eslint-disable-next-line react/jsx-no-bind
            onChange: onToggleDelayResultsChange, styles: checkboxStyles })));
};
function doesTextStartWith(text, filterText) {
    return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
}
function removeDuplicates(personas, possibleDupes) {
    return personas.filter(function (persona) { return !listContainsPersona(persona, possibleDupes); });
}
function listContainsPersona(persona, personas) {
    if (!personas || !personas.length || personas.length === 0) {
        return false;
    }
    return personas.filter(function (item) { return item.text === persona.text; }).length > 0;
}
function convertResultsToPromise(results) {
    return new Promise(function (resolve, reject) { return setTimeout(function () { return resolve(results); }, 2000); });
}
function getTextFromItem(persona) {
    return persona.text;
}
function validateInput(input) {
    if (input.indexOf('@') !== -1) {
        return ValidationState.valid;
    }
    else if (input.length > 1) {
        return ValidationState.warning;
    }
    else {
        return ValidationState.invalid;
    }
}
//# sourceMappingURL=PeoplePicker.PreselectedItems.Example.js.map