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 { svgProps } from '../Common/iconExamples';
import { commonTestStyles as commonStyles } from '../Common/styles';
import { steveBallmerPhotoUrl } from '../PersonaCoin/styles';
const styles = StyleSheet.create({
    avatarTestCaseContainer: { marginLeft: 20 },
    avatarTokenOptions: { flexDirection: 'row' },
    fontTokenOptions: { paddingHorizontal: 20 },
    tokenHeader: { fontWeight: 'bold' },
});
export const CustomizeUsage = () => {
    const [showImage, setShowImage] = useState(true);
    const [showInitials, setShowInitials] = useState(true);
    const [avatarColor, setAvatarColor] = useState();
    const [textColor, setTextColor] = useState();
    const [size, setSize] = useState('96');
    const [iconSize, setIconSize] = useState(24);
    const [iconColor, setIconColor] = useState(undefined);
    const [initialsSize, setInitialsSize] = useState(16);
    const [fontWeight, setFontWeight] = useState('normal');
    const [fontFamily, setFontFamily] = useState('Georgia');
    const [name, setName] = useState('Steve Ballmer');
    const [initials, setInitials] = useState('');
    const [ringColor, setRingColor] = useState(undefined);
    const [ringBackgroundColor, setRingBackgroundColor] = useState('yellow');
    const [ringThickness, setRingThickness] = useState('4');
    const [ringInnerGap, setRingInnerGap] = useState('4');
    const [showRing, setShowRing] = useState(true);
    const CustomizedAvatar = 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.customize(tokens);
    }, [
        avatarColor,
        textColor,
        iconColor,
        iconSize,
        initialsSize,
        size,
        ringColor,
        ringBackgroundColor,
        ringInnerGap,
        ringThickness,
        fontWeight,
        fontFamily,
    ]);
    const 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: () => setShowImage(!showImage), checked: showImage, style: commonStyles.vmargin },
                showImage ? 'Hide' : 'Show',
                " image"),
            React.createElement(ToggleButton, { onClick: () => setShowInitials(!showInitials), checked: showInitials, style: commonStyles.vmargin },
                showInitials ? 'Hide' : 'Show',
                " initials"),
            React.createElement(ToggleButton, { onClick: () => 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: (e) => {
                            setName(e.nativeEvent.text);
                        } }),
                    React.createElement(TextInput, { accessibilityLabel: "Initials", style: commonStyles.textBox, placeholder: "Initials", blurOnSubmit: true, onSubmitEditing: (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: (e) => {
                            setAvatarColor(e.nativeEvent.text);
                        } }),
                    React.createElement(TextInput, { accessibilityLabel: "Avatar size", style: commonStyles.textBox, placeholder: "Avatar size", blurOnSubmit: true, onSubmitEditing: (e) => {
                            setSize(e.nativeEvent.text);
                        } }),
                    React.createElement(TextInput, { accessibilityLabel: "Icon size", style: commonStyles.textBox, placeholder: "Icon size", blurOnSubmit: true, onSubmitEditing: (e) => {
                            setIconSize(parseInt(e.nativeEvent.text));
                        } }),
                    React.createElement(TextInput, { accessibilityLabel: "Icon color", style: commonStyles.textBox, placeholder: "Icon color", blurOnSubmit: true, onSubmitEditing: (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: (e) => {
                            setRingBackgroundColor(e.nativeEvent.text);
                        } }),
                    React.createElement(TextInput, { accessibilityLabel: "Ring color", style: commonStyles.textBox, placeholder: "Ring color", blurOnSubmit: true, onSubmitEditing: (e) => {
                            setRingColor(e.nativeEvent.text);
                        } }),
                    React.createElement(TextInput, { accessibilityLabel: "Ring thickness", style: commonStyles.textBox, placeholder: "Ring thickness", blurOnSubmit: true, onSubmitEditing: (e) => {
                            setRingThickness(e.nativeEvent.text);
                        } }),
                    React.createElement(TextInput, { accessibilityLabel: "Ring inner gap", style: commonStyles.textBox, placeholder: "Ring inner gap", blurOnSubmit: true, onSubmitEditing: (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: (e) => {
                            setTextColor(e.nativeEvent.text);
                        } }),
                    React.createElement(TextInput, { accessibilityLabel: "Initials size", style: commonStyles.textBox, placeholder: "Initials size", blurOnSubmit: true, onSubmitEditing: (e) => {
                            setInitialsSize(parseInt(e.nativeEvent.text));
                        } }),
                    React.createElement(TextInput, { accessibilityLabel: "Font weight", style: commonStyles.textBox, placeholder: "Font weight", blurOnSubmit: true, onSubmitEditing: (e) => {
                            setFontWeight(e.nativeEvent.text);
                        } }),
                    React.createElement(TextInput, { accessibilityLabel: "Font family", style: commonStyles.textBox, placeholder: "Font family", blurOnSubmit: true, onSubmitEditing: (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