define(["require", "exports", "tslib", "react", "@fluentui/example-data", "@fluentui/react", "@fluentui/react-avatar", "@fluentui/react-hooks", "@fluentui/react-icons-mdl2", "@fluentui/react-make-styles", "../utils/StoryExample"], function (require, exports, tslib_1, React, example_data_1, react_1, react_avatar_1, react_hooks_1, react_icons_mdl2_1, react_make_styles_1, StoryExample_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.AvatarPlayground = exports.RobotExample = exports.CustomSizes = exports.ActiveAnimation = exports.Active = exports.Colors = exports.AllSizes = exports.Basic = void 0;
    var examples = tslib_1.__assign(tslib_1.__assign({}, example_data_1.AvatarExamples), { icon: [
            /* eslint-disable react/jsx-key */
            React.createElement(react_icons_mdl2_1.GroupIcon, null),
            React.createElement(react_icons_mdl2_1.CatIcon, null),
            React.createElement(react_icons_mdl2_1.CalendarIcon, null),
            React.createElement(react_icons_mdl2_1.RoomIcon, null),
            React.createElement(react_icons_mdl2_1.IDBadgeIcon, null),
            React.createElement(react_icons_mdl2_1.TelemarketerIcon, null),
        ], badge: [
            'available',
            'away',
            'busy',
            'doNotDisturb',
            'offline',
            'outOfOffice',
            { status: 'available', outOfOffice: true },
            { status: 'away', outOfOffice: true },
            { status: 'busy', outOfOffice: true },
            { status: 'doNotDisturb', outOfOffice: true },
            { status: 'offline', outOfOffice: true },
            { status: 'outOfOffice', outOfOffice: true },
        ] });
    var Basic = function () { return (React.createElement(React.Fragment, null,
        React.createElement(StoryExample_1.StoryExample, { title: "Simple examples" },
            React.createElement(react_avatar_1.Avatar, null),
            React.createElement(react_avatar_1.Avatar, { name: examples.name[0] }),
            React.createElement(react_avatar_1.Avatar, { size: 40, icon: React.createElement(react_icons_mdl2_1.IDBadgeIcon, null) }),
            React.createElement(react_avatar_1.Avatar, { size: 72, name: examples.name[0], image: examples.image[0] })),
        React.createElement(StoryExample_1.StoryExample, { title: "Square" },
            React.createElement(react_avatar_1.Avatar, { square: true, name: "Group" }),
            React.createElement(react_avatar_1.Avatar, { square: true, icon: React.createElement(react_icons_mdl2_1.GroupIcon, null) })),
        React.createElement(StoryExample_1.StoryExample, { title: "Badges" },
            React.createElement(react_avatar_1.Avatar, { name: examples.name[1], badge: "available" }),
            React.createElement(react_avatar_1.Avatar, { name: examples.name[2], badge: { status: 'available', outOfOffice: true } }),
            React.createElement(react_avatar_1.Avatar, { name: examples.name[3], image: examples.image[3], badge: "offline" })),
        React.createElement(StoryExample_1.StoryExample, { title: "Size" },
            React.createElement(react_avatar_1.Avatar, { size: 20, name: examples.name[4], image: examples.image[4], badge: "offline" }),
            React.createElement(react_avatar_1.Avatar, { size: 48, name: examples.name[5], image: examples.image[5], badge: "available" }),
            React.createElement(react_avatar_1.Avatar, { size: 96, name: examples.name[6], image: examples.image[6], badge: "away" })),
        React.createElement(StoryExample_1.StoryExample, { title: "Brand color" },
            React.createElement(react_avatar_1.Avatar, { color: "brand", name: examples.name[4], badge: "doNotDisturb" }),
            React.createElement(react_avatar_1.Avatar, { color: "brand", name: examples.name[5], icon: examples.icon[5], badge: "available" })),
        React.createElement(StoryExample_1.StoryExample, { title: "Colorful" },
            React.createElement(react_avatar_1.Avatar, { color: "colorful", name: examples.name[13] }),
            React.createElement(react_avatar_1.Avatar, { color: "colorful", name: examples.name[14] }),
            React.createElement(react_avatar_1.Avatar, { color: "colorful", name: examples.name[15] }),
            React.createElement(react_avatar_1.Avatar, { color: "colorful", name: examples.name[16] }),
            React.createElement(react_avatar_1.Avatar, { color: "colorful", name: examples.name[17] }),
            React.createElement(react_avatar_1.Avatar, { color: "colorful", idForColor: examples.name[18] }),
            React.createElement(react_avatar_1.Avatar, { color: "colorful", idForColor: examples.name[19] }),
            React.createElement(react_avatar_1.Avatar, { color: "colorful", idForColor: examples.name[20] }),
            React.createElement(react_avatar_1.Avatar, { color: "colorful", idForColor: examples.name[21] }),
            React.createElement(react_avatar_1.Avatar, { color: "colorful", idForColor: examples.name[22] })),
        React.createElement(StoryExample_1.StoryExample, { title: "Active/inactive" },
            React.createElement(react_1.Stack, { horizontal: true, wrap: true, tokens: { childrenGap: 16 } },
                React.createElement(react_avatar_1.Avatar, { name: examples.name[7], active: "active" }),
                React.createElement(react_avatar_1.Avatar, { image: examples.image[8], active: "active", activeDisplay: "shadow" }),
                React.createElement(react_avatar_1.Avatar, { image: examples.image[9], active: "active", activeDisplay: "glow" }),
                React.createElement(react_avatar_1.Avatar, { image: examples.image[10], active: "active", activeDisplay: "ring-shadow" }),
                React.createElement(react_avatar_1.Avatar, { image: examples.image[11], active: "active", activeDisplay: "ring-glow" }),
                React.createElement(react_avatar_1.Avatar, { image: examples.image[12], active: "inactive" }))))); };
    exports.Basic = Basic;
    var AllSizes = function () { return (React.createElement(React.Fragment, null,
        React.createElement(StoryExample_1.StoryExample, { title: "Image" },
            React.createElement(AvatarExampleList, { images: examples.image })),
        React.createElement(StoryExample_1.StoryExample, { title: "Image, square" },
            React.createElement(AvatarExampleList, { images: examples.image, square: true, exampleIndex: 1 })),
        React.createElement(StoryExample_1.StoryExample, { title: "Initials" },
            React.createElement(AvatarExampleList, { names: examples.name })),
        React.createElement(StoryExample_1.StoryExample, { title: "Initials, square" },
            React.createElement(AvatarExampleList, { names: examples.name, square: true, exampleIndex: 1 })),
        React.createElement(StoryExample_1.StoryExample, { title: "Icon" },
            React.createElement(AvatarExampleList, { icons: examples.icon })),
        React.createElement(StoryExample_1.StoryExample, { title: "Icon, square" },
            React.createElement(AvatarExampleList, { icons: examples.icon, square: true, exampleIndex: 1 })))); };
    exports.AllSizes = AllSizes;
    var Colors = function () { return (React.createElement(React.Fragment, null,
        React.createElement(StoryExample_1.StoryExample, { title: "Neutral" },
            React.createElement(react_avatar_1.Avatar, { size: 40, color: "neutral" }),
            React.createElement(react_avatar_1.Avatar, { size: 40, color: "neutral", name: examples.name[0] })),
        React.createElement(StoryExample_1.StoryExample, { title: "Brand" },
            React.createElement(react_avatar_1.Avatar, { size: 40, color: "brand" }),
            React.createElement(react_avatar_1.Avatar, { size: 40, color: "brand", name: examples.name[0] })),
        React.createElement(StoryExample_1.StoryExample, { title: "Colorful" }, examples.namedColors.map(function (color) { return (React.createElement(react_avatar_1.Avatar, { size: 40, color: color, key: color })); })),
        React.createElement(StoryExample_1.StoryExample, { title: "Colorful, hash of name" }, examples.name.map(function (name) { return (React.createElement(react_avatar_1.Avatar, { size: 40, color: "colorful", name: name, key: name })); })))); };
    exports.Colors = Colors;
    var Active = function () { return (React.createElement(React.Fragment, null,
        React.createElement(StoryExample_1.StoryExample, { title: "ring" },
            React.createElement(AvatarExampleList, { images: examples.image, active: "active", activeDisplay: "ring", exampleIndex: 2 })),
        React.createElement(StoryExample_1.StoryExample, { title: "ring-shadow" },
            React.createElement(AvatarExampleList, { images: examples.image, active: "active", activeDisplay: "ring-shadow", exampleIndex: 3 })),
        React.createElement(StoryExample_1.StoryExample, { title: "ring-glow" },
            React.createElement(AvatarExampleList, { images: examples.image, active: "active", activeDisplay: "ring-glow", exampleIndex: 4 })),
        React.createElement(StoryExample_1.StoryExample, { title: "shadow" },
            React.createElement(AvatarExampleList, { images: examples.image, active: "active", activeDisplay: "shadow", exampleIndex: 5 })),
        React.createElement(StoryExample_1.StoryExample, { title: "glow" },
            React.createElement(AvatarExampleList, { images: examples.image, active: "active", activeDisplay: "glow", exampleIndex: 6 })),
        React.createElement(StoryExample_1.StoryExample, { title: "inactive" },
            React.createElement(AvatarExampleList, { images: examples.image, active: "inactive", exampleIndex: 7 })))); };
    exports.Active = Active;
    var ActiveAnimation = function () {
        var _a = React.useState(false), active = _a[0], setActive = _a[1];
        var _b = useValueSelectorState(examples.size, 96), size = _b[0], nextSize = _b[1], prevSize = _b[2];
        var _c = useValueSelectorState(examples.activeDisplay, 'ring'), activeDisplay = _c[0], nextActiveDisplay = _c[1], prevActiveDisplay = _c[2];
        var _d = useValueSelectorState(['image', 'icon', 'label'], 'image'), display = _d[0], nextDisplay = _d[1], prevDisplay = _d[2];
        React.useEffect(function () {
            var id = setTimeout(function () { return setActive(true); }, 500);
            return function () { return clearTimeout(id); };
        }, []);
        return (React.createElement(react_1.ThemeProvider, null,
            React.createElement(react_1.Stack, null,
                React.createElement("div", { style: { width: 200, height: 200, display: 'flex', alignItems: 'center', justifyContent: 'center' } },
                    React.createElement(react_avatar_1.Avatar, { size: size, active: active ? 'active' : 'inactive', activeDisplay: activeDisplay, name: examples.name[10], image: display === 'image' ? examples.image[10] : undefined, icon: display === 'icon' ? React.createElement(react_icons_mdl2_1.ContactIcon, null) : undefined })),
                React.createElement(react_1.Stack, { tokens: { childrenGap: 8, maxWidth: 220 } },
                    React.createElement(react_1.PrimaryButton, { onClick: React.useCallback(function () { return setActive(function (a) { return !a; }); }, []) }, "Toggle Active"),
                    React.createElement(react_1.SpinButton, { label: "activeDisplay", value: activeDisplay, onIncrement: nextActiveDisplay, onDecrement: prevActiveDisplay }),
                    React.createElement(react_1.SpinButton, { label: "display", value: display, onIncrement: nextDisplay, onDecrement: prevDisplay }),
                    React.createElement(react_1.SpinButton, { label: "size", value: "" + size, onIncrement: nextSize, onDecrement: prevSize })))));
    };
    exports.ActiveAnimation = ActiveAnimation;
    var CustomSizes = function () { return (React.createElement(StoryExample_1.StoryExample, { title: "Custom size" },
        React.createElement(react_avatar_1.Avatar, { name: examples.name[11], badge: "available", size: 20, style: { width: '13px', height: '13px' } }),
        React.createElement(react_avatar_1.Avatar, { image: examples.image[12], badge: "away", size: 20, style: { width: '21px', height: '21px' } }),
        React.createElement(react_avatar_1.Avatar, { name: examples.name[13], badge: "busy", size: 32, style: { width: '34px', height: '34px' } }),
        React.createElement(react_avatar_1.Avatar, { image: examples.image[14], badge: "doNotDisturb", size: 48, style: { width: '55px', height: '55px' } }),
        React.createElement(react_avatar_1.Avatar, { name: examples.name[15], badge: "offline", size: 72, style: { width: '89px', height: '89px' } }),
        React.createElement(react_avatar_1.Avatar, { image: examples.image[16], badge: "outOfOffice", size: 128, style: { width: '144px', height: '144px' } }))); };
    exports.CustomSizes = CustomSizes;
    var useRobotAvatarStyles = react_make_styles_1.makeStyles({
        root: { borderRadius: '0' },
        20: { width: '24px' },
        24: { width: '28px' },
        28: { width: '32px' },
        32: { width: '36px' },
        36: { width: '40px' },
        40: { width: '44px' },
        48: { width: '56px' },
        56: { width: '64px' },
        64: { width: '72px' },
        72: { width: '80px' },
        96: { width: '108px' },
        120: { width: '128px' },
        128: { width: '136px' },
        label: {
            background: "url('" + examples.hexagon + "') 0px/contain no-repeat",
            borderRadius: '0',
        },
    });
    var RobotAvatar = React.forwardRef(function (props, ref) {
        var state = react_avatar_1.useAvatar(props, ref, {
            icon: React.createElement(react_icons_mdl2_1.ChatBotIcon, null),
        });
        var styles = useRobotAvatarStyles();
        state.className = react_make_styles_1.mergeClasses(styles.root, styles[state.size], state.className);
        state.label.className = react_make_styles_1.mergeClasses(styles.label, state.label.className);
        react_avatar_1.useAvatarStyles(state);
        return react_avatar_1.renderAvatar(state);
    });
    var RobotExample = function () {
        return (React.createElement(StoryExample_1.StoryExample, { title: "Robot Example" },
            React.createElement(react_1.Stack, { wrap: true, horizontal: true, tokens: { childrenGap: 24 } },
                React.createElement(RobotAvatar, { size: 20 }),
                React.createElement(RobotAvatar, { size: 32 }),
                React.createElement(RobotAvatar, { size: 48 }),
                React.createElement(RobotAvatar, { size: 64 }),
                React.createElement(RobotAvatar, { size: 96 }),
                React.createElement(RobotAvatar, { size: 128 }))));
    };
    exports.RobotExample = RobotExample;
    var AvatarPlayground = function () {
        var _a = useValueSelectorState(examples.nameAndImage), nameAndImage = _a[0], nextNameAndImage = _a[1], prevNameAndImage = _a[2];
        var propSelectors = [
            useValueSelector('size', useValueSelectorState(examples.size, 96), true),
            useValueSelector('square', useValueSelectorState([true, false])),
            useValueSelector('badge', useValueSelectorState(examples.badge), false, badgeToString),
            useValueSelector('name', [nameAndImage.name, nextNameAndImage, prevNameAndImage], true),
            useValueSelector('image', [nameAndImage.image, nextNameAndImage, prevNameAndImage], true, getFilenameFromUrl),
            useValueSelector('icon', useValueSelectorState(examples.icon), false, iconToString),
            useValueSelector('color', useValueSelectorState(tslib_1.__spreadArrays(examples.color, examples.namedColors))),
            useValueSelector('active', useValueSelectorState(['active', 'inactive'])),
            useValueSelector('activeDisplay', useValueSelectorState(examples.activeDisplay)),
        ];
        // Build an AvatarProps object with the selected property values
        var propValues = {};
        propSelectors.forEach(function (_a) {
            var assignValue = _a.assignValue;
            return assignValue(propValues);
        });
        return (React.createElement("div", { style: { display: 'flex' } },
            React.createElement("div", { style: { width: '225px', height: '225px', display: 'flex', alignItems: 'center', justifyContent: 'center' } },
                React.createElement(react_avatar_1.Avatar, tslib_1.__assign({}, propValues))),
            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', fontFamily: 'Consolas, monospaced', fontSize: '14px' } },
                propSelectors.map(function (p) { return p.renderSelector(); }),
                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', marginTop: '20px' } }, "<Avatar ",
                    propSelectors.map(function (p) { return p.renderValue(); }), "/>"))));
    };
    exports.AvatarPlayground = AvatarPlayground;
    //
    // Helpers
    //
    /**
     * Generate a list of Avatars with sample properties
     */
    var AvatarExampleList = function (props) {
        var names = props.names, images = props.images, icons = props.icons, _a = props.exampleIndex, exampleIndex = _a === void 0 ? 0 : _a, restOfProps = tslib_1.__rest(props, ["names", "images", "icons", "exampleIndex"]);
        var offset = exampleIndex * examples.size.length;
        return (React.createElement(react_1.Stack, { wrap: true, horizontal: true, tokens: { childrenGap: 24 } }, examples.size.map(function (size, i) { return (React.createElement(react_avatar_1.Avatar, tslib_1.__assign({ key: size, size: size, name: names && names[(i + offset) % names.length], image: images && images[(i + offset) % images.length], icon: icons && icons[(i + offset) % icons.length], badge: examples.badge[(i + offset) % examples.badge.length] }, restOfProps))); })));
    };
    var iconToString = function (icon) { return "<" + (icon === null || icon === void 0 ? void 0 : icon.type.displayName) + " />"; };
    var badgeToString = function (badge) {
        return typeof badge === 'object' ? "{ status: '" + badge.status + "', outOfOffice: " + badge.outOfOffice + " }" : "" + badge;
    };
    var getFilenameFromUrl = function (url) { return url.substring(url.lastIndexOf('/') + 1); };
    /**
     * Select a value from an array of values, with next/previous methods
     */
    var useValueSelectorState = function (values, initialValue) {
        if (initialValue === void 0) { initialValue = values[0]; }
        var count = values.length;
        var _a = React.useState(function () { return values.indexOf(initialValue); }), index = _a[0], setIndex = _a[1];
        var next = React.useCallback(function () { return setIndex(function (i) { return (i + 1) % count; }); }, [count]);
        var prev = React.useCallback(function () { return setIndex(function (i) { return (i - 1 + count) % count; }); }, [count]);
        return [values[index], next, prev];
    };
    /**
     * Create a selector UI for a property value, allowing the user to toggle among the available property values
     */
    var useValueSelector = function (name, _a, initialEnabled, valueToString) {
        var value = _a[0], next = _a[1], prev = _a[2];
        if (initialEnabled === void 0) { initialEnabled = false; }
        if (valueToString === void 0) { valueToString = function (v) { return "" + v; }; }
        var _b = react_hooks_1.useBoolean(initialEnabled), enabled = _b[0], toggleEnabled = _b[1].toggle;
        return {
            /** Assign this property's value to the given props object, if the property is set */
            assignValue: function (props) { return enabled && (props[name] = value); },
            /** Render the UI to select the property value */
            renderSelector: function () { return (React.createElement("div", { style: { opacity: !enabled ? '50%' : undefined } },
                React.createElement("button", { onClick: enabled ? prev : toggleEnabled }, "<"),
                React.createElement("button", { onClick: enabled ? next : toggleEnabled }, ">"),
                React.createElement("input", { id: "prop_" + name, type: "checkbox", onChange: toggleEnabled, checked: enabled }),
                React.createElement("label", { htmlFor: "prop_" + name }, name + ": " + (enabled ? "" + valueToString(value) : "(unset)")))); },
            /** Render a span with propName="propValue" inside, if the property is set */
            renderValue: function () {
                var quotes = typeof value === 'string' ? '""' : '{}';
                return enabled && React.createElement("span", null, name + "=" + quotes[0] + valueToString(value) + quotes[1]);
            },
        };
    };
});
//# sourceMappingURL=Avatar.stories.js.map