import { __assign } from "tslib";
import * as React from 'react';
import { createListItems } from '@fluentui/example-data';
import { buildColumns, SelectionMode, Toggle } from '@fluentui/react/lib/index';
import { ShimmeredDetailsList } from '@fluentui/react/lib/ShimmeredDetailsList';
import { useSetInterval, useConst } from '@fluentui/react-hooks';
var ITEMS_COUNT = 200;
var INTERVAL_DELAY = 1200;
var toggleStyle = {
    marginBottom: '20px',
};
var shimmeredDetailsListProps = {
    renderedWindowsAhead: 0,
    renderedWindowsBehind: 0,
};
var fileIcons = [
    { name: 'accdb' },
    { name: 'audio' },
    { name: 'code' },
    { name: 'csv' },
    { name: 'docx' },
    { name: 'dotx' },
    { name: 'mpt' },
    { name: 'model' },
    { name: 'one' },
    { name: 'onetoc' },
    { name: 'pdf' },
    { name: 'photo' },
    { name: 'pptx' },
    { name: 'presentation' },
    { name: 'potx' },
    { name: 'pub' },
    { name: 'rtf' },
    { name: 'spreadsheet' },
    { name: 'txt' },
    { name: 'vector' },
    { name: 'vsdx' },
    { name: 'xlsx' },
    { name: 'xltx' },
    { name: 'xsn' },
];
var randomFileIcon = function () {
    var docType = fileIcons[Math.floor(Math.random() * fileIcons.length) + 0].name;
    return {
        docType: docType,
        url: "https://static2.sharepointonline.com/files/fabric/assets/item-types/16/" + docType + ".svg",
    };
};
var onRenderItemColumn = function (item, index, column) {
    if (column.key === 'thumbnail') {
        return React.createElement("img", { src: item.thumbnail });
    }
    return item[column.key];
};
var exampleItems = createListItems(ITEMS_COUNT).map(function (item) {
    var randomFileType = randomFileIcon();
    return __assign(__assign({}, item), { thumbnail: randomFileType.url });
});
export var ShimmerApplicationExample = function () {
    var state = React.useRef({
        lastIntervalId: 0,
        visibleCount: 0,
    }).current;
    var _a = React.useState(undefined), items = _a[0], setItems = _a[1];
    var shimmerColumns = useConst(function () {
        var currentItems = createListItems(1);
        var columns = buildColumns(currentItems);
        for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
            var column = columns_1[_i];
            if (column.key === 'thumbnail') {
                column.name = 'FileType';
                column.minWidth = 16;
                column.maxWidth = 16;
                column.isIconOnly = true;
                column.iconName = 'Page';
                break;
            }
        }
        return columns;
    });
    var _b = useSetInterval(), setInterval = _b.setInterval, clearInterval = _b.clearInterval;
    var onLoadData = React.useCallback(function (ev, checked) {
        var loadMoreItems = function () {
            state.visibleCount = Math.min(exampleItems.length, state.visibleCount + 2);
            setItems(exampleItems.map(function (current, index) { return (index < state.visibleCount ? current : null); }));
        };
        state.visibleCount = 0;
        if (checked) {
            loadMoreItems();
            state.lastIntervalId = setInterval(loadMoreItems, INTERVAL_DELAY);
        }
        else {
            setItems(undefined);
            clearInterval(state.lastIntervalId);
        }
    }, [clearInterval, setInterval, state]);
    return (React.createElement(React.Fragment, null,
        React.createElement(Toggle, { style: toggleStyle, label: "Toggle to load content", onChange: onLoadData, onText: "Content", offText: "Shimmer" }),
        React.createElement("div", null,
            React.createElement(ShimmeredDetailsList, { setKey: "items", items: items || [], columns: shimmerColumns, selectionMode: SelectionMode.none, onRenderItemColumn: onRenderItemColumn, enableShimmer: !items, ariaLabelForShimmer: "Content is being fetched", ariaLabelForGrid: "Item details", listProps: shimmeredDetailsListProps }))));
};
//# sourceMappingURL=Shimmer.Application.Example.js.map