import { __assign, __rest, __spreadArrays } from "tslib";
import * as React from 'react';
import { AvatarExamples } from '@fluentui/example-data';
import { PrimaryButton, SpinButton, Stack, ThemeProvider } from '@fluentui/react';
import { Avatar, renderAvatar, useAvatar, useAvatarStyles } from '@fluentui/react-avatar';
import { useBoolean } from '@fluentui/react-hooks';
import { CalendarIcon, CatIcon, ChatBotIcon, ContactIcon, GroupIcon, IDBadgeIcon, RoomIcon, TelemarketerIcon, } from '@fluentui/react-icons-mdl2';
import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';
import { StoryExample } from '../utils/StoryExample';
var examples = __assign(__assign({}, AvatarExamples), { icon: [
        /* eslint-disable react/jsx-key */
        React.createElement(GroupIcon, null),
        React.createElement(CatIcon, null),
        React.createElement(CalendarIcon, null),
        React.createElement(RoomIcon, null),
        React.createElement(IDBadgeIcon, null),
        React.createElement(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 },
    ] });
export var Basic = function () { return (React.createElement(React.Fragment, null,
    React.createElement(StoryExample, { title: "Simple examples" },
        React.createElement(Avatar, null),
        React.createElement(Avatar, { name: examples.name[0] }),
        React.createElement(Avatar, { size: 40, icon: React.createElement(IDBadgeIcon, null) }),
        React.createElement(Avatar, { size: 72, name: examples.name[0], image: examples.image[0] })),
    React.createElement(StoryExample, { title: "Square" },
        React.createElement(Avatar, { square: true, name: "Group" }),
        React.createElement(Avatar, { square: true, icon: React.createElement(GroupIcon, null) })),
    React.createElement(StoryExample, { title: "Badges" },
        React.createElement(Avatar, { name: examples.name[1], badge: "available" }),
        React.createElement(Avatar, { name: examples.name[2], badge: { status: 'available', outOfOffice: true } }),
        React.createElement(Avatar, { name: examples.name[3], image: examples.image[3], badge: "offline" })),
    React.createElement(StoryExample, { title: "Size" },
        React.createElement(Avatar, { size: 20, name: examples.name[4], image: examples.image[4], badge: "offline" }),
        React.createElement(Avatar, { size: 48, name: examples.name[5], image: examples.image[5], badge: "available" }),
        React.createElement(Avatar, { size: 96, name: examples.name[6], image: examples.image[6], badge: "away" })),
    React.createElement(StoryExample, { title: "Brand color" },
        React.createElement(Avatar, { color: "brand", name: examples.name[4], badge: "doNotDisturb" }),
        React.createElement(Avatar, { color: "brand", name: examples.name[5], icon: examples.icon[5], badge: "available" })),
    React.createElement(StoryExample, { title: "Colorful" },
        React.createElement(Avatar, { color: "colorful", name: examples.name[13] }),
        React.createElement(Avatar, { color: "colorful", name: examples.name[14] }),
        React.createElement(Avatar, { color: "colorful", name: examples.name[15] }),
        React.createElement(Avatar, { color: "colorful", name: examples.name[16] }),
        React.createElement(Avatar, { color: "colorful", name: examples.name[17] }),
        React.createElement(Avatar, { color: "colorful", idForColor: examples.name[18] }),
        React.createElement(Avatar, { color: "colorful", idForColor: examples.name[19] }),
        React.createElement(Avatar, { color: "colorful", idForColor: examples.name[20] }),
        React.createElement(Avatar, { color: "colorful", idForColor: examples.name[21] }),
        React.createElement(Avatar, { color: "colorful", idForColor: examples.name[22] })),
    React.createElement(StoryExample, { title: "Active/inactive" },
        React.createElement(Stack, { horizontal: true, wrap: true, tokens: { childrenGap: 16 } },
            React.createElement(Avatar, { name: examples.name[7], active: "active" }),
            React.createElement(Avatar, { image: examples.image[8], active: "active", activeDisplay: "shadow" }),
            React.createElement(Avatar, { image: examples.image[9], active: "active", activeDisplay: "glow" }),
            React.createElement(Avatar, { image: examples.image[10], active: "active", activeDisplay: "ring-shadow" }),
            React.createElement(Avatar, { image: examples.image[11], active: "active", activeDisplay: "ring-glow" }),
            React.createElement(Avatar, { image: examples.image[12], active: "inactive" }))))); };
export var AllSizes = function () { return (React.createElement(React.Fragment, null,
    React.createElement(StoryExample, { title: "Image" },
        React.createElement(AvatarExampleList, { images: examples.image })),
    React.createElement(StoryExample, { title: "Image, square" },
        React.createElement(AvatarExampleList, { images: examples.image, square: true, exampleIndex: 1 })),
    React.createElement(StoryExample, { title: "Initials" },
        React.createElement(AvatarExampleList, { names: examples.name })),
    React.createElement(StoryExample, { title: "Initials, square" },
        React.createElement(AvatarExampleList, { names: examples.name, square: true, exampleIndex: 1 })),
    React.createElement(StoryExample, { title: "Icon" },
        React.createElement(AvatarExampleList, { icons: examples.icon })),
    React.createElement(StoryExample, { title: "Icon, square" },
        React.createElement(AvatarExampleList, { icons: examples.icon, square: true, exampleIndex: 1 })))); };
export var Colors = function () { return (React.createElement(React.Fragment, null,
    React.createElement(StoryExample, { title: "Neutral" },
        React.createElement(Avatar, { size: 40, color: "neutral" }),
        React.createElement(Avatar, { size: 40, color: "neutral", name: examples.name[0] })),
    React.createElement(StoryExample, { title: "Brand" },
        React.createElement(Avatar, { size: 40, color: "brand" }),
        React.createElement(Avatar, { size: 40, color: "brand", name: examples.name[0] })),
    React.createElement(StoryExample, { title: "Colorful" }, examples.namedColors.map(function (color) { return (React.createElement(Avatar, { size: 40, color: color, key: color })); })),
    React.createElement(StoryExample, { title: "Colorful, hash of name" }, examples.name.map(function (name) { return (React.createElement(Avatar, { size: 40, color: "colorful", name: name, key: name })); })))); };
export var Active = function () { return (React.createElement(React.Fragment, null,
    React.createElement(StoryExample, { title: "ring" },
        React.createElement(AvatarExampleList, { images: examples.image, active: "active", activeDisplay: "ring", exampleIndex: 2 })),
    React.createElement(StoryExample, { title: "ring-shadow" },
        React.createElement(AvatarExampleList, { images: examples.image, active: "active", activeDisplay: "ring-shadow", exampleIndex: 3 })),
    React.createElement(StoryExample, { title: "ring-glow" },
        React.createElement(AvatarExampleList, { images: examples.image, active: "active", activeDisplay: "ring-glow", exampleIndex: 4 })),
    React.createElement(StoryExample, { title: "shadow" },
        React.createElement(AvatarExampleList, { images: examples.image, active: "active", activeDisplay: "shadow", exampleIndex: 5 })),
    React.createElement(StoryExample, { title: "glow" },
        React.createElement(AvatarExampleList, { images: examples.image, active: "active", activeDisplay: "glow", exampleIndex: 6 })),
    React.createElement(StoryExample, { title: "inactive" },
        React.createElement(AvatarExampleList, { images: examples.image, active: "inactive", exampleIndex: 7 })))); };
export 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(ThemeProvider, null,
        React.createElement(Stack, null,
            React.createElement("div", { style: { width: 200, height: 200, display: 'flex', alignItems: 'center', justifyContent: 'center' } },
                React.createElement(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(ContactIcon, null) : undefined })),
            React.createElement(Stack, { tokens: { childrenGap: 8, maxWidth: 220 } },
                React.createElement(PrimaryButton, { onClick: React.useCallback(function () { return setActive(function (a) { return !a; }); }, []) }, "Toggle Active"),
                React.createElement(SpinButton, { label: "activeDisplay", value: activeDisplay, onIncrement: nextActiveDisplay, onDecrement: prevActiveDisplay }),
                React.createElement(SpinButton, { label: "display", value: display, onIncrement: nextDisplay, onDecrement: prevDisplay }),
                React.createElement(SpinButton, { label: "size", value: "" + size, onIncrement: nextSize, onDecrement: prevSize })))));
};
export var CustomSizes = function () { return (React.createElement(StoryExample, { title: "Custom size" },
    React.createElement(Avatar, { name: examples.name[11], badge: "available", size: 20, style: { width: '13px', height: '13px' } }),
    React.createElement(Avatar, { image: examples.image[12], badge: "away", size: 20, style: { width: '21px', height: '21px' } }),
    React.createElement(Avatar, { name: examples.name[13], badge: "busy", size: 32, style: { width: '34px', height: '34px' } }),
    React.createElement(Avatar, { image: examples.image[14], badge: "doNotDisturb", size: 48, style: { width: '55px', height: '55px' } }),
    React.createElement(Avatar, { name: examples.name[15], badge: "offline", size: 72, style: { width: '89px', height: '89px' } }),
    React.createElement(Avatar, { image: examples.image[16], badge: "outOfOffice", size: 128, style: { width: '144px', height: '144px' } }))); };
var useRobotAvatarStyles = 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 = useAvatar(props, ref, {
        icon: React.createElement(ChatBotIcon, null),
    });
    var styles = useRobotAvatarStyles();
    state.className = mergeClasses(styles.root, styles[state.size], state.className);
    state.label.className = mergeClasses(styles.label, state.label.className);
    useAvatarStyles(state);
    return renderAvatar(state);
});
export var RobotExample = function () {
    return (React.createElement(StoryExample, { title: "Robot Example" },
        React.createElement(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 }))));
};
export 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(__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(Avatar, __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(); }), "/>"))));
};
//
// 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 = __rest(props, ["names", "images", "icons", "exampleIndex"]);
    var offset = exampleIndex * examples.size.length;
    return (React.createElement(Stack, { wrap: true, horizontal: true, tokens: { childrenGap: 24 } }, examples.size.map(function (size, i) { return (React.createElement(Avatar, __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 = 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