import { __spreadArray } from "tslib";
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 { satyaPhotoUrl, undefinedText } from './../PersonaCoin/styles';
import { svgProps } from '../Common/iconExamples';
import { StyledPicker } from '../Common/StyledPicker';
import { commonTestStyles as commonStyles } from '../Common/styles';
var avatarActive = ['unset', 'active', 'inactive'];
var avatarColors = __spreadArray(['neutral', 'brand', 'colorful'], AvatarColors, true);
var allSizes = __spreadArray([undefinedText], AvatarSizes, true);
var allPresences = __spreadArray([undefinedText], PresenceBadgeStatuses, true);
export var StandardUsage = function () {
    var _a = useState(false), isSquare = _a[0], setSquare = _a[1];
    var _b = useState(true), showImage = _b[0], setShowImage = _b[1];
    var _c = useState(false), outOfOffice = _c[0], setOutOfOffice = _c[1];
    var _d = useState('unset'), active = _d[0], setActive = _d[1];
    var _e = useState(72), imageSize = _e[0], setImageSize = _e[1];
    var _f = useState('available'), presence = _f[0], setPresence = _f[1];
    var _g = useState('brass'), avatarColor = _g[0], setAvatarColor = _g[1];
    var onActiveChange = useCallback(function (value) { return setActive(value); }, []);
    var onAvatarColorChange = useCallback(function (value) { return setAvatarColor(value); }, []);
    var onSizeChange = useCallback(function (value) { return setImageSize(value); }, []);
    var onPresenceChange = 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(Platform.OS);
    var badgeStatus = presence === undefinedText ? undefined : presence;
    return (React.createElement(View, { style: commonStyles.root },
        React.createElement(View, { style: commonStyles.settingsPicker },
            React.createElement(ToggleButton, { onClick: function () { return setShowImage(!showImage); }, checked: showImage, style: commonStyles.vmargin },
                showImage ? 'Hide' : 'Show',
                " image"),
            React.createElement(ToggleButton, { onClick: function () { return setSquare(!isSquare); }, checked: isSquare, style: commonStyles.vmargin },
                "Set ",
                isSquare ? ' circle' : ' square',
                " Avatar"),
            React.createElement(ToggleButton, { onClick: function () { return 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: 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: 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: 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: outOfOffice }, idForColor: "15" }))))));
};
//# sourceMappingURL=BasicAvatar.js.map