"use strict";
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TilesListDocumentExample = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var TilesList_1 = require("@fluentui/react-experiments/lib-commonjs/TilesList");
var Tile_1 = require("@fluentui/react-experiments/lib-commonjs/Tile");
var Toggle_1 = require("@fluentui/react/lib-commonjs/Toggle");
var Selection_1 = require("@fluentui/react/lib-commonjs/Selection");
var MarqueeSelection_1 = require("@fluentui/react/lib-commonjs/MarqueeSelection");
var Styling_1 = require("@fluentui/react/lib-commonjs/Styling");
var ExampleHelpers_1 = require("@fluentui/react-examples/lib-commonjs/react-experiments/TilesList/ExampleHelpers");
var Shimmer_1 = require("@fluentui/react/lib-commonjs/Shimmer");
var HEADER_VERTICAL_PADDING = 13;
var HEADER_FONT_SIZE = 18;
function createGroups() {
    var offset = 0;
    var groups = [];
    for (var i = 0; i < 20; i++) {
        var items = ExampleHelpers_1.createDocumentItems(50 + Math.ceil(Math.random() * 6) * 50, offset);
        offset += items.length;
        groups.push(ExampleHelpers_1.createGroup(items, 'document', i));
    }
    return groups;
}
var GROUPS = createGroups();
var SHIMMER_GROUPS = ExampleHelpers_1.createShimmerGroups('document', 0);
var ITEMS = (_a = []).concat.apply(_a, GROUPS.map(function (group) { return group.items; }));
var TilesListDocumentExample = /** @class */ (function (_super) {
    tslib_1.__extends(TilesListDocumentExample, _super);
    function TilesListDocumentExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onToggleIsModalSelection = function (event, checked) {
            _this._selection.setModal(checked);
        };
        _this._onToggleIsDataLoaded = function (event, checked) {
            var tileSize = _this.props.tileSize;
            var isDataLoaded = _this.state.isDataLoaded;
            var cells = _this.state.cells;
            if (cells.length && !cells[0].isPlaceholder) {
                cells = ExampleHelpers_1.getExampleTilesListCells(SHIMMER_GROUPS, {
                    onRenderCell: _this._onRenderShimmerCell,
                    onRenderHeader: _this._onRenderShimmerHeader,
                    shimmerMode: true,
                    size: tileSize,
                });
            }
            else {
                cells = ExampleHelpers_1.getExampleTilesListCells(GROUPS, {
                    onRenderCell: _this._onRenderDocumentCell,
                    onRenderHeader: _this._onRenderHeader,
                    size: tileSize,
                });
            }
            _this.setState({
                isDataLoaded: !isDataLoaded,
                cells: cells,
            });
        };
        _this._onToggleIsFluentStyling = function (event, checked) {
            _this.setState({
                isFluentStyling: checked,
            }, function () {
                console.log(_this.state);
            });
        };
        _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._onRenderDocumentCell = function (props) {
            var item = props.item;
            var tileSize = _this.props.tileSize;
            var imgSize = tileSize === 'large' ? 64 : 48;
            return (React.createElement(Tile_1.Tile, { role: "gridcell", "aria-colindex": props.position.column + 1, className: Styling_1.AnimationClassNames.fadeIn400, selection: _this._selection, selectionIndex: item.index, isFluentStyling: _this.state.isFluentStyling, invokeSelection: true, foreground: React.createElement("img", { src: "https://spoprod-a.akamaihd.net/files/odsp-next-prod_2018-04-06_20180406.004/odsp-media/images/itemtypes/" + imgSize + "/docx.png", style: {
                        display: 'block',
                        width: imgSize + "px",
                        height: imgSize + "px",
                        margin: tileSize === 'large' ? '16px' : '7px',
                    } }), showForegroundFrame: true, itemName: item.name, itemActivity: item.key, tileSize: tileSize }));
        };
        _this._onRenderShimmerCell = function (props) {
            var finalSize = props.finalSize;
            var tileSize = _this.props.tileSize;
            return (React.createElement(Tile_1.ShimmerTile, { role: "presentation", contentSize: finalSize, itemName: true, itemActivity: true, itemThumbnail: true, tileSize: tileSize }));
        };
        _this._onRenderHeader = function (props) {
            var item = props.item;
            return (React.createElement("div", { role: "gridcell", "aria-colindex": props.position.column + 1, style: {
                    padding: HEADER_VERTICAL_PADDING + "px 0",
                    fontSize: HEADER_FONT_SIZE + "px",
                    fontWeight: 700,
                    lineHeight: HEADER_FONT_SIZE + "px",
                } }, item.name));
        };
        _this._onRenderShimmerHeader = function (props) {
            return (React.createElement(Shimmer_1.ShimmerElementsGroup, { shimmerElements: [
                    { type: Shimmer_1.ShimmerElementType.line, height: HEADER_FONT_SIZE, width: '100%' },
                    { type: Shimmer_1.ShimmerElementType.gap, height: HEADER_VERTICAL_PADDING * 2 + HEADER_FONT_SIZE, width: 0 },
                ] }));
        };
        _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(),
            isDataLoaded: false,
            isFluentStyling: false,
            cells: ExampleHelpers_1.getExampleTilesListCells(SHIMMER_GROUPS, {
                onRenderCell: _this._onRenderShimmerCell,
                onRenderHeader: _this._onRenderShimmerHeader,
                size: props.tileSize,
                shimmerMode: true,
            }),
        };
        return _this;
    }
    TilesListDocumentExample.prototype.componentDidUpdate = function (previousProps, prevState) {
        var isDataLoaded = this.state.isDataLoaded;
        if (this.props.tileSize !== previousProps.tileSize || this.state.isFluentStyling !== prevState.isFluentStyling) {
            if (!isDataLoaded) {
                this.setState({
                    cells: ExampleHelpers_1.getExampleTilesListCells(SHIMMER_GROUPS, {
                        onRenderCell: this._onRenderShimmerCell,
                        onRenderHeader: this._onRenderShimmerHeader,
                        size: this.props.tileSize,
                        shimmerMode: true,
                    }),
                });
            }
            else {
                this.setState({
                    cells: ExampleHelpers_1.getExampleTilesListCells(GROUPS, {
                        onRenderCell: this._onRenderDocumentCell,
                        onRenderHeader: this._onRenderHeader,
                        size: this.props.tileSize,
                    }),
                });
            }
        }
    };
    TilesListDocumentExample.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: "Load Data Switch", checked: this.state.isDataLoaded, onChange: this._onToggleIsDataLoaded, onText: "Loaded", offText: "Loading..." }),
            React.createElement(Toggle_1.Toggle, { label: "Enable Fluent Styling", checked: this.state.isFluentStyling, onChange: this._onToggleIsFluentStyling, onText: "Fluent", offText: "Default" }),
            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, { items: this.state.cells, role: "grid", onRenderRoot: ExampleHelpers_1.onRenderTilesListExampleRoot, onRenderRow: ExampleHelpers_1.onRenderTilesListExampleRow })))));
    };
    return TilesListDocumentExample;
}(React.Component));
exports.TilesListDocumentExample = TilesListDocumentExample;
//# sourceMappingURL=TilesList.Document.Example.js.map