"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var react_avatar_1 = require("@fluentui/react-avatar");
var react_icons_1 = require("@fluentui/react-icons");
var StoryExample_1 = require("../utils/StoryExample");
var imageRoot = 'http://fabricweb.azureedge.net/fabric-website/assets/images/avatar/large';
var examplePeople = [
    { name: 'Ade Q', image: imageRoot + '/ade.jpg' },
    { name: 'Christain W', image: imageRoot + '/christian.jpg' },
    { name: 'Daniel E', image: imageRoot + '/daniel.jpg' },
    { name: 'Elliot R', image: imageRoot + '/elliot.jpg' },
    { name: 'Elyse T', image: imageRoot + '/elyse.png' },
    { name: 'Helen Y', image: imageRoot + '/helen.jpg' },
    { name: 'Jenny U', image: imageRoot + '/jenny.jpg' },
    { name: 'Joe I', image: imageRoot + '/joe.jpg' },
    { name: 'Justen O', image: imageRoot + '/justen.jpg' },
    { name: 'Kristy P', image: imageRoot + '/kristy.png' },
    { name: 'Laura A', image: imageRoot + '/laura.jpg' },
    { name: 'Matt S', image: imageRoot + '/matt.jpg' },
    { name: 'Matthew D', image: imageRoot + '/matthew.png' },
    { name: 'Molly F', image: imageRoot + '/molly.png' },
    { name: 'Nan G', image: imageRoot + '/nan.jpg' },
    { name: 'Patrick H', image: imageRoot + '/patrick.png' },
    { name: 'Rachel J', image: imageRoot + '/rachel.png' },
    { name: 'Steve K', image: imageRoot + '/steve.jpg' },
    { name: 'Stevie L', image: imageRoot + '/stevie.jpg' },
    { name: 'Tom Z', image: imageRoot + '/tom.jpg' },
    { name: 'Veronika X', image: imageRoot + '/veronika.jpg' },
    { name: 'Zoe C', image: imageRoot + '/zoe.jpg' },
];
/** Values used for the example avatars */
var examples = {
    names: examplePeople.map(function (p) { return p.name; }),
    images: examplePeople.map(function (p) { return p.image; }),
    icons: [
        /* eslint-disable react/jsx-key */
        React.createElement(react_icons_1.GroupIcon, null),
        React.createElement(react_icons_1.CatIcon, null),
        React.createElement(react_icons_1.CalendarIcon, null),
        React.createElement(react_icons_1.RoomIcon, null),
        React.createElement(react_icons_1.IDBadgeIcon, null),
        React.createElement(react_icons_1.TelemarketerIcon, null),
    ],
    badges: [
        'success',
        'warning',
        'error',
        'info',
        { state: 'success', icon: { as: react_icons_1.SkypeCheckIcon } },
        { state: 'warning', icon: { as: react_icons_1.SkypeClockIcon } },
        { state: 'error', icon: { as: react_icons_1.SkypeMinusIcon } },
        { state: 'info', icon: { as: react_icons_1.SkypeArrowIcon } },
    ],
    display: ['label', 'image', 'icon'],
    activeDisplay: ['ring', 'ring-shadow', 'ring-glow', 'shadow', 'glow'],
    customSize: [19, 23, 28, 34, 41, 49, 58, 68, 79, 91, 104, 118, 133, 149, 166, 184],
};
var iconToString = function (icon) { var _a; return "<" + ((_a = icon) === null || _a === void 0 ? void 0 : _a.type.displayName) + " />"; };
var badgeToString = function (badge) {
    return typeof badge === 'object' ? "{ state: '" + badge.state + "', icon: { as: " + badge.icon.as.displayName + " } }" : "" + badge;
};
exports.BasicExamples = 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: "Joe B" }),
            React.createElement(react_avatar_1.Avatar, { icon: React.createElement(react_icons_1.IDBadgeIcon, null) }),
            React.createElement(react_avatar_1.Avatar, { name: "Joe B", image: imageRoot + "/joe.jpg" })),
        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_1.GroupIcon, null) })),
        React.createElement(StoryExample_1.StoryExample, { title: "Badges" },
            React.createElement(react_avatar_1.Avatar, { name: "Matthew Doe", badge: "warning" }),
            React.createElement(react_avatar_1.Avatar, { name: "Matthew Doe", badge: "success" }),
            React.createElement(react_avatar_1.Avatar, { name: "Elyse T", image: imageRoot + "/elyse.png", badge: { state: 'success', icon: { as: react_icons_1.SkypeCheckIcon } } })),
        React.createElement(StoryExample_1.StoryExample, { title: "Size" },
            React.createElement(react_avatar_1.Avatar, { size: 20, name: "Tom Z", image: imageRoot + "/tom.jpg", badge: "info" }),
            React.createElement(react_avatar_1.Avatar, { size: 48, name: "Joe B", image: imageRoot + "/joe.jpg", badge: "success" }),
            React.createElement(react_avatar_1.Avatar, { size: 96, name: "Rachel J", image: imageRoot + "/rachel.png", badge: "warning" })),
        React.createElement(StoryExample_1.StoryExample, { title: "Active/inactive" },
            React.createElement(react_avatar_1.Avatar, { name: "Tom Z", active: true }),
            React.createElement(react_avatar_1.Avatar, { image: imageRoot + "/molly.png", active: true, activeDisplay: "shadow" }),
            React.createElement(react_avatar_1.Avatar, { image: imageRoot + "/nan.jpg", active: true, activeDisplay: "glow" }),
            React.createElement(react_avatar_1.Avatar, { image: imageRoot + "/patrick.png", active: true, activeDisplay: "ring-shadow" }),
            React.createElement(react_avatar_1.Avatar, { image: imageRoot + "/veronika.jpg", active: true, activeDisplay: "ring-glow" }),
            React.createElement(react_avatar_1.Avatar, { image: imageRoot + "/kristy.png", active: false }))));
};
exports.AllSizes = function () { return (React.createElement(React.Fragment, null,
    React.createElement(StoryExample_1.StoryExample, { title: "Image" },
        React.createElement(AvatarExampleList, { display: "image" }),
        React.createElement(AvatarExampleList, { display: "image", square: true, exampleIndex: react_avatar_1.avatarSizeValues.length })),
    React.createElement(StoryExample_1.StoryExample, { title: "Initials" },
        React.createElement(AvatarExampleList, { display: "label" }),
        React.createElement(AvatarExampleList, { display: "label", square: true, exampleIndex: react_avatar_1.avatarSizeValues.length })),
    React.createElement(StoryExample_1.StoryExample, { title: "Icon" },
        React.createElement(AvatarExampleList, { display: "icon" }),
        React.createElement(AvatarExampleList, { display: "icon", square: true, exampleIndex: react_avatar_1.avatarSizeValues.length })),
    React.createElement(StoryExample_1.StoryExample, { title: "Active" },
        React.createElement(AvatarExampleList, { display: "image", active: true, activeDisplay: "ring", exampleIndex: 39 }),
        React.createElement(AvatarExampleList, { display: "image", active: true, activeDisplay: "shadow", exampleIndex: 65 }),
        React.createElement(AvatarExampleList, { display: "image", active: true, activeDisplay: "ring-shadow", exampleIndex: 52 }),
        React.createElement(AvatarExampleList, { display: "image", active: true, activeDisplay: "glow", exampleIndex: 78 }),
        React.createElement(AvatarExampleList, { display: "image", active: true, activeDisplay: "ring-glow", exampleIndex: 91 })),
    React.createElement(StoryExample_1.StoryExample, { title: "Inactive" },
        React.createElement(AvatarExampleList, { display: "image", active: false, exampleIndex: 26 })))); };
exports.CustomSizes = function () { return (React.createElement(StoryExample_1.StoryExample, { title: "Custom Size" },
    React.createElement(react_avatar_1.Avatar, { name: "Custom Size", badge: "success", customSize: 17 }),
    React.createElement(react_avatar_1.Avatar, { name: "Custom Size", badge: "warning", customSize: 42 }),
    React.createElement(react_avatar_1.Avatar, { name: "Custom Size", badge: "error", customSize: 55 }),
    React.createElement(react_avatar_1.Avatar, { name: "Custom Size", badge: "success", customSize: 100 }),
    React.createElement(react_avatar_1.Avatar, { name: "Custom Size", badge: "success", customSize: 150 }))); };
exports.CustomShape = function () {
    return (React.createElement(React.Fragment, null,
        React.createElement(StoryExample_1.StoryExample, { title: "Custom shape" },
            React.createElement(AvatarExampleList, { icon: React.createElement(react_icons_1.ChatBotIcon, null), display: "icon", tokens: {
                    width: 'calc(var(--avatar-height) * 1.125)',
                    background: 'url("images/avatar/hexagon.svg") 0px/contain no-repeat',
                    borderRadius: '0',
                } }))));
};
exports.AvatarPlayground = function () {
    var propSelectors = [
        useValueSelector('size', react_avatar_1.avatarSizeValues, 96),
        useValueSelector('customSize', examples.customSize),
        useValueSelector('square', [true, false]),
        useValueSelector('badge', examples.badges, undefined, badgeToString),
        useValueSelector('name', examples.names, examples.names[7]),
        useValueSelector('image', examples.images, examples.images[7]),
        useValueSelector('icon', examples.icons, undefined, iconToString),
        useValueSelector('display', examples.display),
        useValueSelector('active', [true, false]),
        useValueSelector('activeDisplay', 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(); }), "/>"))));
};
/**
 * Helpers
 */
/** Get an array index, wrapping around to the start of the array if the index is out of bounds */
var wrapIndex = function (array, i) { return array[(i + array.length) % array.length]; };
/**
 * Generate a list of Avatars with sample properties
 */
var AvatarExampleList = function (props) {
    var _a = props.exampleIndex, exampleIndex = _a === void 0 ? 0 : _a;
    var avatars = react_avatar_1.avatarSizeValues.map(function (size, i) { return (React.createElement("div", { key: size, style: { margin: "10px" } },
        React.createElement(react_avatar_1.Avatar, tslib_1.__assign({ size: size, name: wrapIndex(examples.names, i + exampleIndex), image: wrapIndex(examples.images, i + exampleIndex), badge: wrapIndex(examples.badges, i + exampleIndex), icon: wrapIndex(examples.icons, i + exampleIndex) }, props)))); });
    return (React.createElement("div", { style: { display: 'flex', margin: '0', flexWrap: 'wrap' } },
        React.createElement("div", { style: { display: 'flex' } }, avatars.slice(0, 9)),
        React.createElement("div", { style: { display: 'flex' } }, avatars.slice(9))));
};
/**
 * Create a selector UI for a property value, allowing the user to toggle among the available property values
 */
var useValueSelector = function (name, values, initialValue, valueToString) {
    if (valueToString === void 0) { valueToString = function (v) { return "" + v; }; }
    var _a = React.useState(initialValue === undefined ? values[0] : initialValue), value = _a[0], setValue = _a[1];
    var _b = React.useState(initialValue !== undefined), enabled = _b[0], setEnabled = _b[1];
    var next = React.useCallback(function () { return setValue(function (v) { return wrapIndex(values, values.indexOf(v) + 1); }); }, [values]);
    var prev = React.useCallback(function () { return setValue(function (v) { return wrapIndex(values, values.indexOf(v) - 1); }); }, [values]);
    var toggleEnabled = React.useCallback(function () { return setEnabled(function (e) { return !e; }); }, []);
    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