define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Pickers", "office-ui-fabric-react/lib/Toggle", "office-ui-fabric-react/lib/Styling", "@uifabric/react-hooks"], function (require, exports, tslib_1, React, Pickers_1, Toggle_1, Styling_1, react_hooks_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var rootClass = Styling_1.mergeStyles({
        maxWidth: 500,
    });
    var toggleStyles = { root: { margin: '10px 0' } };
    var inputProps = {
        onBlur: function (ev) { return console.log('onBlur called'); },
        onFocus: function (ev) { return console.log('onFocus called'); },
    };
    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 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 filterSelectedTags = function (filterText, tagList) {
        return filterText ? testTags.filter(function (tag) { return tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0; }) : [];
    };
    var getTextFromItem = function (item) { return item.name; };
    exports.TagPickerBasicExample = function () {
        // All pickers extend from BasePicker specifying the item type.
        var picker = React.useRef(null);
        var _a = react_hooks_1.useBoolean(false), tagPicker = _a[0], toggleIsTagPickerVisible = _a[1].toggle;
        var onItemSelected = React.useCallback(function (item) {
            if (picker.current && listContainsTagList(item, picker.current.items)) {
                return null;
            }
            return item;
        }, []);
        return (React.createElement("div", { className: rootClass },
            React.createElement(Toggle_1.Toggle, { styles: toggleStyles, label: "Disable tag picker", checked: tagPicker, onChange: toggleIsTagPickerVisible }),
            React.createElement("label", { htmlFor: "picker1" }, "Filter items in suggestions: This picker will filter added items from the search suggestions."),
            React.createElement(Pickers_1.TagPicker, { removeButtonAriaLabel: "Remove", onResolveSuggestions: filterSuggestedTags, getTextFromItem: getTextFromItem, pickerSuggestionsProps: pickerSuggestionsProps, itemLimit: 2, disabled: tagPicker, inputProps: tslib_1.__assign(tslib_1.__assign({}, inputProps), { id: 'picker1' }) }),
            React.createElement("br", null),
            React.createElement("label", { htmlFor: "picker2" }, "Filter items on selected: This picker will show already-added suggestions but will not add duplicate tags."),
            React.createElement(Pickers_1.TagPicker, { removeButtonAriaLabel: "Remove", componentRef: picker, onResolveSuggestions: filterSelectedTags, onItemSelected: onItemSelected, getTextFromItem: getTextFromItem, pickerSuggestionsProps: pickerSuggestionsProps, itemLimit: 2, disabled: tagPicker, inputProps: tslib_1.__assign(tslib_1.__assign({}, inputProps), { id: 'picker2' }) })));
    };
});
//# sourceMappingURL=TagPicker.Basic.Example.js.map