"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.StandardUsage = void 0;
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
const react_native_2 = require("@fluentui/react-native");
const avatar_1 = require("@fluentui-react-native/avatar");
const badge_1 = require("@fluentui-react-native/badge");
const iconExamples_1 = require("../Common/iconExamples");
const StyledPicker_1 = require("../Common/StyledPicker");
const styles_1 = require("../Common/styles");
const styles_2 = require("../PersonaCoin/styles");
const avatarActive = ['unset', 'active', 'inactive'];
const avatarColors = ['neutral', 'brand', 'colorful', ...avatar_1.AvatarColors];
const allSizes = [styles_2.undefinedText, ...avatar_1.AvatarSizes];
const allPresences = [styles_2.undefinedText, ...badge_1.PresenceBadgeStatuses];
const StandardUsage = () => {
    const [isSquare, setSquare] = (0, react_1.useState)(false);
    const [showImage, setShowImage] = (0, react_1.useState)(true);
    const [outOfOffice, setOutOfOffice] = (0, react_1.useState)(false);
    const [active, setActive] = (0, react_1.useState)('unset');
    const [imageSize, setImageSize] = (0, react_1.useState)(72);
    const [presence, setPresence] = (0, react_1.useState)('available');
    const [avatarColor, setAvatarColor] = (0, react_1.useState)('brass');
    const onActiveChange = (0, react_1.useCallback)((value) => setActive(value), []);
    const onAvatarColorChange = (0, react_1.useCallback)((value) => setAvatarColor(value), []);
    const onSizeChange = (0, react_1.useCallback)((value) => setImageSize(value), []);
    const onPresenceChange = (0, react_1.useCallback)((value) => setPresence(value), []);
    const avatarSizesForPicker = allSizes.map((size) => size.toString());
    const activeAppearance = 'ring';
    const fontBuiltInProps = {
        fontFamily: 'Arial',
        codepoint: 0x2663,
    };
    const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(react_native_1.Platform.OS);
    const 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: () => setShowImage(!showImage), checked: showImage, style: styles_1.commonTestStyles.vmargin },
                showImage ? 'Hide' : 'Show',
                " image"),
            react_1.default.createElement(react_native_2.ToggleButton, { onClick: () => setSquare(!isSquare), checked: isSquare, style: styles_1.commonTestStyles.vmargin },
                "Set ",
                isSquare ? ' circle' : ' square',
                " Avatar"),
            react_1.default.createElement(react_native_2.ToggleButton, { onClick: () => 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, 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 } }),
            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 } }),
            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 }, idForColor: "15" }))))));
};
exports.StandardUsage = StandardUsage;
//# sourceMappingURL=BasicAvatar.js.map