import * as React from 'react';
import { Switch, View, Text } from 'react-native';
import { PersonaCoin } from '@fluentui/react-native';
import { useTheme } from '@fluentui-react-native/theme-types';
import { satyaPhotoUrl, undefinedText } from './styles';
import { StyledPicker } from '../Common/StyledPicker';
import { commonTestStyles as commonStyles } from '../Common/styles';
var allSizes = [
    undefinedText,
    'size8',
    'size24',
    'size32',
    'size40',
    'size48',
    'size56',
    'size72',
    'size100',
    'size120',
];
var allColors = [
    undefinedText,
    'cornflower',
    'blue',
    'royalBlue',
    'teal',
    'forest',
    'darkGreen',
    'berry',
    'hotPink',
    'grape',
    'purple',
    'pumpkin',
    'red',
    'burgundy',
    'orchid',
    'brass',
    'darkRed',
    'beige',
    'platinum',
    'steel',
    'brown',
];
var allPresences = [undefinedText, 'none', 'online', 'offline', 'busy', 'dnd', 'blocked', 'away'];
export var StandardUsage = function () {
    var _a = React.useState(true), showImage = _a[0], setShowImage = _a[1];
    var _b = React.useState('size72'), imageSize = _b[0], setImageSize = _b[1];
    var _c = React.useState('brass'), coinColor = _c[0], setCoinColor = _c[1];
    var _d = React.useState('online'), presence = _d[0], setPresence = _d[1];
    var onSizeChange = React.useCallback(function (value) { return setImageSize(value); }, []);
    var onColorChange = React.useCallback(function (value) { return setCoinColor(value); }, []);
    var onPresenceChange = React.useCallback(function (value) { return setPresence(value); }, []);
    var theme = useTheme();
    var textStyles = { color: theme.colors.inputText };
    return (React.createElement(View, { style: commonStyles.root },
        React.createElement(View, { style: commonStyles.settingsPicker },
            React.createElement(View, { style: commonStyles.switch },
                React.createElement(Text, { style: textStyles }, "Show image"),
                React.createElement(Switch, { value: showImage, onValueChange: setShowImage })),
            React.createElement(StyledPicker, { prompt: "Size", selected: imageSize, onChange: onSizeChange, collection: allSizes }),
            React.createElement(StyledPicker, { prompt: "Coin color", selected: coinColor, onChange: onColorChange, collection: allColors }),
            React.createElement(StyledPicker, { prompt: "Presence status", selected: presence, onChange: onPresenceChange, collection: allPresences })),
        React.createElement(View, { style: commonStyles.pickerControlled },
            React.createElement(PersonaCoin, { size: imageSize === undefinedText ? undefined : imageSize, initials: "SN", imageDescription: "Photo of Satya Nadella", presence: presence === undefinedText ? undefined : presence, imageUrl: showImage ? satyaPhotoUrl : undefined, coinColorFluent: coinColor === undefinedText ? undefined : coinColor }))));
};
//# sourceMappingURL=StandardUsage.js.map