"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IconSvgFactoryExample = void 0;
var React = require("react");
var ReactIcons = require("@fluentui/react-icons-mdl2");
var Button_1 = require("@fluentui/react/lib-commonjs/Button");
var Styling_1 = require("@fluentui/react/lib-commonjs/Styling");
var classes = Styling_1.mergeStyleSets({
    cell: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        margin: '80px',
        float: 'left',
        height: '50px',
        width: '50px',
    },
    icon: {
        fontSize: '50px',
    },
    code: {
        background: '#f2f2f2',
        borderRadius: '4px',
        padding: '4px',
    },
    navigationText: {
        width: 100,
        margin: '0 5px',
    },
});
var icons = Object.keys(ReactIcons).reduce(function (acc, exportName) {
    var _a;
    if ((_a = ReactIcons[exportName]) === null || _a === void 0 ? void 0 : _a.displayName) {
        acc.push(ReactIcons[exportName]);
    }
    return acc;
}, []);
var numOfIcons = icons.length;
var numOfPages = parseInt((numOfIcons / 100).toString(), 10) + (numOfIcons % 100 > 0 ? 1 : 0);
var IconSvgFactoryExample = function () {
    var _a = React.useState(1), page = _a[0], setPage = _a[1];
    var nextPage = function () { return setPage(page + 1); };
    var prevPage = function () { return setPage(page - 1); };
    return (React.createElement("div", null,
        React.createElement("div", null,
            React.createElement(Button_1.PrimaryButton
            // eslint-disable-next-line react/jsx-no-bind
            , { 
                // eslint-disable-next-line react/jsx-no-bind
                onClick: prevPage, disabled: page === 1 }, "Prev"),
            React.createElement("span", { className: classes.navigationText },
                "Page ",
                page,
                " of ",
                numOfPages),
            React.createElement(Button_1.PrimaryButton
            // eslint-disable-next-line react/jsx-no-bind
            , { 
                // eslint-disable-next-line react/jsx-no-bind
                onClick: nextPage, disabled: page === numOfPages }, "Next")),
        React.createElement("div", null, icons
            .slice((page - 1) * 100, (page - 1) * 100 + 100)
            .map(function (Icon) {
            var _a;
            return (React.createElement("div", { key: Icon.displayName, className: classes.cell },
                React.createElement(Icon, { "aria-label": (_a = Icon.displayName) === null || _a === void 0 ? void 0 : _a.replace('Icon', ''), className: classes.icon }),
                React.createElement("br", null),
                React.createElement("code", { className: classes.code }, Icon.displayName)));
        }))));
};
exports.IconSvgFactoryExample = IconSvgFactoryExample;
//# sourceMappingURL=Icon.SvgFactory.Example.js.map