import { __extends, __spreadArrays } from "tslib";
import * as React from 'react';
import { PrimaryButton } from '@fluentui/react/lib/Button';
import { people } from '@fluentui/example-data';
import { SelectedPeopleList, SelectedPersona, ItemWithContextMenu, TriggerOnContextMenu, } from '@fluentui/react-experiments/lib/SelectedItemsList';
var SelectedPeopleListWithContextMenuExample = /** @class */ (function (_super) {
    __extends(SelectedPeopleListWithContextMenuExample, _super);
    function SelectedPeopleListWithContextMenuExample(props) {
        var _this = _super.call(this, props) || this;
        /**
         * Build a custom selected item capable of being edited with a dropdown and
         * capable of editing
         */
        _this.SelectedItem = ItemWithContextMenu({
            menuItems: function (item) { return [
                {
                    key: 'remove',
                    text: 'Remove',
                    onClick: function () {
                        _this._onItemsRemoved([item]);
                    },
                },
                {
                    key: 'copy',
                    text: 'Copy',
                    onClick: function () {
                        _this._copyToClipboard(_this._getCopyItemsText([item]));
                    },
                },
            ]; },
            itemComponent: TriggerOnContextMenu(SelectedPersona),
        });
        _this._onAddItemButtonClicked = function () {
            var randomPerson = people[Math.floor(Math.random() * (people.length - 1))];
            _this.setState({ currentSelectedItems: __spreadArrays(_this.state.currentSelectedItems, [randomPerson]) });
        };
        _this._onItemsRemoved = function (items) {
            var currentSelectedItemsCopy = __spreadArrays(_this.state.currentSelectedItems);
            items.forEach(function (item) {
                var indexToRemove = currentSelectedItemsCopy.indexOf(item);
                currentSelectedItemsCopy.splice(indexToRemove, 1);
                _this.setState({ currentSelectedItems: __spreadArrays(currentSelectedItemsCopy) });
            });
        };
        _this._copyToClipboard = function (copyString) {
            navigator.clipboard.writeText(copyString).then(function () {
                /* clipboard successfully set */
            }, function () {
                /* clipboard write failed */
                throw new Error();
            });
        };
        _this.state = {
            currentSelectedItems: [people[40]],
        };
        return _this;
    }
    SelectedPeopleListWithContextMenuExample.prototype.render = function () {
        return (React.createElement("div", { className: 'ms-BasePicker-text' },
            "Right click any persona to open the context menu",
            React.createElement("br", null),
            React.createElement(PrimaryButton, { text: "Add another item", onClick: this._onAddItemButtonClicked }),
            this._renderExtendedPicker()));
    };
    SelectedPeopleListWithContextMenuExample.prototype._renderExtendedPicker = function () {
        return (React.createElement("div", null,
            React.createElement(SelectedPeopleList, { key: 'normal', removeButtonAriaLabel: 'Remove', selectedItems: __spreadArrays(this.state.currentSelectedItems), onRenderItem: this.SelectedItem, onItemsRemoved: this._onItemsRemoved })));
    };
    SelectedPeopleListWithContextMenuExample.prototype._getCopyItemsText = function (items) {
        var copyText = '';
        items.forEach(function (item, index) {
            copyText += item.text;
            if (index < items.length - 1) {
                copyText += ', ';
            }
        });
        return copyText;
    };
    return SelectedPeopleListWithContextMenuExample;
}(React.Component));
export { SelectedPeopleListWithContextMenuExample };
//# sourceMappingURL=SelectedPeopleList.WithContextMenu.Example.js.map