define(["require", "exports", "tslib", "react", "@fluentui/react-experiments/lib/TilesList", "@fluentui/react-experiments/lib/Tile", "@fluentui/react/lib/Toggle", "@fluentui/react/lib/Selection", "@fluentui/react/lib/MarqueeSelection", "@fluentui/react/lib/Styling", "@fluentui/react-examples/lib/react-experiments/TilesList/ExampleHelpers", "./TilesList.Example.scss", "@fluentui/example-data", "@fluentui/react-experiments/lib/Signals"], function (require, exports, tslib_1, React, TilesList_1, Tile_1, Toggle_1, Selection_1, MarqueeSelection_1, Styling_1, ExampleHelpers_1, TilesListExampleStylesModule, example_data_1, Signals_1) {
    "use strict";
    var _a;
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.TilesListMediaExample = void 0;
    var TilesListExampleStyles = TilesListExampleStylesModule;
    function createGroups() {
        var offset = 0;
        var groups = [];
        for (var i = 0; i < 20; i++) {
            var items = ExampleHelpers_1.createMediaItems(50 + Math.ceil(Math.random() * 6) * 50, offset);
            offset += items.length;
            groups.push(ExampleHelpers_1.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) {
        tslib_1.__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: ExampleHelpers_1.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_1.Tile, { role: "gridcell", "aria-colindex": column + 1, contentSize: finalSize, className: Styling_1.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(Signals_1.SignalField, { before: React.createElement(React.Fragment, null,
                                React.createElement(Signals_1.SharedSignal, { key: 1 }),
                                React.createElement(Signals_1.CommentsSignal, { key: 2 })) }, example_data_1.lorem(7))), nameplateOnlyOnHover: _this.state.nameplateOnlyOnHover }));
                var _a = Tile_1.getTileLayout(tile).backgroundSize, backgroundSize = _a === void 0 ? { width: 0, height: 0 } : _a;
                return Tile_1.renderTileWithLayout(tile, {
                    background: (React.createElement("img", { className: TilesListExampleStyles.tileImage, src: "//via.placeholder.com/" + 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_1.Selection({
                getKey: function (item) { return item.key; },
                onSelectionChanged: _this._onSelectionChange,
            });
            _this._selection.setItems(ITEMS);
            _this.state = {
                isModalSelection: _this._selection.isModal(),
                nameplateOnlyOnHover: false,
                cells: ExampleHelpers_1.getExampleTilesListCells(GROUPS, {
                    onRenderCell: _this._onRenderMediaCell,
                    onRenderHeader: _this._onRenderHeader,
                }),
            };
            return _this;
        }
        TilesListMediaExample.prototype.render = function () {
            return (React.createElement("div", { style: { padding: '4px' } },
                React.createElement(Toggle_1.Toggle, { label: "Enable Modal Selection", checked: this.state.isModalSelection, onChange: this._onToggleIsModalSelection, onText: "Modal", offText: "Normal" }),
                React.createElement(Toggle_1.Toggle, { label: "Hide Nameplates Until Hovered", checked: this.state.nameplateOnlyOnHover, onChange: this._onToggleNameplateOnlyOnHover, onText: "Shown on hover", offText: "Always shown" }),
                React.createElement(MarqueeSelection_1.MarqueeSelection, { selection: this._selection },
                    React.createElement(Selection_1.SelectionZone, { selection: this._selection, onItemInvoked: this._onItemInvoked, enterModalOnTouch: true },
                        React.createElement(TilesList_1.TilesList, { onRenderRoot: ExampleHelpers_1.onRenderTilesListExampleRoot, onRenderRow: ExampleHelpers_1.onRenderTilesListExampleRow, items: this.state.cells, role: "grid" })))));
        };
        return TilesListMediaExample;
    }(React.Component));
    exports.TilesListMediaExample = TilesListMediaExample;
});
//# sourceMappingURL=TilesList.Media.Example.js.map