import * as React from 'react';
import { Announced } from 'office-ui-fabric-react/lib/Announced';
import { useConst } from '@uifabric/react-hooks';
import { DetailsList, DetailsListLayoutMode } from 'office-ui-fabric-react/lib/DetailsList';
import { Selection } from 'office-ui-fabric-react/lib/Selection';
import { Text } from 'office-ui-fabric-react/lib/Text';
import { Stack } from 'office-ui-fabric-react/lib/Stack';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { createArray } from 'office-ui-fabric-react/lib/Utilities';
var columns = [
    {
        name: 'Name',
        fieldName: 'name',
        key: 'name',
        minWidth: 100,
        maxWidth: 200,
    },
];
var stackTokens = { childrenGap: 10 };
export var AnnouncedBulkOperationsExample = function () {
    var selection = useConst(function () { return new Selection(); });
    var _a = React.useState(function () {
        return createArray(20, function (i) { return ({
            key: 'item-' + i,
            name: 'Item ' + i,
        }); });
    }), items = _a[0], setItems = _a[1];
    var _b = React.useState(0), deletedCount = _b[0], setDeletedCount = _b[1];
    var onDelete = React.useCallback(function () {
        setDeletedCount(selection.count);
        setItems(function (prevItems) {
            var selectedIndices = selection.getSelectedIndices();
            return prevItems.filter(function (item, i) { return selectedIndices.indexOf(i) === -1; });
        });
    }, [selection]);
    return (React.createElement(Stack, { tokens: stackTokens },
        React.createElement(Text, null, "Turn on Narrator, select items, and use the button to delete them."),
        React.createElement(Text, null, "Note: This example is to showcase the concept of deleting, copying, uploading, or moving many items and not fully illustrative of the real-world scenario."),
        React.createElement(Stack.Item, { align: "start" },
            React.createElement(PrimaryButton, { onClick: onDelete }, "Delete selected items")),
        deletedCount > 0 && (React.createElement(Announced, { message: deletedCount + " item" + (deletedCount === 1 ? '' : 's') + " deleted", "aria-live": 'assertive' })),
        React.createElement(DetailsList, { setKey: "items", items: items, columns: columns, selection: selection, selectionPreservedOnEmptyClick: true, layoutMode: DetailsListLayoutMode.fixedColumns, ariaLabelForSelectionColumn: "Toggle selection", ariaLabelForSelectAllCheckbox: "Toggle selection for all items", checkButtonAriaLabel: "select row" })));
};
//# sourceMappingURL=Announced.BulkOperations.Example.js.map