import * as tslib_1 from "tslib";
import * as React from 'react';
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
import { Check } from 'office-ui-fabric-react/lib/Check';
import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
import { Selection, SelectionMode, SelectionZone } from 'office-ui-fabric-react/lib/Selection';
import { createListItems } from '../../../utilities/exampleData';
import './Selection.Example.scss';
var ITEM_COUNT = 100;
/**
 * The SelectionItemExample controls and displays the selection state of a single item
 */
var SelectionItemExample = /** @class */ (function (_super) {
    tslib_1.__extends(SelectionItemExample, _super);
    function SelectionItemExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    SelectionItemExample.prototype.render = function () {
        var _a = this.props, item = _a.item, itemIndex = _a.itemIndex, selection = _a.selection;
        var isSelected = false;
        if (selection && itemIndex !== undefined) {
            isSelected = selection.isIndexSelected(itemIndex);
        }
        return (React.createElement("div", { className: "ms-SelectionItemExample", "data-is-focusable": true, "data-selection-index": itemIndex },
            selection &&
                selection.canSelectItem(item) &&
                selection.mode !== SelectionMode.none && (React.createElement("div", { className: "ms-SelectionItemExample-check", "data-is-focusable": true, "data-selection-toggle": true },
                React.createElement(Check, { checked: isSelected }))),
            React.createElement("span", { className: "ms-SelectionItemExample-name" }, item.name),
            React.createElement("a", { className: "ms-SelectionItemExample-link", href: "https://bing.com", target: "_blank" }, "Link that avoids selection"),
            React.createElement("a", { className: "ms-SelectionItemExample-link", "data-selection-select": true, href: "https://bing.com", target: "_blank" }, "Link that selects first")));
    };
    return SelectionItemExample;
}(React.Component));
export { SelectionItemExample };
/**
 * The SelectionBasicExample controls the selection state of all items
 */
var SelectionBasicExample = /** @class */ (function (_super) {
    tslib_1.__extends(SelectionBasicExample, _super);
    function SelectionBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _this._alertItem = function (item) { return alert('item invoked: ' + item.name); };
        _this._hasMounted = false;
        _this._onSelectionChanged = _this._onSelectionChanged.bind(_this);
        _this._onSelectionModeChanged = _this._onSelectionModeChanged.bind(_this);
        _this._onToggleSelectAll = _this._onToggleSelectAll.bind(_this);
        _this._onCanSelectChanged = _this._onCanSelectChanged.bind(_this);
        _this._canSelectItem = _this._canSelectItem.bind(_this);
        _this.state = {
            items: createListItems(ITEM_COUNT),
            selection: new Selection({ onSelectionChanged: _this._onSelectionChanged }),
            selectionMode: SelectionMode.multiple,
            canSelect: 'all'
        };
        _this.state.selection.setItems(_this.state.items, false);
        return _this;
    }
    SelectionBasicExample.prototype.componentDidMount = function () {
        this._hasMounted = true;
    };
    SelectionBasicExample.prototype.render = function () {
        var _a = this.state, items = _a.items, selection = _a.selection;
        return (React.createElement("div", { className: "ms-SelectionBasicExample" },
            React.createElement(CommandBar, { items: this._getCommandItems() }),
            React.createElement(MarqueeSelection, { selection: selection, isEnabled: selection.mode === SelectionMode.multiple },
                React.createElement(SelectionZone, { selection: selection, 
                    // tslint:disable-next-line:jsx-no-lambda
                    onItemInvoked: this._alertItem }, items.map(function (item, index) { return (React.createElement(SelectionItemExample, { ref: 'detailsGroup_' + index, key: item.key, item: item, itemIndex: index, selection: selection })); })))));
    };
    SelectionBasicExample.prototype._onSelectionChanged = function () {
        if (this._hasMounted) {
            this.forceUpdate();
        }
    };
    SelectionBasicExample.prototype._onToggleSelectAll = function () {
        var selection = this.state.selection;
        selection.toggleAllSelected();
    };
    SelectionBasicExample.prototype._onSelectionModeChanged = function (ev, menuItem) {
        var _this = this;
        this.setState(function (previousState) {
            var newSelection = new Selection({
                onSelectionChanged: _this._onSelectionChanged,
                canSelectItem: previousState.canSelect === 'vowels' ? _this._canSelectItem : undefined,
                selectionMode: menuItem.data
            });
            newSelection.setItems(previousState.items, false);
            return {
                selection: newSelection
            };
        });
    };
    SelectionBasicExample.prototype._onCanSelectChanged = function (ev, menuItem) {
        var _this = this;
        var canSelectItem = menuItem.data === 'vowels' ? this._canSelectItem : undefined;
        this.setState(function (previousState) {
            var newSelection = new Selection({
                onSelectionChanged: _this._onSelectionChanged,
                canSelectItem: canSelectItem,
                selectionMode: previousState.selection.mode
            });
            newSelection.setItems(previousState.items, false);
            return {
                selection: newSelection,
                canSelect: menuItem.data === 'vowels' ? 'vowels' : 'all'
            };
        });
    };
    SelectionBasicExample.prototype._canSelectItem = function (item) {
        return (item.name &&
            (item.name.indexOf('a') === 0 ||
                item.name.indexOf('e') === 0 ||
                item.name.indexOf('i') === 0 ||
                item.name.indexOf('o') === 0 ||
                item.name.indexOf('u') === 0));
    };
    SelectionBasicExample.prototype._getCommandItems = function () {
        var _a = this.state, selection = _a.selection, canSelect = _a.canSelect;
        return [
            {
                key: 'selectionMode',
                text: 'Selection Mode',
                items: [
                    {
                        key: SelectionMode[SelectionMode.none],
                        name: 'None',
                        canCheck: true,
                        checked: selection.mode === SelectionMode.none,
                        onClick: this._onSelectionModeChanged,
                        data: SelectionMode.none
                    },
                    {
                        key: SelectionMode[SelectionMode.single],
                        name: 'Single select',
                        canCheck: true,
                        checked: selection.mode === SelectionMode.single,
                        onClick: this._onSelectionModeChanged,
                        data: SelectionMode.single
                    },
                    {
                        key: SelectionMode[SelectionMode.multiple],
                        name: 'Multi select',
                        canCheck: true,
                        checked: selection.mode === SelectionMode.multiple,
                        onClick: this._onSelectionModeChanged,
                        data: SelectionMode.multiple
                    }
                ]
            },
            {
                key: 'selectAll',
                text: 'Select All',
                iconProps: { iconName: 'CheckMark' },
                onClick: this._onToggleSelectAll
            },
            {
                key: 'allowCanSelect',
                text: 'Choose selectable items',
                items: [
                    {
                        key: 'all',
                        name: 'All items',
                        canCheck: true,
                        checked: canSelect === 'all',
                        onClick: this._onCanSelectChanged,
                        data: 'all'
                    },
                    {
                        key: 'a',
                        name: 'Names starting with vowels',
                        canCheck: true,
                        checked: canSelect === 'vowels',
                        onClick: this._onCanSelectChanged,
                        data: 'vowels'
                    }
                ]
            }
        ];
    };
    return SelectionBasicExample;
}(React.Component));
export { SelectionBasicExample };
//# sourceMappingURL=Selection.Basic.Example.js.map