import { __extends } from "tslib";
import * as React from 'react';
import { TagPicker } from 'office-ui-fabric-react/lib/Pickers';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
var rootClass = mergeStyles({
    maxWidth: 500,
});
var checkboxStyles = { root: { margin: '10px 0' } };
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) {
    __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, { styles: checkboxStyles, 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(TagPicker, { removeButtonAriaLabel: "Remove", 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(TagPicker, { removeButtonAriaLabel: "Remove", 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));
export { TagPickerBasicExample };
//# sourceMappingURL=tags.stories.js.map