import * as React from 'react';
import { View, Text, Switch } from 'react-native';
import { Persona } from '@fluentui/react-native';
import { satyaImageUrl } from './styles';
import { MenuPicker } from '../Common/MenuPicker';
import { commonTestStyles as commonStyles } from '../Common/styles';
import { undefinedText } from '../PersonaCoin/styles';
const allSizes = [
    undefinedText,
    'size8',
    'size24',
    'size32',
    'size40',
    'size48',
    'size56',
    'size72',
    'size100',
    'size120',
];
const allSizesCollection = allSizes.map((size) => {
    return {
        label: size,
        value: size,
    };
});
function SwitchWithLabel(props) {
    const { label, value, onValueChange } = props;
    return (React.createElement(View, { style: commonStyles.switch },
        React.createElement(Text, null, label),
        React.createElement(Switch, { value: value, onValueChange: onValueChange })));
}
export const StandardUsage = () => {
    const [showImage, setShowImage] = React.useState(true);
    const [showPrimary, setShowPrimary] = React.useState(true);
    const [showSecondary, setShowSecondary] = React.useState(true);
    const [showTertiary, setShowTertiary] = React.useState(true);
    const [showOptional, setShowOptional] = React.useState(true);
    const [imageSize, setImageSize] = React.useState('size72');
    return (React.createElement(View, { style: commonStyles.root },
        React.createElement(View, { style: commonStyles.settings },
            React.createElement(SwitchWithLabel, { label: "Show image", value: showImage, onValueChange: setShowImage }),
            React.createElement(SwitchWithLabel, { label: "Show primary text", value: showPrimary, onValueChange: setShowPrimary }),
            React.createElement(SwitchWithLabel, { label: "Show secondary text", value: showSecondary, onValueChange: setShowSecondary }),
            React.createElement(SwitchWithLabel, { label: "Show tertiary text", value: showTertiary, onValueChange: setShowTertiary }),
            React.createElement(SwitchWithLabel, { label: "Show optional text", value: showOptional, onValueChange: setShowOptional }),
            React.createElement(MenuPicker, { prompt: "Size", style: commonStyles.header, selected: imageSize || undefinedText, onChange: (size) => setImageSize(size === undefinedText ? undefined : size), collection: allSizesCollection })),
        React.createElement(Persona, { text: showPrimary ? 'Satya Nadella' : undefined, secondaryText: showSecondary ? 'CEO' : undefined, tertiaryText: showTertiary ? 'Microsoft' : undefined, optionalText: showOptional ? 'Office of the CEO' : undefined, size: imageSize, initials: "SN", imageUrl: showImage ? satyaImageUrl : undefined, imageDescription: "Profile photo of Satya Nadella", presence: 'away' })));
};
//# sourceMappingURL=StandardUsage.js.map