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';
export 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 _c = React.useState(), draggedItem = _c[0], setDraggedItem = _c[1];
    var _d = React.useState(-1), draggedIndex = _d[0], setDraggedIndex = _d[1];
    var dragDropHelper = new DragDropHelper({
        selection: selection,
        minimumPixelsForDrag: 5,
    });
    var theme = getTheme();
    var dragEnterClass = mergeStyles({
        backgroundColor: theme.palette.neutralLight,
    });
    var _insertBeforeItem = function (item) {
        var draggedItems = selection.isIndexSelected(draggedIndex) ? selection.getSelection() : [draggedItem];
        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) {
        if (draggedItem) {
            _insertBeforeItem(item);
        }
    };
    var _onDragStart = function (item, itemIndex, tempSelectedItems, event) {
        setDraggedItem(item);
        setDraggedIndex(itemIndex);
    };
    var _onDragEnd = function (item, event) {
        setDraggedItem(undefined);
        setDraggedIndex(-1);
    };
    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 })));
};
//# sourceMappingURL=SelectedPeopleList.Basic.DragDrop.Example.js.map