"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var exampleData_1 = require("../../../utilities/exampleData");
var index_1 = require("office-ui-fabric-react/lib/index");
var Shimmer_1 = require("office-ui-fabric-react/lib/Shimmer");
var ShimmerExampleStyles = require("./Shimmer.Example.scss");
var fileIcons = [
    { name: 'accdb' },
    { name: 'csv' },
    { name: 'docx' },
    { name: 'dotx' },
    { name: 'mpp' },
    { name: 'mpt' },
    { name: 'odp' },
    { name: 'ods' },
    { name: 'odt' },
    { name: 'one' },
    { name: 'onepkg' },
    { name: 'onetoc' },
    { name: 'potx' },
    { name: 'ppsx' },
    { name: 'pptx' },
    { name: 'pub' },
    { name: 'vsdx' },
    { name: 'vssx' },
    { name: 'vstx' },
    { name: 'xls' },
    { name: 'xlsx' },
    { name: 'xltx' },
    { name: 'xsn' }
];
var ITEMS_COUNT = 500;
var ITEMS_BATCH_SIZE = 10;
var PAGING_DELAY = 2500;
// tslint:disable-next-line:no-any
var _items;
var ShimmerApplicationExample = /** @class */ (function (_super) {
    tslib_1.__extends(ShimmerApplicationExample, _super);
    function ShimmerApplicationExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onRenderMissingItem = function (index, rowProps) {
            var isDataLoaded = _this.state.isDataLoaded;
            isDataLoaded && _this._onDataMiss(index);
            var shimmerRow = React.createElement(index_1.DetailsRow, tslib_1.__assign({}, rowProps, { shimmer: true }));
            return React.createElement(Shimmer_1.Shimmer, { customElementsGroup: shimmerRow });
        };
        // Simulating asynchronus data loading each 2.5 sec
        _this._onDataMiss = function (index) {
            index = Math.floor(index / ITEMS_BATCH_SIZE) * ITEMS_BATCH_SIZE;
            if (!_this._isFetchingItems) {
                _this._isFetchingItems = true;
                _this._lastTimeoutId = _this._async.setTimeout(function () {
                    _this._isFetchingItems = false;
                    // tslint:disable-next-line:no-any
                    var itemsCopy = [].concat(_this.state.items);
                    itemsCopy.splice.apply(itemsCopy, [index, ITEMS_BATCH_SIZE].concat(_items.slice(index, index + ITEMS_BATCH_SIZE)));
                    _this.setState({
                        items: itemsCopy
                    });
                }, PAGING_DELAY);
            }
        };
        _this._onLoadData = function (checked) {
            if (!_items) {
                _items = exampleData_1.createListItems(ITEMS_COUNT);
                _items.map(function (item) {
                    var randomFileType = _this._randomFileIcon();
                    item.thumbnail = randomFileType.url;
                });
            }
            var items;
            if (checked) {
                items = _items.slice(0, ITEMS_BATCH_SIZE).concat(new Array(ITEMS_COUNT - ITEMS_BATCH_SIZE));
            }
            else {
                items = new Array();
                _this._async.clearTimeout(_this._lastTimeoutId);
            }
            _this.setState({
                isDataLoaded: checked,
                items: items
            });
        };
        _this._onChangeModalSelection = function (checked) {
            _this.setState({ isModalSelection: checked });
        };
        _this._onChangeCompactMode = function (checked) {
            _this.setState({ isCompactMode: checked });
        };
        _this._onRenderItemColumn = function (item, index, column) {
            if (column.key === 'thumbnail') {
                return React.createElement("img", { src: item.thumbnail });
            }
            return item[column.key];
        };
        _this.state = {
            items: new Array(),
            columns: _buildColumns(),
            isDataLoaded: false,
            isModalSelection: false,
            isCompactMode: false
        };
        return _this;
    }
    ShimmerApplicationExample.prototype.render = function () {
        var _a = this.state, items = _a.items, columns = _a.columns, isDataLoaded = _a.isDataLoaded, isModalSelection = _a.isModalSelection, isCompactMode = _a.isCompactMode;
        return (React.createElement("div", null,
            React.createElement("div", { className: ShimmerExampleStyles.shimmerExampleFlexGroup },
                React.createElement(index_1.Toggle, { label: "Enable Modal Selection", checked: isModalSelection, onChanged: this._onChangeModalSelection, onText: "Modal", offText: "Normal" }),
                React.createElement(index_1.Toggle, { label: "Enable Compact Mode", checked: isCompactMode, onChanged: this._onChangeCompactMode, onText: "Compact", offText: "Normal" }),
                React.createElement(index_1.Toggle, { label: "Enable content loading", checked: isDataLoaded, onChanged: this._onLoadData, onText: "Content", offText: "Shimmer" })),
            React.createElement("div", null,
                React.createElement(index_1.DetailsList, { setKey: "items", items: items, columns: columns, compact: isCompactMode, selectionMode: this.state.isModalSelection ? index_1.SelectionMode.multiple : index_1.SelectionMode.none, onRenderItemColumn: this._onRenderItemColumn, onRenderMissingItem: this._onRenderMissingItem, enableShimmer: true, listProps: { renderedWindowsAhead: 0, renderedWindowsBehind: 0 } }))));
    };
    ShimmerApplicationExample.prototype._randomFileIcon = function () {
        var docType = fileIcons[Math.floor(Math.random() * fileIcons.length) + 0].name;
        return {
            docType: docType,
            url: "https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/svg/" + docType + "_16x1.svg"
        };
    };
    return ShimmerApplicationExample;
}(Utilities_1.BaseComponent));
exports.ShimmerApplicationExample = ShimmerApplicationExample;
function _buildColumns() {
    var _item = exampleData_1.createListItems(1);
    var columns = index_1.buildColumns(_item);
    columns.forEach(function (column) {
        if (column.key === 'thumbnail') {
            column.name = 'FileType';
            column.minWidth = 16;
            column.maxWidth = 16;
            column.isIconOnly = true;
            column.iconName = 'Page';
        }
    });
    return columns;
}
//# sourceMappingURL=Shimmer.Application.Example.js.map