import React from 'react';
import { View } from 'react-native';
import { Avatar } from '@fluentui-react-native/avatar';
import { PresenceBadgeStatuses } from '@fluentui-react-native/badge';
import { Switch } from '@fluentui-react-native/switch';
import { steveBallmerPhotoUrl } from './../PersonaCoin/styles';
import { StyledPicker } from '../Common/StyledPicker';
import { mobileStyles } from '../Common/styles';
export var StandardUsage = function () {
    var _a = React.useState('available'), status = _a[0], setStatus = _a[1];
    var _b = React.useState(false), activityRing = _b[0], setActivityRing = _b[1];
    var _c = React.useState(false), outOfOffice = _c[0], setOutOfOffice = _c[1];
    var onStatusChange = React.useCallback(function (value) { return setStatus(value); }, []);
    var toggleActivityState = function (_e, isActive) {
        setActivityRing(isActive);
    };
    var toggleOutOfOffice = function (_e, isActive) {
        setOutOfOffice(isActive);
    };
    var nameAccessibilityLabel = 'Steve Ballmer';
    return (React.createElement(View, { style: mobileStyles.pageStyle },
        React.createElement(Switch, { label: 'Show Activity Ring', defaultChecked: activityRing, onChange: toggleActivityState }),
        React.createElement(Switch, { label: 'Out of Office', defaultChecked: outOfOffice, onChange: toggleOutOfOffice }),
        React.createElement(StyledPicker, { prompt: "Status", selected: status, onChange: onStatusChange, collection: PresenceBadgeStatuses }),
        React.createElement(View, { style: mobileStyles.testVariants },
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 16, name: "Rafi", avatarColor: 'colorful' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 20, name: "Richard Faynman", avatarColor: 'colorful' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 24, name: "Gita Khawas", avatarColor: 'colorful' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 32, name: "Mary Kom", avatarColor: 'colorful' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 40, name: "Khan Sir", avatarColor: 'colorful' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 56, name: "Harry Potter", avatarColor: 'colorful' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 72, name: "Ellie armstrong", avatarColor: 'colorful' })),
        React.createElement(View, { style: mobileStyles.testVariants },
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', accessibilityLabel: nameAccessibilityLabel, activeAppearance: "ring", size: 16, imageUrl: steveBallmerPhotoUrl }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', accessibilityLabel: nameAccessibilityLabel, activeAppearance: "ring", size: 20, imageUrl: steveBallmerPhotoUrl }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', accessibilityLabel: nameAccessibilityLabel, activeAppearance: "ring", size: 24, imageUrl: steveBallmerPhotoUrl }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', accessibilityLabel: nameAccessibilityLabel, activeAppearance: "ring", size: 32, imageUrl: steveBallmerPhotoUrl }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', accessibilityLabel: nameAccessibilityLabel, activeAppearance: "ring", size: 40, imageUrl: steveBallmerPhotoUrl }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', accessibilityLabel: nameAccessibilityLabel, activeAppearance: "ring", size: 56, imageUrl: steveBallmerPhotoUrl }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', accessibilityLabel: nameAccessibilityLabel, activeAppearance: "ring", size: 72, imageUrl: steveBallmerPhotoUrl })),
        React.createElement(View, { style: mobileStyles.testVariants },
            React.createElement(Avatar, { size: 16, accessibilityLabel: nameAccessibilityLabel, badge: { status: status, outOfOffice: outOfOffice }, imageUrl: steveBallmerPhotoUrl }),
            React.createElement(Avatar, { size: 20, accessibilityLabel: nameAccessibilityLabel, badge: { status: status, outOfOffice: outOfOffice }, imageUrl: steveBallmerPhotoUrl }),
            React.createElement(Avatar, { size: 24, accessibilityLabel: nameAccessibilityLabel, badge: { status: status, outOfOffice: outOfOffice }, imageUrl: steveBallmerPhotoUrl }),
            React.createElement(Avatar, { size: 32, accessibilityLabel: nameAccessibilityLabel, badge: { status: status, outOfOffice: outOfOffice }, imageUrl: steveBallmerPhotoUrl }),
            React.createElement(Avatar, { size: 40, accessibilityLabel: nameAccessibilityLabel, badge: { status: status, outOfOffice: outOfOffice }, imageUrl: steveBallmerPhotoUrl }),
            React.createElement(Avatar, { size: 56, accessibilityLabel: nameAccessibilityLabel, badge: { status: status, outOfOffice: outOfOffice }, imageUrl: steveBallmerPhotoUrl }),
            React.createElement(Avatar, { size: 72, accessibilityLabel: nameAccessibilityLabel, badge: { status: status, outOfOffice: outOfOffice }, imageUrl: steveBallmerPhotoUrl })),
        React.createElement(View, { style: mobileStyles.testVariants },
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 16, avatarColor: 'brand' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 20, avatarColor: 'brand' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 24, avatarColor: 'brand' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 32, avatarColor: 'brand' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 40, avatarColor: 'brand' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 56, avatarColor: 'brand' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 72, avatarColor: 'brand' })),
        React.createElement(View, { style: mobileStyles.testVariants },
            React.createElement(Avatar, { badge: { status: status, outOfOffice: outOfOffice }, size: 16, avatarColor: 'brand' }),
            React.createElement(Avatar, { badge: { status: status, outOfOffice: outOfOffice }, size: 20, avatarColor: 'brand' }),
            React.createElement(Avatar, { badge: { status: status, outOfOffice: outOfOffice }, size: 24, avatarColor: 'brand' }),
            React.createElement(Avatar, { badge: { status: status, outOfOffice: outOfOffice }, size: 32, avatarColor: 'brand' }),
            React.createElement(Avatar, { badge: { status: status, outOfOffice: outOfOffice }, size: 40, avatarColor: 'brand' }),
            React.createElement(Avatar, { badge: { status: status, outOfOffice: outOfOffice }, size: 56, avatarColor: 'brand' }),
            React.createElement(Avatar, { badge: { status: status, outOfOffice: outOfOffice }, size: 72, avatarColor: 'brand' })),
        React.createElement(View, { style: mobileStyles.testVariants },
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 16, avatarColor: 'brandInverted' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 20, avatarColor: 'brandInverted' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 24, avatarColor: 'brandInverted' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 32, avatarColor: 'brandInverted' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 40, avatarColor: 'brandInverted' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 56, avatarColor: 'brandInverted' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 72, avatarColor: 'brandInverted' })),
        React.createElement(View, { style: mobileStyles.testVariants },
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 16 }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 20 }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 24 }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 32 }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 40 }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 56 }),
            React.createElement(Avatar, { accessibilityLabel: "Fall-back Icon", accessibilityHint: "A picture representing a user", size: 72, activeAppearance: "ring", active: activityRing ? 'active' : 'inactive' })),
        React.createElement(View, { style: mobileStyles.testVariants },
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 16, avatarColor: 'accent' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 20, avatarColor: 'accent' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 24, avatarColor: 'accent' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 32, avatarColor: 'accent' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 40, avatarColor: 'accent' }),
            React.createElement(Avatar, { active: activityRing ? 'active' : 'inactive', activeAppearance: "ring", size: 56, avatarColor: 'accent' }),
            React.createElement(Avatar, { accessibilityLabel: "Fall-back Icon", accessibilityHint: "A picture representing a user", size: 72, activeAppearance: "ring", active: activityRing ? 'active' : 'inactive', avatarColor: 'accent' })),
        React.createElement(View, { style: mobileStyles.testVariants },
            React.createElement(Avatar, { shape: 'square', size: 16, name: "Rafi", avatarColor: 'colorful' }),
            React.createElement(Avatar, { shape: 'square', size: 20, name: "Richard Faynman", avatarColor: 'colorful' }),
            React.createElement(Avatar, { shape: 'square', size: 24, name: "Gita Khawas", avatarColor: 'colorful' }),
            React.createElement(Avatar, { shape: 'square', size: 32, name: "Mary Kom", avatarColor: 'colorful' }),
            React.createElement(Avatar, { shape: 'square', size: 40, name: "Khan Sir", avatarColor: 'colorful', imageUrl: steveBallmerPhotoUrl }),
            React.createElement(Avatar, { shape: 'square', size: 56, name: "Harry Potter", avatarColor: 'colorful' }),
            React.createElement(Avatar, { shape: 'square', size: 72, name: "Ellie armstrong", avatarColor: 'colorful' })),
        React.createElement(View, { style: mobileStyles.testVariants },
            React.createElement(Avatar, { size: 16, initials: "20" }),
            React.createElement(Avatar, { size: 20, initials: "11" }),
            React.createElement(Avatar, { size: 24, initials: "88" }),
            React.createElement(Avatar, { size: 32, initials: "20" }),
            React.createElement(Avatar, { size: 40, initials: "20" }),
            React.createElement(Avatar, { size: 56, initials: "56" }),
            React.createElement(Avatar, { size: 72, initials: "20" }))));
};
//# sourceMappingURL=BasicAvatar.android.js.map