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