var _a;
import * as React from 'react';
import { CommandBar } from '@fluentui/react/lib/CommandBar';
import { Check } from '@fluentui/react/lib/Check';
import { MarqueeSelection } from '@fluentui/react/lib/MarqueeSelection';
import { Selection, SelectionMode, SelectionZone } from '@fluentui/react/lib/Selection';
import { createListItems } from '@fluentui/example-data';
import { mergeStyleSets } from '@fluentui/react/lib/Styling';
import { useConst, useForceUpdate } from '@fluentui/react-hooks';
var commonStyles = {
    display: 'inline-block',
    cursor: 'default',
    boxSizing: 'border-box',
    verticalAlign: 'top',
    background: 'none',
    backgroundColor: 'transparent',
    border: 'none',
};
var classNames = mergeStyleSets({
    item: {
        selectors: {
            '&:hover': { background: '#eee' },
        },
    },
    // Overwrites the default style for Button
    check: [commonStyles, { padding: '11px 8px' }],
    cell: [
        commonStyles,
        {
            overflow: 'hidden',
            height: 36,
            padding: 8,
            userSelect: 'none',
        },
    ],
});
var alertItem = function (item) {
    alert('item invoked: ' + item.name);
};
var startsWithVowel = function (item) {
    return /^[aeiou]/.test(item.name || '');
};
var selectionModes = (_a = {},
    _a[SelectionMode[SelectionMode.none]] = 'None',
    _a[SelectionMode[SelectionMode.single]] = 'Single select',
    _a[SelectionMode[SelectionMode.multiple]] = 'Multi select',
    _a);
var selectableItemTypes = {
    all: 'All items',
    vowels: 'Names starting with vowels',
};
var ITEM_COUNT = 100;
var SelectionItemExample = function (props) {
    var item = props.item, itemIndex = props.itemIndex, selection = props.selection;
    var isSelected = false;
    if (selection && itemIndex !== undefined) {
        isSelected = selection.isIndexSelected(itemIndex);
    }
    return (React.createElement("div", { className: classNames.item, "data-is-focusable": true, "data-selection-index": itemIndex },
        selection && selection.canSelectItem(item) && selection.mode !== SelectionMode.none && (React.createElement("div", { className: classNames.check, "data-is-focusable": true, "data-selection-toggle": true },
            React.createElement(Check, { checked: isSelected }))),
        React.createElement("span", { className: classNames.cell }, item.name),
        React.createElement("a", { className: classNames.cell, href: "https://bing.com", target: "_blank" }, "Link that avoids selection"),
        React.createElement("a", { className: classNames.cell, "data-selection-select": true, href: "https://bing.com", target: "_blank" }, "Link that selects first")));
};
export var SelectionBasicExample = function () {
    var _a = React.useState('all'), selectableItemType = _a[0], setSelectableItemType = _a[1];
    var _b = React.useState(SelectionMode.multiple), selectionMode = _b[0], setSelectionMode = _b[1];
    var forceUpdate = useForceUpdate();
    var items = useConst(function () { return createListItems(ITEM_COUNT); });
    var selection = React.useMemo(function () {
        return new Selection({
            canSelectItem: selectableItemType === 'vowels' ? startsWithVowel : undefined,
            selectionMode: selectionMode,
            onSelectionChanged: forceUpdate,
            items: items,
        });
    }, [selectableItemType, selectionMode, forceUpdate, items]);
    var commandItems = React.useMemo(function () { return [
        {
            key: 'selectionMode',
            text: 'Selection mode: ' + selectionModes[SelectionMode[selectionMode]],
            subMenuProps: {
                items: Object.keys(selectionModes).map(function (mode) { return ({
                    key: mode,
                    name: selectionModes[mode],
                    canCheck: true,
                    checked: selectionMode === SelectionMode[mode],
                    onClick: function () { return setSelectionMode(SelectionMode[mode]); },
                }); }),
            },
        },
        {
            key: 'allowCanSelect',
            text: 'Selectable item type: ' + selectableItemType,
            subMenuProps: {
                items: Object.keys(selectableItemTypes).map(function (itemType) { return ({
                    key: itemType,
                    name: selectableItemTypes[itemType],
                    checked: selectableItemType === itemType,
                    onClick: function () { return setSelectableItemType(itemType); },
                }); }),
            },
        },
        {
            key: 'selectAll',
            text: 'Toggle select all',
            iconProps: { iconName: 'CheckMark' },
            onClick: function () { return selection.toggleAllSelected(); },
            disabled: selectionMode !== SelectionMode.multiple,
        },
    ]; }, [selectionMode, selection, selectableItemType]);
    return (React.createElement("div", null,
        React.createElement(CommandBar, { items: commandItems }),
        React.createElement(MarqueeSelection, { selection: selection, isEnabled: selection.mode === SelectionMode.multiple },
            React.createElement(SelectionZone, { selection: selection, onItemInvoked: alertItem }, items.map(function (item, index) { return (React.createElement(SelectionItemExample, { key: item.key, item: item, itemIndex: index, selection: selection })); })))));
};
//# sourceMappingURL=Selection.Basic.Example.js.map