import * as React from 'react';
import { Announced } from '@fluentui/react/lib/Announced';
import { TagPicker } from '@fluentui/react/lib/Pickers';
import { Text } from '@fluentui/react/lib/Text';
import { Stack } from '@fluentui/react/lib/Stack';
var inputProps = {
    'aria-label': 'Tag Picker',
};
var pickerSuggestionsProps = {
    suggestionsHeaderText: 'Suggested tags',
    noResultsFoundText: 'No color tags found',
};
var _testTags = [
    'black',
    'blue',
    'brown',
    'cyan',
    'green',
    'magenta',
    'mauve',
    'orange',
    'pink',
    'purple',
    'red',
    'rose',
    'violet',
    'white',
    'yellow',
].map(function (item) { return ({ key: item, name: item }); });
var stackTokens = { childrenGap: 10 };
var getTextFromItem = function (item) {
    return item.name;
};
var listContainsDocument = function (tag, tagList) {
    if (!tagList || !tagList.length || tagList.length === 0) {
        return false;
    }
    return tagList.filter(function (compareTag) { return compareTag.key === tag.key; }).length > 0;
};
export var AnnouncedSearchResultsExample = function () {
    var _a = React.useState(false), hasFilterText = _a[0], setHasFilterText = _a[1];
    var _b = React.useState(0), suggestionCount = _b[0], setSuggestionCount = _b[1];
    var onFilterChanged = React.useCallback(function (filterText, tagList) {
        setHasFilterText(!!filterText);
        var filteredTags = filterText
            ? _testTags
                .filter(function (tag) { return tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0; })
                .filter(function (tag) { return !listContainsDocument(tag, tagList); })
            : [];
        setSuggestionCount(filteredTags.length);
        return filteredTags;
    }, []);
    return (React.createElement(Stack, { tokens: stackTokens },
        React.createElement(Text, null, "Turn on Narrator and type a letter or two into the TagPicker. This picker will filter added items from the search suggestions."),
        hasFilterText && React.createElement(Announced, { message: suggestionCount + " color tag" + (suggestionCount === 1 ? '' : 's') + " found" }),
        React.createElement(TagPicker, { removeButtonAriaLabel: "Remove", selectionAriaLabel: "Selected colors", onResolveSuggestions: onFilterChanged, getTextFromItem: getTextFromItem, pickerSuggestionsProps: pickerSuggestionsProps, inputProps: inputProps })));
};
//# sourceMappingURL=Announced.SearchResults.Example.js.map