import React, { useState, useCallback } from 'react';
import { View, Text, Platform } from 'react-native';
import { ToggleButton } from '@fluentui/react-native';
import { AvatarSizes, AvatarColors, Avatar } from '@fluentui-react-native/avatar';
import { PresenceBadgeStatuses } from '@fluentui-react-native/badge';
import { svgProps } from '../Common/iconExamples';
import { StyledPicker } from '../Common/StyledPicker';
import { commonTestStyles as commonStyles } from '../Common/styles';
import { satyaPhotoUrl, undefinedText } from '../PersonaCoin/styles';
const avatarActive = ['unset', 'active', 'inactive'];
const avatarColors = ['neutral', 'brand', 'colorful', ...AvatarColors];
const allSizes = [undefinedText, ...AvatarSizes];
const allPresences = [undefinedText, ...PresenceBadgeStatuses];
export const StandardUsage = () => {
    const [isSquare, setSquare] = useState(false);
    const [showImage, setShowImage] = useState(true);
    const [outOfOffice, setOutOfOffice] = useState(false);
    const [active, setActive] = useState('unset');
    const [imageSize, setImageSize] = useState(72);
    const [presence, setPresence] = useState('available');
    const [avatarColor, setAvatarColor] = useState('brass');
    const onActiveChange = useCallback((value) => setActive(value), []);
    const onAvatarColorChange = useCallback((value) => setAvatarColor(value), []);
    const onSizeChange = useCallback((value) => setImageSize(value), []);
    const onPresenceChange = 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(Platform.OS);
    const badgeStatus = presence === undefinedText ? undefined : presence;
    return (React.createElement(View, { style: commonStyles.root },
        React.createElement(View, { style: commonStyles.settingsPicker },
            React.createElement(ToggleButton, { onClick: () => setShowImage(!showImage), checked: showImage, style: commonStyles.vmargin },
                showImage ? 'Hide' : 'Show',
                " image"),
            React.createElement(ToggleButton, { onClick: () => setSquare(!isSquare), checked: isSquare, style: commonStyles.vmargin },
                "Set ",
                isSquare ? ' circle' : ' square',
                " Avatar"),
            React.createElement(ToggleButton, { onClick: () => setOutOfOffice(!outOfOffice), checked: outOfOffice, style: commonStyles.vmargin },
                "Set ",
                outOfOffice ? ' In office' : ' Out of office'),
            React.createElement(StyledPicker, { style: commonStyles.vmargin, prompt: "Size", selected: imageSize.toString(), onChange: onSizeChange, collection: avatarSizesForPicker }),
            React.createElement(StyledPicker, { style: commonStyles.vmargin, prompt: "Active", selected: active, onChange: onActiveChange, collection: avatarActive }),
            active === 'active' && React.createElement(Text, null, "Active appearance is ring"),
            React.createElement(StyledPicker, { style: commonStyles.vmargin, prompt: "Avatar Color", selected: avatarColor, onChange: onAvatarColorChange, collection: avatarColors }),
            React.createElement(StyledPicker, { style: commonStyles.vmargin, prompt: "Presence status", selected: presence, onChange: onPresenceChange, collection: allPresences })),
        React.createElement(View, { style: commonStyles.pickerControlled },
            React.createElement(Avatar, { accessibilityLabel: "Fall-back Icon", accessibilityHint: "A picture representing a user", size: imageSize === undefinedText ? undefined : imageSize }),
            React.createElement(Avatar, { active: active, activeAppearance: activeAppearance, size: imageSize === undefinedText ? undefined : imageSize, name: "Satya Nadella", shape: isSquare ? 'square' : 'circular', accessibilityLabel: "Photo of Satya Nadella", badge: { status: badgeStatus, outOfOffice, accessibilityLabel: badgeStatus }, imageUrl: showImage ? satyaPhotoUrl : undefined, avatarColor: avatarColor }),
            React.createElement(Avatar, { active: active, activeAppearance: activeAppearance, size: imageSize === undefinedText ? undefined : imageSize, shape: isSquare ? 'square' : 'circular', accessibilityLabel: "Icon", image: { source: showImage ? { uri: satyaPhotoUrl } : undefined }, name: "* Richard Faynman *", avatarColor: "#ff0099", initialsColor: "yellow" }),
            React.createElement(Avatar, { active: active, activeAppearance: activeAppearance, size: 36, shape: isSquare ? 'square' : 'circular', accessibilityLabel: "SVG Icon", icon: { fontSource: fontBuiltInProps }, avatarColor: avatarColor, badge: { status: 'outOfOffice', outOfOffice } }),
            React.createElement(Avatar, { active: active, activeAppearance: activeAppearance, size: imageSize === undefinedText ? undefined : imageSize, shape: isSquare ? 'square' : 'circular', accessibilityLabel: "SVG Icon", icon: { fontSource: fontBuiltInProps, color: 'green' }, avatarColor: avatarColor, badge: { status: 'outOfOffice', outOfOffice } }),
            svgIconsEnabled && (React.createElement(React.Fragment, null,
                React.createElement(Avatar, { accessibilityHint: "A picture representing a user", active: active, activeAppearance: activeAppearance, size: imageSize === undefinedText ? undefined : imageSize, shape: isSquare ? 'square' : 'circular', accessibilityLabel: "SVG Icon", icon: { svgSource: svgProps }, avatarColor: avatarColor, badge: { status: 'away', outOfOffice }, idForColor: "15" }))))));
};
//# sourceMappingURL=BasicAvatar.js.map