var _a;
import { __extends } from "tslib";
import * as React from 'react';
import { TilesList, } from '@uifabric/experiments/lib/TilesList';
import { Tile, getTileLayout, renderTileWithLayout } from '@uifabric/experiments/lib/Tile';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
import { Selection, SelectionZone } from 'office-ui-fabric-react/lib/Selection';
import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
import { AnimationClassNames } from 'office-ui-fabric-react/lib/Styling';
import { createGroup, createMediaItems, getExampleTilesListCells, onRenderTilesListExampleRoot, onRenderTilesListExampleRow, } from '@fluentui/examples/lib/experiments/TilesList/ExampleHelpers';
import * as TilesListExampleStylesModule from './TilesList.Example.scss';
import { lorem } from '@uifabric/example-data';
import { SignalField, SharedSignal, CommentsSignal } from '@uifabric/experiments/lib/Signals';
var TilesListExampleStyles = TilesListExampleStylesModule;
function createGroups() {
    var offset = 0;
    var groups = [];
    for (var i = 0; i < 20; i++) {
        var items = createMediaItems(50 + Math.ceil(Math.random() * 6) * 50, offset);
        offset += items.length;
        groups.push(createGroup(items, 'media', i));
    }
    return groups;
}
var GROUPS = createGroups();
var ITEMS = (_a = []).concat.apply(_a, GROUPS.map(function (group) { return group.items; }));
var TilesListMediaExample = /** @class */ (function (_super) {
    __extends(TilesListMediaExample, _super);
    function TilesListMediaExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onToggleIsModalSelection = function (event, checked) {
            _this._selection.setModal(checked);
        };
        _this._onToggleNameplateOnlyOnHover = function (event, checked) {
            _this.setState({
                nameplateOnlyOnHover: checked,
                cells: getExampleTilesListCells(GROUPS, {
                    onRenderCell: _this._onRenderMediaCell,
                    onRenderHeader: _this._onRenderHeader,
                }),
            });
        };
        _this._onSelectionChange = function () {
            _this.setState({
                isModalSelection: _this._selection.isModal(),
            });
        };
        _this._onItemInvoked = function (item, index, event) {
            event.stopPropagation();
            event.preventDefault();
            alert("Invoked item '" + item.name + "'");
        };
        _this._onRenderMediaCell = function (props) {
            var finalSize = props.finalSize, item = props.item, column = props.position.column;
            var pixelWidth = Math.round(finalSize.width);
            var pixelHeight = Math.round(finalSize.height);
            var tile = (React.createElement(Tile, { role: "gridcell", "aria-colindex": column + 1, contentSize: finalSize, className: AnimationClassNames.fadeIn400, selection: _this._selection, selectionIndex: item.index, invokeSelection: true, background: React.createElement("span", null) // Placeholder
                , showBackgroundFrame: true, itemName: item.name, itemActivity: React.createElement(React.Fragment, null,
                    React.createElement("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } },
                        pixelWidth,
                        "\u205F\u00D7\u205F",
                        pixelHeight,
                        "\u2002\u00B7\u20023.14\u00A0MB"),
                    React.createElement(SignalField, { before: React.createElement(React.Fragment, null,
                            React.createElement(SharedSignal, { key: 1 }),
                            React.createElement(CommentsSignal, { key: 2 })) }, lorem(7))), nameplateOnlyOnHover: _this.state.nameplateOnlyOnHover }));
            var _a = getTileLayout(tile).backgroundSize, backgroundSize = _a === void 0 ? { width: 0, height: 0 } : _a;
            return renderTileWithLayout(tile, {
                background: (React.createElement("img", { className: TilesListExampleStyles.tileImage, src: "//placehold.it/" + Math.round(backgroundSize.width) + "x" + Math.round(backgroundSize.height) })),
            });
        };
        _this._onRenderHeader = function (props) {
            var item = props.item, column = props.position.column;
            return (React.createElement("div", { role: "griditem", "aria-colindex": column + 1 },
                React.createElement("h3", null, item.name)));
        };
        _this._selection = new Selection({
            getKey: function (item) { return item.key; },
            onSelectionChanged: _this._onSelectionChange,
        });
        _this._selection.setItems(ITEMS);
        _this.state = {
            isModalSelection: _this._selection.isModal(),
            nameplateOnlyOnHover: false,
            cells: getExampleTilesListCells(GROUPS, {
                onRenderCell: _this._onRenderMediaCell,
                onRenderHeader: _this._onRenderHeader,
            }),
        };
        return _this;
    }
    TilesListMediaExample.prototype.render = function () {
        return (React.createElement("div", { style: { padding: '4px' } },
            React.createElement(Toggle, { label: "Enable Modal Selection", checked: this.state.isModalSelection, onChange: this._onToggleIsModalSelection, onText: "Modal", offText: "Normal" }),
            React.createElement(Toggle, { label: "Hide Nameplates Until Hovered", checked: this.state.nameplateOnlyOnHover, onChange: this._onToggleNameplateOnlyOnHover, onText: "Shown on hover", offText: "Always shown" }),
            React.createElement(MarqueeSelection, { selection: this._selection },
                React.createElement(SelectionZone, { selection: this._selection, onItemInvoked: this._onItemInvoked, enterModalOnTouch: true },
                    React.createElement(TilesList, { onRenderRoot: onRenderTilesListExampleRoot, onRenderRow: onRenderTilesListExampleRow, items: this.state.cells, role: "grid" })))));
    };
    return TilesListMediaExample;
}(React.Component));
export { TilesListMediaExample };
//# sourceMappingURL=TilesList.Media.Example.js.map