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';
const allSizes = [
    undefinedText,
    'size8',
    'size24',
    'size32',
    'size40',
    'size48',
    'size56',
    'size72',
    'size100',
    'size120',
];
const allColors = [
    undefinedText,
    'cornflower',
    'blue',
    'royalBlue',
    'teal',
    'forest',
    'darkGreen',
    'berry',
    'hotPink',
    'grape',
    'purple',
    'pumpkin',
    'red',
    'burgundy',
    'orchid',
    'brass',
    'darkRed',
    'beige',
    'platinum',
    'steel',
    'brown',
];
const allPresences = [undefinedText, 'none', 'online', 'offline', 'busy', 'dnd', 'blocked', 'away'];
export const StandardUsage = () => {
    const [showImage, setShowImage] = React.useState(true);
    const [imageSize, setImageSize] = React.useState('size72');
    const [coinColor, setCoinColor] = React.useState('brass');
    const [presence, setPresence] = React.useState('online');
    const onSizeChange = React.useCallback((value) => setImageSize(value), []);
    const onColorChange = React.useCallback((value) => setCoinColor(value), []);
    const onPresenceChange = React.useCallback((value) => setPresence(value), []);
    const theme = useTheme();
    const 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