import * as React from 'react';
import { Announced } from '@fluentui/react/lib/Announced';
import { createArray } from '@fluentui/react/lib/Utilities';
import { Image } from '@fluentui/react/lib/Image';
import { FocusZone } from '@fluentui/react/lib/FocusZone';
import { Text } from '@fluentui/react/lib/Text';
import { Stack } from '@fluentui/react/lib/Stack';
import { DefaultButton } from '@fluentui/react/lib/Button';
import { ProgressIndicator } from '@fluentui/react/lib/ProgressIndicator';
import { mergeStyles } from '@fluentui/react/lib/Styling';
import { useBoolean, useSetInterval, useConst } from '@fluentui/react-hooks';
var PHOTO_COUNT = 40;
var stackTokens = { childrenGap: 10 };
var photoStackTokens = { childrenGap: '6 6' };
var defaultButtonStyles = { root: { width: 150 } };
var photoStackStyles = {
    inner: {
        padding: 0,
    },
};
var photoCellClass = mergeStyles({
    display: 'block',
    boxSizing: 'border-box',
    width: 100,
    height: 100,
});
export var AnnouncedLazyLoadingExample = function () {
    var _a = React.useState(0), total = _a[0], setTotal = _a[1];
    var _b = React.useState(undefined), announcedMessage = _b[0], setAnnouncedMessage = _b[1];
    var _c = useBoolean(false), loading = _c[0], toggleLoading = _c[1].toggle;
    var percentComplete = total / PHOTO_COUNT;
    var _d = useSetInterval(), setInterval = _d.setInterval, clearInterval = _d.clearInterval;
    var photos = useConst(function () {
        var width = 100;
        var height = 100;
        return createArray(PHOTO_COUNT, function () { return ({
            url: "http://via.placeholder.com/" + width + "x" + height,
            width: width,
            height: height,
        }); });
    });
    React.useEffect(function () {
        if (loading) {
            setTotal(0);
            var itemIntervalId_1 = setInterval(function () {
                setTotal(function (t) {
                    if (t < PHOTO_COUNT) {
                        return t + 1;
                    }
                    clearInterval(itemIntervalId_1);
                    clearInterval(announceIntervalId_1);
                    toggleLoading();
                    return t;
                });
            }, 500);
            var announceIntervalId_1 = setInterval(function () {
                // Referring to total directly would cause the effect to dispose.
                // Instead pull the total value from the setter to apply to the announcement.
                setTotal(function (t) {
                    setAnnouncedMessage(t + " of " + PHOTO_COUNT + " photos loaded");
                    return t;
                });
            }, 4000);
            return function () {
                clearInterval(itemIntervalId_1);
                clearInterval(announceIntervalId_1);
            };
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [clearInterval, setInterval, loading]);
    return (React.createElement(React.Fragment, null,
        React.createElement(Stack, { tokens: stackTokens },
            React.createElement(Text, null, "Turn on Narrator and press the button to start loading photos. The number of photos loaded will be announced every four seconds."),
            React.createElement(DefaultButton, { text: loading ? 'Cancel' : 'Load photos', onClick: toggleLoading, styles: defaultButtonStyles }),
            React.createElement(ProgressIndicator, { label: !loading ? 'Paused' : 'Loading photos', percentComplete: percentComplete }),
            React.createElement(FocusZone, null,
                React.createElement(Stack, { horizontal: true, wrap: true, tokens: photoStackTokens, styles: photoStackStyles, slots: { inner: { component: 'ul' } } }, photos.slice(0, total).map(function (photo, index) { return (React.createElement("li", { key: index, className: photoCellClass, "aria-posinset": index + 1, "aria-setsize": PHOTO_COUNT, "aria-label": "Photo", "data-is-focusable": true },
                    React.createElement(Image, { src: photo.url, width: photo.width, height: photo.height }))); })))),
        loading && React.createElement(Announced, { message: announcedMessage })));
};
//# sourceMappingURL=Announced.LazyLoading.Example.js.map