define(["require", "exports", "react", "@fluentui/react/lib/Announced", "@fluentui/react/lib/Utilities", "@fluentui/react/lib/Image", "@fluentui/react/lib/FocusZone", "@fluentui/react/lib/Text", "@fluentui/react/lib/Stack", "@fluentui/react/lib/Button", "@fluentui/react/lib/ProgressIndicator", "@fluentui/react/lib/Styling", "@fluentui/react-hooks"], function (require, exports, React, Announced_1, Utilities_1, Image_1, FocusZone_1, Text_1, Stack_1, Button_1, ProgressIndicator_1, Styling_1, react_hooks_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.AnnouncedLazyLoadingExample = void 0;
    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 = Styling_1.mergeStyles({
        display: 'block',
        boxSizing: 'border-box',
        width: 100,
        height: 100,
    });
    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 = react_hooks_1.useBoolean(false), loading = _c[0], toggleLoading = _c[1].toggle;
        var percentComplete = total / PHOTO_COUNT;
        var _d = react_hooks_1.useSetInterval(), setInterval = _d.setInterval, clearInterval = _d.clearInterval;
        var photos = react_hooks_1.useConst(function () {
            var width = 100;
            var height = 100;
            return Utilities_1.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_1.Stack, { tokens: stackTokens },
                React.createElement(Text_1.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(Button_1.DefaultButton, { text: loading ? 'Cancel' : 'Load photos', onClick: toggleLoading, styles: defaultButtonStyles }),
                React.createElement(ProgressIndicator_1.ProgressIndicator, { label: !loading ? 'Paused' : 'Loading photos', percentComplete: percentComplete }),
                React.createElement(FocusZone_1.FocusZone, null,
                    React.createElement(Stack_1.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_1.Image, { src: photo.url, width: photo.width, height: photo.height }))); })))),
            loading && React.createElement(Announced_1.Announced, { message: announcedMessage })));
    };
    exports.AnnouncedLazyLoadingExample = AnnouncedLazyLoadingExample;
});
//# sourceMappingURL=Announced.LazyLoading.Example.js.map