"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StandardUsage = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_native_1 = require("react-native");
const react_native_2 = require("@fluentui/react-native");
const styles_1 = require("./styles");
const MenuPicker_1 = require("../Common/MenuPicker");
const styles_2 = require("../Common/styles");
const styles_3 = require("../PersonaCoin/styles");
const allSizes = [
    styles_3.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(react_native_1.View, { style: styles_2.commonTestStyles.switch },
        React.createElement(react_native_1.Text, null, label),
        React.createElement(react_native_1.Switch, { value: value, onValueChange: onValueChange })));
}
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(react_native_1.View, { style: styles_2.commonTestStyles.root },
        React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.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_1.MenuPicker, { prompt: "Size", style: styles_2.commonTestStyles.header, selected: imageSize || styles_3.undefinedText, onChange: (size) => setImageSize(size === styles_3.undefinedText ? undefined : size), collection: allSizesCollection })),
        React.createElement(react_native_2.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 ? styles_1.satyaImageUrl : undefined, imageDescription: "Profile photo of Satya Nadella", presence: 'away' })));
};
exports.StandardUsage = StandardUsage;
//# sourceMappingURL=StandardUsage.js.map