"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StandardUsage = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var react_native_2 = require("@fluentui/react-native");
var avatar_1 = require("@fluentui-react-native/avatar");
var badge_1 = require("@fluentui-react-native/badge");
var iconExamples_1 = require("../Common/iconExamples");
var StyledPicker_1 = require("../Common/StyledPicker");
var styles_1 = require("../Common/styles");
var styles_2 = require("../PersonaCoin/styles");
var avatarActive = ['unset', 'active', 'inactive'];
var avatarColors = tslib_1.__spreadArray(['neutral', 'brand', 'colorful'], avatar_1.AvatarColors, true);
var allSizes = tslib_1.__spreadArray([styles_2.undefinedText], avatar_1.AvatarSizes, true);
var allPresences = tslib_1.__spreadArray([styles_2.undefinedText], badge_1.PresenceBadgeStatuses, true);
var StandardUsage = function () {
    var _a = (0, react_1.useState)(false), isSquare = _a[0], setSquare = _a[1];
    var _b = (0, react_1.useState)(true), showImage = _b[0], setShowImage = _b[1];
    var _c = (0, react_1.useState)(false), outOfOffice = _c[0], setOutOfOffice = _c[1];
    var _d = (0, react_1.useState)('unset'), active = _d[0], setActive = _d[1];
    var _e = (0, react_1.useState)(72), imageSize = _e[0], setImageSize = _e[1];
    var _f = (0, react_1.useState)('available'), presence = _f[0], setPresence = _f[1];
    var _g = (0, react_1.useState)('brass'), avatarColor = _g[0], setAvatarColor = _g[1];
    var onActiveChange = (0, react_1.useCallback)(function (value) { return setActive(value); }, []);
    var onAvatarColorChange = (0, react_1.useCallback)(function (value) { return setAvatarColor(value); }, []);
    var onSizeChange = (0, react_1.useCallback)(function (value) { return setImageSize(value); }, []);
    var onPresenceChange = (0, react_1.useCallback)(function (value) { return setPresence(value); }, []);
    var avatarSizesForPicker = allSizes.map(function (size) { return size.toString(); });
    var activeAppearance = 'ring';
    var fontBuiltInProps = {
        fontFamily: 'Arial',
        codepoint: 0x2663,
    };
    var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(react_native_1.Platform.OS);
    var badgeStatus = presence === styles_2.undefinedText ? undefined : presence;
    return (react_1.default.createElement(react_native_1.View, { style: styles_1.commonTestStyles.root },
        react_1.default.createElement(react_native_1.View, { style: styles_1.commonTestStyles.settingsPicker },
            react_1.default.createElement(react_native_2.ToggleButton, { onClick: function () { return setShowImage(!showImage); }, checked: showImage, style: styles_1.commonTestStyles.vmargin },
                showImage ? 'Hide' : 'Show',
                " image"),
            react_1.default.createElement(react_native_2.ToggleButton, { onClick: function () { return setSquare(!isSquare); }, checked: isSquare, style: styles_1.commonTestStyles.vmargin },
                "Set ",
                isSquare ? ' circle' : ' square',
                " Avatar"),
            react_1.default.createElement(react_native_2.ToggleButton, { onClick: function () { return setOutOfOffice(!outOfOffice); }, checked: outOfOffice, style: styles_1.commonTestStyles.vmargin },
                "Set ",
                outOfOffice ? ' In office' : ' Out of office'),
            react_1.default.createElement(StyledPicker_1.StyledPicker, { style: styles_1.commonTestStyles.vmargin, prompt: "Size", selected: imageSize.toString(), onChange: onSizeChange, collection: avatarSizesForPicker }),
            react_1.default.createElement(StyledPicker_1.StyledPicker, { style: styles_1.commonTestStyles.vmargin, prompt: "Active", selected: active, onChange: onActiveChange, collection: avatarActive }),
            active === 'active' && react_1.default.createElement(react_native_1.Text, null, "Active appearance is ring"),
            react_1.default.createElement(StyledPicker_1.StyledPicker, { style: styles_1.commonTestStyles.vmargin, prompt: "Avatar Color", selected: avatarColor, onChange: onAvatarColorChange, collection: avatarColors }),
            react_1.default.createElement(StyledPicker_1.StyledPicker, { style: styles_1.commonTestStyles.vmargin, prompt: "Presence status", selected: presence, onChange: onPresenceChange, collection: allPresences })),
        react_1.default.createElement(react_native_1.View, { style: styles_1.commonTestStyles.pickerControlled },
            react_1.default.createElement(avatar_1.Avatar, { accessibilityLabel: "Fall-back Icon", accessibilityHint: "A picture representing a user", size: imageSize === styles_2.undefinedText ? undefined : imageSize }),
            react_1.default.createElement(avatar_1.Avatar, { active: active, activeAppearance: activeAppearance, size: imageSize === styles_2.undefinedText ? undefined : imageSize, name: "Satya Nadella", shape: isSquare ? 'square' : 'circular', accessibilityLabel: "Photo of Satya Nadella", badge: { status: badgeStatus, outOfOffice: outOfOffice, accessibilityLabel: badgeStatus }, imageUrl: showImage ? styles_2.satyaPhotoUrl : undefined, avatarColor: avatarColor }),
            react_1.default.createElement(avatar_1.Avatar, { active: active, activeAppearance: activeAppearance, size: imageSize === styles_2.undefinedText ? undefined : imageSize, shape: isSquare ? 'square' : 'circular', accessibilityLabel: "Icon", image: { source: showImage ? { uri: styles_2.satyaPhotoUrl } : undefined }, name: "* Richard Faynman *", avatarColor: "#ff0099", initialsColor: "yellow" }),
            react_1.default.createElement(avatar_1.Avatar, { active: active, activeAppearance: activeAppearance, size: 36, shape: isSquare ? 'square' : 'circular', accessibilityLabel: "SVG Icon", icon: { fontSource: fontBuiltInProps }, avatarColor: avatarColor, badge: { status: 'outOfOffice', outOfOffice: outOfOffice } }),
            react_1.default.createElement(avatar_1.Avatar, { active: active, activeAppearance: activeAppearance, size: imageSize === styles_2.undefinedText ? undefined : imageSize, shape: isSquare ? 'square' : 'circular', accessibilityLabel: "SVG Icon", icon: { fontSource: fontBuiltInProps, color: 'green' }, avatarColor: avatarColor, badge: { status: 'outOfOffice', outOfOffice: outOfOffice } }),
            svgIconsEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
                react_1.default.createElement(avatar_1.Avatar, { accessibilityHint: "A picture representing a user", active: active, activeAppearance: activeAppearance, size: imageSize === styles_2.undefinedText ? undefined : imageSize, shape: isSquare ? 'square' : 'circular', accessibilityLabel: "SVG Icon", icon: { svgSource: iconExamples_1.svgProps }, avatarColor: avatarColor, badge: { status: 'away', outOfOffice: outOfOffice }, idForColor: "15" }))))));
};
exports.StandardUsage = StandardUsage;
//# sourceMappingURL=BasicAvatar.js.map