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';
var allSizes = [
    undefinedText,
    'size8',
    'size24',
    'size32',
    'size40',
    'size48',
    'size56',
    'size72',
    'size100',
    'size120',
];
var allSizesCollection = allSizes.map(function (size) {
    return {
        label: size,
        value: size,
    };
});
function SwitchWithLabel(props) {
    var label = props.label, value = props.value, onValueChange = props.onValueChange;
    return (React.createElement(View, { style: commonStyles.switch },
        React.createElement(Text, null, label),
        React.createElement(Switch, { value: value, onValueChange: onValueChange })));
}
export var StandardUsage = function () {
    var _a = React.useState(true), showImage = _a[0], setShowImage = _a[1];
    var _b = React.useState(true), showPrimary = _b[0], setShowPrimary = _b[1];
    var _c = React.useState(true), showSecondary = _c[0], setShowSecondary = _c[1];
    var _d = React.useState(true), showTertiary = _d[0], setShowTertiary = _d[1];
    var _e = React.useState(true), showOptional = _e[0], setShowOptional = _e[1];
    var _f = React.useState('size72'), imageSize = _f[0], setImageSize = _f[1];
    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: function (size) { return 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