"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StandardUsage = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const react_native_1 = require("react-native");
const avatar_1 = require("@fluentui-react-native/avatar");
const badge_1 = require("@fluentui-react-native/badge");
const switch_1 = require("@fluentui-react-native/switch");
const StyledPicker_1 = require("../Common/StyledPicker");
const styles_1 = require("../Common/styles");
const styles_2 = require("../PersonaCoin/styles");
const StandardUsage = () => {
    const [status, setStatus] = react_1.default.useState('available');
    const [activityRing, setActivityRing] = react_1.default.useState(false);
    const [outOfOffice, setOutOfOffice] = react_1.default.useState(false);
    const onStatusChange = react_1.default.useCallback((value) => setStatus(value), []);
    const toggleActivityState = (_e, isActive) => {
        setActivityRing(isActive);
    };
    const toggleOutOfOffice = (_e, isActive) => {
        setOutOfOffice(isActive);
    };
    const nameAccessibilityLabel = 'Steve Ballmer';
    return (react_1.default.createElement(react_native_1.View, { style: styles_1.mobileStyles.pageStyle },
        react_1.default.createElement(switch_1.Switch, { label: 'Show Activity Ring', defaultChecked: activityRing, onChange: toggleActivityState }),
        react_1.default.createElement(switch_1.Switch, { label: 'Out of Office', defaultChecked: outOfOffice, onChange: toggleOutOfOffice }),
        react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Status", selected: status, onChange: onStatusChange, collection: badge_1.PresenceBadgeStatuses }),
        react_1.default.createElement(react_native_1.View, { style: styles_1.mobileStyles.testVariants },
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 16, name: "Rafi", avatarColor: 'colorful' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 20, name: "Richard Faynman", avatarColor: 'colorful' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 24, name: "Gita Khawas", avatarColor: 'colorful' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 32, name: "Mary Kom", avatarColor: 'colorful' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 40, name: "Khan Sir", avatarColor: 'colorful' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 56, name: "Harry Potter", avatarColor: 'colorful' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 72, name: "Ellie armstrong", avatarColor: 'colorful' })),
        react_1.default.createElement(react_native_1.View, { style: styles_1.mobileStyles.testVariants },
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', accessibilityLabel: nameAccessibilityLabel, activeAppearance: "ring", size: 16, imageUrl: styles_2.steveBallmerPhotoUrl }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', accessibilityLabel: nameAccessibilityLabel, activeAppearance: "ring", size: 20, imageUrl: styles_2.steveBallmerPhotoUrl }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', accessibilityLabel: nameAccessibilityLabel, activeAppearance: "ring", size: 24, imageUrl: styles_2.steveBallmerPhotoUrl }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', accessibilityLabel: nameAccessibilityLabel, activeAppearance: "ring", size: 32, imageUrl: styles_2.steveBallmerPhotoUrl }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', accessibilityLabel: nameAccessibilityLabel, activeAppearance: "ring", size: 40, imageUrl: styles_2.steveBallmerPhotoUrl }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', accessibilityLabel: nameAccessibilityLabel, activeAppearance: "ring", size: 56, imageUrl: styles_2.steveBallmerPhotoUrl }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', accessibilityLabel: nameAccessibilityLabel, activeAppearance: "ring", size: 72, imageUrl: styles_2.steveBallmerPhotoUrl })),
        react_1.default.createElement(react_native_1.View, { style: styles_1.mobileStyles.testVariants },
            react_1.default.createElement(avatar_1.Avatar, { size: 16, accessibilityLabel: nameAccessibilityLabel, badge: { status: status, outOfOffice: outOfOffice }, imageUrl: styles_2.steveBallmerPhotoUrl }),
            react_1.default.createElement(avatar_1.Avatar, { size: 20, accessibilityLabel: nameAccessibilityLabel, badge: { status: status, outOfOffice: outOfOffice }, imageUrl: styles_2.steveBallmerPhotoUrl }),
            react_1.default.createElement(avatar_1.Avatar, { size: 24, accessibilityLabel: nameAccessibilityLabel, badge: { status: status, outOfOffice: outOfOffice }, imageUrl: styles_2.steveBallmerPhotoUrl }),
            react_1.default.createElement(avatar_1.Avatar, { size: 32, accessibilityLabel: nameAccessibilityLabel, badge: { status: status, outOfOffice: outOfOffice }, imageUrl: styles_2.steveBallmerPhotoUrl }),
            react_1.default.createElement(avatar_1.Avatar, { size: 40, accessibilityLabel: nameAccessibilityLabel, badge: { status: status, outOfOffice: outOfOffice }, imageUrl: styles_2.steveBallmerPhotoUrl }),
            react_1.default.createElement(avatar_1.Avatar, { size: 56, accessibilityLabel: nameAccessibilityLabel, badge: { status: status, outOfOffice: outOfOffice }, imageUrl: styles_2.steveBallmerPhotoUrl }),
            react_1.default.createElement(avatar_1.Avatar, { size: 72, accessibilityLabel: nameAccessibilityLabel, badge: { status: status, outOfOffice: outOfOffice }, imageUrl: styles_2.steveBallmerPhotoUrl })),
        react_1.default.createElement(react_native_1.View, { style: styles_1.mobileStyles.testVariants },
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 16, avatarColor: 'brand' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 20, avatarColor: 'brand' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 24, avatarColor: 'brand' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 32, avatarColor: 'brand' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 40, avatarColor: 'brand' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 56, avatarColor: 'brand' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 72, avatarColor: 'brand' })),
        react_1.default.createElement(react_native_1.View, { style: styles_1.mobileStyles.testVariants },
            react_1.default.createElement(avatar_1.Avatar, { badge: { status: status, outOfOffice: outOfOffice }, size: 16, avatarColor: 'brand' }),
            react_1.default.createElement(avatar_1.Avatar, { badge: { status: status, outOfOffice: outOfOffice }, size: 20, avatarColor: 'brand' }),
            react_1.default.createElement(avatar_1.Avatar, { badge: { status: status, outOfOffice: outOfOffice }, size: 24, avatarColor: 'brand' }),
            react_1.default.createElement(avatar_1.Avatar, { badge: { status: status, outOfOffice: outOfOffice }, size: 32, avatarColor: 'brand' }),
            react_1.default.createElement(avatar_1.Avatar, { badge: { status: status, outOfOffice: outOfOffice }, size: 40, avatarColor: 'brand' }),
            react_1.default.createElement(avatar_1.Avatar, { badge: { status: status, outOfOffice: outOfOffice }, size: 56, avatarColor: 'brand' }),
            react_1.default.createElement(avatar_1.Avatar, { badge: { status: status, outOfOffice: outOfOffice }, size: 72, avatarColor: 'brand' })),
        react_1.default.createElement(react_native_1.View, { style: styles_1.mobileStyles.testVariants },
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 16, avatarColor: 'brandInverted' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 20, avatarColor: 'brandInverted' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 24, avatarColor: 'brandInverted' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 32, avatarColor: 'brandInverted' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 40, avatarColor: 'brandInverted' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 56, avatarColor: 'brandInverted' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 72, avatarColor: 'brandInverted' })),
        react_1.default.createElement(react_native_1.View, { style: styles_1.mobileStyles.testVariants },
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 16 }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 20 }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 24 }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 32 }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 40 }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 56 }),
            react_1.default.createElement(avatar_1.Avatar, { accessibilityLabel: "Fall-back Icon", accessibilityHint: "A picture representing a user", size: 72, activeAppearance: "ring", active: activityRing ? 'active' : 'inactive' })),
        react_1.default.createElement(react_native_1.View, { style: styles_1.mobileStyles.testVariants },
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 16, avatarColor: 'accent' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 20, avatarColor: 'accent' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 24, avatarColor: 'accent' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 32, avatarColor: 'accent' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 40, avatarColor: 'accent' }),
            react_1.default.createElement(avatar_1.Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 56, avatarColor: 'accent' }),
            react_1.default.createElement(avatar_1.Avatar, { accessibilityLabel: "Fall-back Icon", accessibilityHint: "A picture representing a user", size: 72, activeAppearance: "ring", active: activityRing ? 'active' : 'inactive', avatarColor: 'accent' })),
        react_1.default.createElement(react_native_1.View, { style: styles_1.mobileStyles.testVariants },
            react_1.default.createElement(avatar_1.Avatar, { shape: 'square', size: 16, name: "Rafi", avatarColor: 'colorful' }),
            react_1.default.createElement(avatar_1.Avatar, { shape: 'square', size: 20, name: "Richard Faynman", avatarColor: 'colorful' }),
            react_1.default.createElement(avatar_1.Avatar, { shape: 'square', size: 24, name: "Gita Khawas", avatarColor: 'colorful' }),
            react_1.default.createElement(avatar_1.Avatar, { shape: 'square', size: 32, name: "Mary Kom", avatarColor: 'colorful' }),
            react_1.default.createElement(avatar_1.Avatar, { shape: 'square', size: 40, name: "Khan Sir", avatarColor: 'colorful', imageUrl: styles_2.steveBallmerPhotoUrl }),
            react_1.default.createElement(avatar_1.Avatar, { shape: 'square', size: 56, name: "Harry Potter", avatarColor: 'colorful' }),
            react_1.default.createElement(avatar_1.Avatar, { shape: 'square', size: 72, name: "Ellie armstrong", avatarColor: 'colorful' })),
        react_1.default.createElement(react_native_1.View, { style: styles_1.mobileStyles.testVariants },
            react_1.default.createElement(avatar_1.Avatar, { size: 16, initials: "20" }),
            react_1.default.createElement(avatar_1.Avatar, { size: 20, initials: "11" }),
            react_1.default.createElement(avatar_1.Avatar, { size: 24, initials: "88" }),
            react_1.default.createElement(avatar_1.Avatar, { size: 32, initials: "20" }),
            react_1.default.createElement(avatar_1.Avatar, { size: 40, initials: "20" }),
            react_1.default.createElement(avatar_1.Avatar, { size: 56, initials: "56" }),
            react_1.default.createElement(avatar_1.Avatar, { size: 72, initials: "20" }))));
};
exports.StandardUsage = StandardUsage;
//# sourceMappingURL=BasicAvatar.android.js.map