import * as React from 'react';
import { TagPicker } from '@fluentui/react/lib/Pickers';
import { mergeStyles } from '@fluentui/react/lib/Styling';
import { useId } from '@fluentui/react-hooks';
var rootClass = mergeStyles({
    maxWidth: 500,
});
var pickerSuggestionsProps = {
    suggestionsHeaderText: 'Suggested colors',
    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[0].toUpperCase() + item.slice(1) }); });
var listContainsTagList = function (tag, tagList) {
    if (!tagList || !tagList.length || tagList.length === 0) {
        return false;
    }
    return tagList.some(function (compareTag) { return compareTag.key === tag.key; });
};
var filterSuggestedTags = function (filterText, tagList) {
    return filterText
        ? testTags.filter(function (tag) { return tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0 && !listContainsTagList(tag, tagList); })
        : [];
};
var getTextFromItem = function (item) { return item.name; };
export var TagPickerInlineExample = function () {
    var pickerId = useId('inline-picker');
    return (React.createElement("div", { className: rootClass },
        React.createElement("label", { htmlFor: pickerId }, "Choose a color"),
        React.createElement(TagPicker, { removeButtonAriaLabel: "Remove", selectionAriaLabel: "Selected colors", onResolveSuggestions: filterSuggestedTags, getTextFromItem: getTextFromItem, pickerSuggestionsProps: pickerSuggestionsProps, itemLimit: 4, 
            // this option tells the picker's callout to render inline instead of in a new layer
            pickerCalloutProps: { doNotLayer: true }, inputProps: {
                id: pickerId,
            } })));
};
//# sourceMappingURL=TagPicker.Inline.Example.js.map