import { __assign, __spreadArrays } from "tslib";
import * as React from 'react';
import { Announced } from 'office-ui-fabric-react/lib/Announced';
import { DetailsList, DetailsListLayoutMode, Selection, } from 'office-ui-fabric-react/lib/DetailsList';
import { IconButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { Dialog, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { createArray } from 'office-ui-fabric-react/lib/Utilities';
import { useConst } from '@uifabric/react-hooks';
var iconButtonStyles = { root: { float: 'right', height: 'inherit' } };
export var AnnouncedQuickActionsExample = function () {
    var detailsList = React.useRef(null);
    var textField = React.useRef(null);
    var selection = useConst(function () { return new Selection(); });
    var _a = React.useState(function () {
        return createArray(20, function (i) { return ({
            key: i,
            name: 'Item ' + i,
        }); });
    }), items = _a[0], setItems = _a[1];
    var _b = React.useState(undefined), dialogContent = _b[0], setDialogContent = _b[1];
    var _c = React.useState(undefined), announced = _c[0], setAnnounced = _c[1];
    var deleteItem = React.useCallback(function (index) {
        setItems(function (prevItems) { return prevItems.filter(function (item, i) { return i !== index; }); });
        setAnnounced(React.createElement(Announced, { message: "Item deleted", "aria-live": "assertive" }));
    }, []);
    var renameItem = React.useCallback(function (item, index) {
        var updateItemName = function () {
            if (textField && textField.current) {
                setItems(function (prevItems) {
                    var _a;
                    var renamedItems = __spreadArrays(prevItems);
                    renamedItems[index] = __assign(__assign({}, prevItems[index]), { name: ((_a = textField.current) === null || _a === void 0 ? void 0 : _a.value) || renamedItems[index].name });
                    return renamedItems;
                });
                setDialogContent(undefined);
                setAnnounced(React.createElement(Announced, { message: "Item renamed", "aria-live": "assertive" }));
            }
        };
        setDialogContent(React.createElement(React.Fragment, null,
            React.createElement(TextField, { componentRef: textField, label: "Rename", defaultValue: item.name }),
            React.createElement(DialogFooter, null,
                React.createElement(PrimaryButton
                // eslint-disable-next-line react/jsx-no-bind
                , { 
                    // eslint-disable-next-line react/jsx-no-bind
                    onClick: updateItemName, text: "Save" }))));
    }, []);
    var columns = useConst(function () { return [
        {
            name: 'Name',
            fieldName: 'name',
            key: 'name',
            minWidth: 100,
            maxWidth: 200,
            onRender: function (item, index) { return (React.createElement("div", null,
                item.name,
                React.createElement(IconButton, { menuIconProps: { iconName: 'MoreVertical' }, role: "button", "aria-haspopup": true, "aria-label": "Show actions", styles: iconButtonStyles, menuProps: {
                        items: [
                            {
                                key: 'delete',
                                text: 'Delete',
                                onClick: function () { return deleteItem(index); },
                            },
                            {
                                key: 'rename',
                                text: 'Rename',
                                onClick: function () { return renameItem(item, index); },
                            },
                        ],
                    } }))); },
        },
    ]; });
    var closeRenameDialog = React.useCallback(function () {
        setDialogContent(undefined);
    }, []);
    return (React.createElement(React.Fragment, null,
        announced,
        React.createElement(DetailsList, { componentRef: detailsList, items: items, columns: columns, layoutMode: DetailsListLayoutMode.fixedColumns, selection: selection, selectionPreservedOnEmptyClick: true, ariaLabelForSelectionColumn: "Toggle selection", ariaLabelForSelectAllCheckbox: "Toggle selection for all items", checkButtonAriaLabel: "select row" }),
        React.createElement(Dialog, { hidden: !dialogContent, onDismiss: closeRenameDialog, closeButtonAriaLabel: "Close" }, dialogContent)));
};
//# sourceMappingURL=Announced.QuickActions.Example.js.map