define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Pickers", "office-ui-fabric-react/lib/Checkbox", "office-ui-fabric-react/lib/Styling"], function (require, exports, tslib_1, React, Pickers_1, Checkbox_1, Styling_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var rootClass = Styling_1.mergeStyles({
        maxWidth: 500
    });
    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 TagPickerBasicExample = /** @class */ (function (_super) {
        tslib_1.__extends(TagPickerBasicExample, _super);
        function TagPickerBasicExample(props) {
            var _this = _super.call(this, props) || this;
            // All pickers extend from BasePicker specifying the item type.
            _this._picker = React.createRef();
            _this._onDisabledButtonClick = function () {
                _this.setState({
                    isPickerDisabled: !_this.state.isPickerDisabled
                });
            };
            _this._onFilterChanged = function (filterText, tagList) {
                return filterText
                    ? _testTags
                        .filter(function (tag) { return tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0; })
                        .filter(function (tag) { return !_this._listContainsDocument(tag, tagList); })
                    : [];
            };
            _this._onFilterChangedNoFilter = function (filterText, tagList) {
                return filterText ? _testTags.filter(function (tag) { return tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0; }) : [];
            };
            _this._onItemSelected = function (item) {
                if (_this._picker.current && _this._listContainsDocument(item, _this._picker.current.items)) {
                    return null;
                }
                return item;
            };
            _this.state = {
                isPickerDisabled: false
            };
            return _this;
        }
        TagPickerBasicExample.prototype.render = function () {
            return (React.createElement("div", { className: rootClass },
                React.createElement(Checkbox_1.Checkbox, { styles: { root: { margin: '10px 0' } }, label: "Disable Tag Picker", checked: this.state.isPickerDisabled, onChange: this._onDisabledButtonClick }),
                "Filter items in suggestions: This picker will filter added items from the search suggestions.",
                React.createElement(Pickers_1.TagPicker, { onResolveSuggestions: this._onFilterChanged, getTextFromItem: this._getTextFromItem, pickerSuggestionsProps: {
                        suggestionsHeaderText: 'Suggested Tags',
                        noResultsFoundText: 'No Color Tags Found'
                    }, itemLimit: 2, disabled: this.state.isPickerDisabled, inputProps: {
                        onBlur: function (ev) { return console.log('onBlur called'); },
                        onFocus: function (ev) { return console.log('onFocus called'); },
                        'aria-label': 'Tag Picker'
                    } }),
                React.createElement("br", null),
                "Filter items on selected: This picker will show already-added suggestions but will not add duplicate tags.",
                React.createElement(Pickers_1.TagPicker, { componentRef: this._picker, onResolveSuggestions: this._onFilterChangedNoFilter, onItemSelected: this._onItemSelected, getTextFromItem: this._getTextFromItem, pickerSuggestionsProps: {
                        suggestionsHeaderText: 'Suggested Tags',
                        noResultsFoundText: 'No Color Tags Found'
                    }, itemLimit: 2, disabled: this.state.isPickerDisabled, inputProps: {
                        onBlur: function (ev) { return console.log('onBlur called'); },
                        onFocus: function (ev) { return console.log('onFocus called'); },
                        'aria-label': 'Tag Picker'
                    } })));
        };
        TagPickerBasicExample.prototype._getTextFromItem = function (item) {
            return item.name;
        };
        TagPickerBasicExample.prototype._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;
        };
        return TagPickerBasicExample;
    }(React.Component));
    exports.TagPickerBasicExample = TagPickerBasicExample;
});
//# sourceMappingURL=TagPicker.Basic.Example.js.map