import { __spreadArrays } from "tslib";
import * as React from 'react';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { people } from '@uifabric/example-data';
import { SelectedPeopleList } from '@uifabric/experiments/lib/SelectedItemsList';
import { DragDropHelper } from 'office-ui-fabric-react/lib/utilities/dragdrop/DragDropHelper';
import { getTheme } from 'office-ui-fabric-react/lib/Styling';
import { mergeStyles } from '@uifabric/merge-styles';
import { Selection } from 'office-ui-fabric-react';
var SelectedPeopleListBasicDragDropExample = function () {
    var _a = React.useState(0), index = _a[0], setIndex = _a[1];
    var _b = React.useState([people[40]]), currentSelectedItems = _b[0], setCurrentSelectedItems = _b[1];
    var selection = new Selection();
    var dragDropHelper = new DragDropHelper({
        selection: selection,
        minimumPixelsForDrag: 5,
    });
    var theme = getTheme();
    var dragEnterClass = mergeStyles({
        backgroundColor: theme.palette.neutralLight,
    });
    var _insertBeforeItem = function (item, itemToInsert) {
        var draggedItems = [itemToInsert];
        var insertIndex = currentSelectedItems.indexOf(item);
        var items = currentSelectedItems.filter(function (current) { return draggedItems.indexOf(current) === -1; });
        items.splice.apply(items, __spreadArrays([insertIndex, 0], draggedItems));
        setCurrentSelectedItems(items);
    };
    var _onDragEnter = function (item, event) {
        // return string is the css classes that will be added to the entering element.
        return dragEnterClass;
    };
    var _onDrop = function (item, event) {
        var _a;
        if ((_a = event) === null || _a === void 0 ? void 0 : _a.dataTransfer) {
            event.preventDefault();
            var data = event.dataTransfer.items;
            for (var i = 0; i < data.length; i++) {
                if (data[i].kind === 'string' && data[i].type === 'persona') {
                    data[i].getAsString(function (dropText) {
                        people.forEach(function (suggestionItem) {
                            if (suggestionItem.text === dropText) {
                                _insertBeforeItem(item, suggestionItem);
                            }
                        });
                    });
                }
            }
        }
    };
    var _onDragStart = function (item, itemIndex, tempSelectedItems, event) {
        var _a, _b, _c;
        if (event) {
            var dataList = (_b = (_a = event) === null || _a === void 0 ? void 0 : _a.dataTransfer) === null || _b === void 0 ? void 0 : _b.items;
            var personaText = item.text;
            (_c = dataList) === null || _c === void 0 ? void 0 : _c.add(personaText || '', 'persona');
        }
    };
    var _onDragEnd = function (item, event) {
        var _a, _b, _c;
        if (event) {
            var dataList = (_b = (_a = event) === null || _a === void 0 ? void 0 : _a.dataTransfer) === null || _b === void 0 ? void 0 : _b.items;
            // Clear any remaining drag data
            (_c = dataList) === null || _c === void 0 ? void 0 : _c.clear();
        }
    };
    var dragDropEvents = {
        canDrop: function () { return true; },
        canDrag: function () { return true; },
        onDragEnter: _onDragEnter,
        onDragLeave: function () { return undefined; },
        onDrop: _onDrop,
        onDragStart: _onDragStart,
        onDragEnd: _onDragEnd,
    };
    var _onAddItemButtonClicked = React.useCallback(function () {
        setCurrentSelectedItems(__spreadArrays(currentSelectedItems, [people[index]]));
        setIndex(index + 1);
    }, [currentSelectedItems, index]);
    var _onItemsRemoved = React.useCallback(function (items) {
        var currentSelectedItemsCopy = __spreadArrays(currentSelectedItems);
        items.forEach(function (item) {
            var indexToRemove = currentSelectedItemsCopy.indexOf(item);
            currentSelectedItemsCopy.splice(indexToRemove, 1);
            setCurrentSelectedItems(__spreadArrays(currentSelectedItemsCopy));
        });
    }, [currentSelectedItems]);
    return (React.createElement("div", { className: 'ms-BasePicker-text' },
        React.createElement(PrimaryButton, { text: "Add another item", onClick: _onAddItemButtonClicked }),
        React.createElement(SelectedPeopleList, { key: 'normal', removeButtonAriaLabel: 'Remove', selectedItems: currentSelectedItems, onItemsRemoved: _onItemsRemoved, dragDropHelper: dragDropHelper, dragDropEvents: dragDropEvents })));
};
export var SelectedPeopleListDragDropBetweenWellsExample = function () {
    return (React.createElement(React.Fragment, null,
        "To: ",
        React.createElement(SelectedPeopleListBasicDragDropExample, null),
        "CC: ",
        React.createElement(SelectedPeopleListBasicDragDropExample, null)));
};
//# sourceMappingURL=SelectedPeopleList.DragDropBetweenWells.Example.js.map