"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomizeUsage = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var react_native_2 = require("@fluentui/react-native");
var avatar_1 = require("@fluentui-react-native/avatar");
var iconExamples_1 = require("../Common/iconExamples");
var styles_1 = require("../Common/styles");
var styles_2 = require("../PersonaCoin/styles");
var styles = react_native_1.StyleSheet.create({
    avatarTestCaseContainer: { marginLeft: 20 },
    avatarTokenOptions: { flexDirection: 'row' },
    fontTokenOptions: { paddingHorizontal: 20 },
    tokenHeader: { fontWeight: 'bold' },
});
var CustomizeUsage = function () {
    var _a = (0, react_1.useState)(true), showImage = _a[0], setShowImage = _a[1];
    var _b = (0, react_1.useState)(true), showInitials = _b[0], setShowInitials = _b[1];
    var _c = (0, react_1.useState)(), avatarColor = _c[0], setAvatarColor = _c[1];
    var _d = (0, react_1.useState)(), textColor = _d[0], setTextColor = _d[1];
    var _e = (0, react_1.useState)('96'), size = _e[0], setSize = _e[1];
    var _f = (0, react_1.useState)(24), iconSize = _f[0], setIconSize = _f[1];
    var _g = (0, react_1.useState)(undefined), iconColor = _g[0], setIconColor = _g[1];
    var _h = (0, react_1.useState)(16), initialsSize = _h[0], setInitialsSize = _h[1];
    var _j = (0, react_1.useState)('normal'), fontWeight = _j[0], setFontWeight = _j[1];
    var _k = (0, react_1.useState)('Georgia'), fontFamily = _k[0], setFontFamily = _k[1];
    var _l = (0, react_1.useState)('Steve Ballmer'), name = _l[0], setName = _l[1];
    var _m = (0, react_1.useState)(''), initials = _m[0], setInitials = _m[1];
    var _o = (0, react_1.useState)(undefined), ringColor = _o[0], setRingColor = _o[1];
    var _p = (0, react_1.useState)('yellow'), ringBackgroundColor = _p[0], setRingBackgroundColor = _p[1];
    var _q = (0, react_1.useState)('4'), ringThickness = _q[0], setRingThickness = _q[1];
    var _r = (0, react_1.useState)('4'), ringInnerGap = _r[0], setRingInnerGap = _r[1];
    var _s = (0, react_1.useState)(true), showRing = _s[0], setShowRing = _s[1];
    var CustomizedAvatar = (0, react_1.useMemo)(function () {
        var tokens = {
            avatarColor: avatarColor,
            color: textColor,
            size: parseInt(size),
            iconSize: iconSize,
            iconColor: iconColor,
            fontSize: initialsSize,
            fontWeight: fontWeight,
            fontFamily: fontFamily,
            ringColor: ringColor,
            ringBackgroundColor: ringBackgroundColor,
            ringThickness: parseInt(ringThickness),
            ringInnerGap: parseInt(ringInnerGap),
        };
        return avatar_1.Avatar.customize(tokens);
    }, [
        avatarColor,
        textColor,
        iconColor,
        iconSize,
        initialsSize,
        size,
        ringColor,
        ringBackgroundColor,
        ringInnerGap,
        ringThickness,
        fontWeight,
        fontFamily,
    ]);
    var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(react_native_1.Platform.OS);
    return (react_1.default.createElement(react_native_1.View, { style: styles_1.commonTestStyles.root },
        react_1.default.createElement(react_native_1.View, { style: styles_1.commonTestStyles.settings },
            react_1.default.createElement(react_native_2.ToggleButton, { onClick: function () { return setShowImage(!showImage); }, checked: showImage, style: styles_1.commonTestStyles.vmargin },
                showImage ? 'Hide' : 'Show',
                " image"),
            react_1.default.createElement(react_native_2.ToggleButton, { onClick: function () { return setShowInitials(!showInitials); }, checked: showInitials, style: styles_1.commonTestStyles.vmargin },
                showInitials ? 'Hide' : 'Show',
                " initials"),
            react_1.default.createElement(react_native_2.ToggleButton, { onClick: function () { return setShowRing(!showRing); }, checked: showRing, style: styles_1.commonTestStyles.vmargin },
                showRing ? 'Hide' : 'Show',
                " ring"),
            react_1.default.createElement(react_native_1.View, { style: styles.avatarTokenOptions },
                react_1.default.createElement(react_native_1.View, null,
                    react_1.default.createElement(react_native_1.TextInput, { accessibilityLabel: "Name for generating initials", style: styles_1.commonTestStyles.textBox, placeholder: "Name for generating initials", blurOnSubmit: true, onSubmitEditing: function (e) {
                            setName(e.nativeEvent.text);
                        } }),
                    react_1.default.createElement(react_native_1.TextInput, { accessibilityLabel: "Initials", style: styles_1.commonTestStyles.textBox, placeholder: "Initials", blurOnSubmit: true, onSubmitEditing: function (e) {
                            setInitials(e.nativeEvent.text);
                        } }),
                    react_1.default.createElement(react_native_1.Text, { style: styles.tokenHeader }, "Avatar tokens"),
                    react_1.default.createElement(react_native_1.TextInput, { accessibilityLabel: "Background color", style: styles_1.commonTestStyles.textBox, placeholder: "Background color", blurOnSubmit: true, onSubmitEditing: function (e) {
                            setAvatarColor(e.nativeEvent.text);
                        } }),
                    react_1.default.createElement(react_native_1.TextInput, { accessibilityLabel: "Avatar size", style: styles_1.commonTestStyles.textBox, placeholder: "Avatar size", blurOnSubmit: true, onSubmitEditing: function (e) {
                            setSize(e.nativeEvent.text);
                        } }),
                    react_1.default.createElement(react_native_1.TextInput, { accessibilityLabel: "Icon size", style: styles_1.commonTestStyles.textBox, placeholder: "Icon size", blurOnSubmit: true, onSubmitEditing: function (e) {
                            setIconSize(parseInt(e.nativeEvent.text));
                        } }),
                    react_1.default.createElement(react_native_1.TextInput, { accessibilityLabel: "Icon color", style: styles_1.commonTestStyles.textBox, placeholder: "Icon color", blurOnSubmit: true, onSubmitEditing: function (e) {
                            setIconColor(e.nativeEvent.text);
                        } }),
                    react_1.default.createElement(react_native_1.Text, { style: styles.tokenHeader }, "Ring tokens"),
                    react_1.default.createElement(react_native_1.TextInput, { accessibilityLabel: "Ring background color", style: styles_1.commonTestStyles.textBox, placeholder: "Ring background color", blurOnSubmit: true, onSubmitEditing: function (e) {
                            setRingBackgroundColor(e.nativeEvent.text);
                        } }),
                    react_1.default.createElement(react_native_1.TextInput, { accessibilityLabel: "Ring color", style: styles_1.commonTestStyles.textBox, placeholder: "Ring color", blurOnSubmit: true, onSubmitEditing: function (e) {
                            setRingColor(e.nativeEvent.text);
                        } }),
                    react_1.default.createElement(react_native_1.TextInput, { accessibilityLabel: "Ring thickness", style: styles_1.commonTestStyles.textBox, placeholder: "Ring thickness", blurOnSubmit: true, onSubmitEditing: function (e) {
                            setRingThickness(e.nativeEvent.text);
                        } }),
                    react_1.default.createElement(react_native_1.TextInput, { accessibilityLabel: "Ring inner gap", style: styles_1.commonTestStyles.textBox, placeholder: "Ring inner gap", blurOnSubmit: true, onSubmitEditing: function (e) {
                            setRingInnerGap(e.nativeEvent.text);
                        } })),
                react_1.default.createElement(react_native_1.View, { style: styles.fontTokenOptions },
                    react_1.default.createElement(react_native_1.Text, { style: styles.tokenHeader }, "Font tokens"),
                    react_1.default.createElement(react_native_1.TextInput, { accessibilityLabel: "Initials text color", style: styles_1.commonTestStyles.textBox, placeholder: "Initials text color", blurOnSubmit: true, onSubmitEditing: function (e) {
                            setTextColor(e.nativeEvent.text);
                        } }),
                    react_1.default.createElement(react_native_1.TextInput, { accessibilityLabel: "Initials size", style: styles_1.commonTestStyles.textBox, placeholder: "Initials size", blurOnSubmit: true, onSubmitEditing: function (e) {
                            setInitialsSize(parseInt(e.nativeEvent.text));
                        } }),
                    react_1.default.createElement(react_native_1.TextInput, { accessibilityLabel: "Font weight", style: styles_1.commonTestStyles.textBox, placeholder: "Font weight", blurOnSubmit: true, onSubmitEditing: function (e) {
                            setFontWeight(e.nativeEvent.text);
                        } }),
                    react_1.default.createElement(react_native_1.TextInput, { accessibilityLabel: "Font family", style: styles_1.commonTestStyles.textBox, placeholder: "Font family", blurOnSubmit: true, onSubmitEditing: function (e) {
                            setFontFamily(e.nativeEvent.text);
                        } })))),
        react_1.default.createElement(react_native_1.View, null,
            react_1.default.createElement(react_native_1.Text, null, "Customized Avatar"),
            react_1.default.createElement(CustomizedAvatar, { active: "active", activeAppearance: "ring", avatarColor: avatarColor, accessibilityLabel: "Former CEO of Microsoft", initials: showInitials ? initials : undefined, name: showInitials ? name : undefined, imageUrl: showImage ? styles_2.steveBallmerPhotoUrl : undefined, icon: svgIconsEnabled ? { svgSource: iconExamples_1.svgProps } : undefined, transparentRing: !showRing })),
        react_1.default.createElement(react_native_1.View, { style: styles.avatarTestCaseContainer },
            react_1.default.createElement(react_native_1.Text, null, "Avatar customized with props"),
            react_1.default.createElement(avatar_1.Avatar, { active: "active", activeAppearance: "ring", avatarColor: avatarColor, accessibilityLabel: "Former CEO of Microsoft", initials: showInitials ? initials : undefined, name: showInitials ? name : undefined, imageUrl: showImage ? styles_2.steveBallmerPhotoUrl : undefined, ringBackgroundColor: ringBackgroundColor, ringColor: ringColor, ringThickness: parseInt(ringThickness), size: parseInt(size), transparentRing: !showRing, ringInnerGap: parseInt(ringInnerGap) }))));
};
exports.CustomizeUsage = CustomizeUsage;
//# sourceMappingURL=CustomizedAvatar.js.map