"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomizeUsage = void 0;
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
const react_native_2 = require("@fluentui/react-native");
const avatar_1 = require("@fluentui-react-native/avatar");
const iconExamples_1 = require("../Common/iconExamples");
const styles_1 = require("../Common/styles");
const styles_2 = require("../PersonaCoin/styles");
const styles = react_native_1.StyleSheet.create({
    avatarTestCaseContainer: { marginLeft: 20 },
    avatarTokenOptions: { flexDirection: 'row' },
    fontTokenOptions: { paddingHorizontal: 20 },
    tokenHeader: { fontWeight: 'bold' },
});
const CustomizeUsage = () => {
    const [showImage, setShowImage] = (0, react_1.useState)(true);
    const [showInitials, setShowInitials] = (0, react_1.useState)(true);
    const [avatarColor, setAvatarColor] = (0, react_1.useState)();
    const [textColor, setTextColor] = (0, react_1.useState)();
    const [size, setSize] = (0, react_1.useState)('96');
    const [iconSize, setIconSize] = (0, react_1.useState)(24);
    const [iconColor, setIconColor] = (0, react_1.useState)(undefined);
    const [initialsSize, setInitialsSize] = (0, react_1.useState)(16);
    const [fontWeight, setFontWeight] = (0, react_1.useState)('normal');
    const [fontFamily, setFontFamily] = (0, react_1.useState)('Georgia');
    const [name, setName] = (0, react_1.useState)('Steve Ballmer');
    const [initials, setInitials] = (0, react_1.useState)('');
    const [ringColor, setRingColor] = (0, react_1.useState)(undefined);
    const [ringBackgroundColor, setRingBackgroundColor] = (0, react_1.useState)('yellow');
    const [ringThickness, setRingThickness] = (0, react_1.useState)('4');
    const [ringInnerGap, setRingInnerGap] = (0, react_1.useState)('4');
    const [showRing, setShowRing] = (0, react_1.useState)(true);
    const CustomizedAvatar = (0, react_1.useMemo)(() => {
        const tokens = {
            avatarColor,
            color: textColor,
            size: parseInt(size),
            iconSize: iconSize,
            iconColor,
            fontSize: initialsSize,
            fontWeight: fontWeight,
            fontFamily,
            ringColor,
            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,
    ]);
    const 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: () => setShowImage(!showImage), checked: showImage, style: styles_1.commonTestStyles.vmargin },
                showImage ? 'Hide' : 'Show',
                " image"),
            react_1.default.createElement(react_native_2.ToggleButton, { onClick: () => setShowInitials(!showInitials), checked: showInitials, style: styles_1.commonTestStyles.vmargin },
                showInitials ? 'Hide' : 'Show',
                " initials"),
            react_1.default.createElement(react_native_2.ToggleButton, { onClick: () => 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: (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: (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: (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: (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: (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: (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: (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: (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: (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: (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: (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: (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: (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: (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