"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectedPeopleListDragDropBetweenWellsExample = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var Button_1 = require("@fluentui/react/lib-commonjs/Button");
var example_data_1 = require("@fluentui/example-data");
var SelectedItemsList_1 = require("@fluentui/react-experiments/lib-commonjs/SelectedItemsList");
var DragDrop_1 = require("@fluentui/react/lib-commonjs/DragDrop");
var Styling_1 = require("@fluentui/react/lib-commonjs/Styling");
var merge_styles_1 = require("@fluentui/merge-styles");
var react_1 = require("@fluentui/react");
var SelectedPeopleListBasicDragDropExample = function () {
    var _a = React.useState(0), index = _a[0], setIndex = _a[1];
    var _b = React.useState([example_data_1.people[40]]), currentSelectedItems = _b[0], setCurrentSelectedItems = _b[1];
    var selection = new react_1.Selection();
    var dragDropHelper = new DragDrop_1.DragDropHelper({
        selection: selection,
        minimumPixelsForDrag: 5,
    });
    var theme = Styling_1.getTheme();
    var dragEnterClass = merge_styles_1.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, tslib_1.__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 (event === null || event === void 0 ? void 0 : event.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) {
                        example_data_1.people.forEach(function (suggestionItem) {
                            if (suggestionItem.text === dropText) {
                                _insertBeforeItem(item, suggestionItem);
                            }
                        });
                    });
                }
            }
        }
    };
    var _onDragStart = function (item, itemIndex, tempSelectedItems, event) {
        var _a;
        if (event) {
            var dataList = (_a = event === null || event === void 0 ? void 0 : event.dataTransfer) === null || _a === void 0 ? void 0 : _a.items;
            var personaText = item.text;
            dataList === null || dataList === void 0 ? void 0 : dataList.add(personaText || '', 'persona');
        }
    };
    var _onDragEnd = function (item, event) {
        var _a;
        if (event) {
            var dataList = (_a = event === null || event === void 0 ? void 0 : event.dataTransfer) === null || _a === void 0 ? void 0 : _a.items;
            // Clear any remaining drag data
            dataList === null || dataList === void 0 ? void 0 : dataList.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(tslib_1.__spreadArrays(currentSelectedItems, [example_data_1.people[index]]));
        setIndex(index + 1);
    }, [currentSelectedItems, index]);
    var _onItemsRemoved = React.useCallback(function (items) {
        var currentSelectedItemsCopy = tslib_1.__spreadArrays(currentSelectedItems);
        items.forEach(function (item) {
            var indexToRemove = currentSelectedItemsCopy.indexOf(item);
            currentSelectedItemsCopy.splice(indexToRemove, 1);
            setCurrentSelectedItems(tslib_1.__spreadArrays(currentSelectedItemsCopy));
        });
    }, [currentSelectedItems]);
    return (React.createElement("div", { className: 'ms-BasePicker-text' },
        React.createElement(Button_1.PrimaryButton, { text: "Add another item", onClick: _onAddItemButtonClicked }),
        React.createElement(SelectedItemsList_1.SelectedPeopleList, { key: 'normal', removeButtonAriaLabel: 'Remove', selectedItems: currentSelectedItems, onItemsRemoved: _onItemsRemoved, dragDropHelper: dragDropHelper, dragDropEvents: dragDropEvents })));
};
var SelectedPeopleListDragDropBetweenWellsExample = function () {
    return (React.createElement(React.Fragment, null,
        "To: ",
        React.createElement(SelectedPeopleListBasicDragDropExample, null),
        "CC: ",
        React.createElement(SelectedPeopleListBasicDragDropExample, null)));
};
exports.SelectedPeopleListDragDropBetweenWellsExample = SelectedPeopleListDragDropBetweenWellsExample;
//# sourceMappingURL=SelectedPeopleList.DragDropBetweenWells.Example.js.map