import * as React from 'react';
import { Switch, View, Text, TextInput } from 'react-native';
import { PersonaCoin } from '@fluentui/react-native';
import { useTheme } from '@fluentui-react-native/theme-types';
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
import { steveBallmerPhotoUrl } from './styles';
import { AlignmentPicker } from '../Common/AlignmentPicker';
import { Slider } from '../Common/Slider';
import { commonTestStyles as commonStyles } from '../Common/styles';
const getThemedStyles = themedStyleSheet((t) => {
    return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
});
export const CustomizeUsage = () => {
    const [showImage, setShowImage] = React.useState(true);
    const [coinColor, setCoinColor] = React.useState();
    const [textColor, setTextColor] = React.useState();
    const [physicalSize, setPhysicalSize] = React.useState(80);
    const [iconSize, setIconSize] = React.useState(24);
    const [iconStrokeWidth, setIconStrokeWidth] = React.useState(2);
    const [iconStrokeColor, setIconStrokeColor] = React.useState(undefined);
    const [initialsSize, setInitialsSize] = React.useState(14);
    const [horizontalAlignment, setHorizontalAlignment] = React.useState();
    const [verticalAlignment, setVerticalAlignment] = React.useState();
    const [ringColor, setRingColor] = React.useState('red');
    const [ringBackgroundColor, setRingBackgroundColor] = React.useState(undefined);
    const [showRing, setShowRing] = React.useState(true);
    const [transparent, setTransparent] = React.useState(false);
    const theme = useTheme();
    const textBoxBorderStyle = getThemedStyles(theme);
    const CustomizedPersonaCoin = React.useMemo(() => {
        const tokens = {
            backgroundColor: coinColor,
            color: textColor,
            horizontalIconAlignment: horizontalAlignment,
            verticalIconAlignment: verticalAlignment,
            iconSize: iconSize,
            iconStrokeWidth: iconStrokeWidth,
            iconStrokeColor: iconStrokeColor,
            initialsSize: initialsSize,
            coinSize: physicalSize,
        };
        return PersonaCoin.customize({ tokens });
    }, [
        coinColor,
        textColor,
        horizontalAlignment,
        verticalAlignment,
        iconSize,
        iconStrokeWidth,
        iconStrokeColor,
        initialsSize,
        physicalSize,
    ]);
    return (React.createElement(View, { style: commonStyles.root },
        React.createElement(View, { style: commonStyles.settings },
            React.createElement(View, { style: commonStyles.switch },
                React.createElement(Text, null, "Show image"),
                React.createElement(Switch, { value: showImage, onValueChange: setShowImage })),
            React.createElement(View, { style: commonStyles.switch },
                React.createElement(Text, null, "Show rings"),
                React.createElement(Switch, { value: showRing, onValueChange: setShowRing })),
            React.createElement(View, { style: commonStyles.switch },
                React.createElement(Text, null, "Transparent Ring"),
                React.createElement(Switch, { value: transparent, onValueChange: setTransparent })),
            React.createElement(TextInput, { accessibilityLabel: "Background color", style: textBoxBorderStyle.textbox, placeholder: "Background color", blurOnSubmit: true, onSubmitEditing: (e) => {
                    setCoinColor(e.nativeEvent.text);
                } }),
            React.createElement(TextInput, { accessibilityLabel: "Initials text color", style: textBoxBorderStyle.textbox, placeholder: "Initials text color", blurOnSubmit: true, onSubmitEditing: (e) => {
                    setTextColor(e.nativeEvent.text);
                } }),
            React.createElement(TextInput, { accessibilityLabel: "Icon stroke color", style: textBoxBorderStyle.textbox, placeholder: "Icon stroke color", blurOnSubmit: true, onSubmitEditing: (e) => {
                    setIconStrokeColor(e.nativeEvent.text);
                } }),
            React.createElement(TextInput, { accessibilityLabel: "Ring color", style: textBoxBorderStyle.textbox, placeholder: "Ring color", blurOnSubmit: true, onSubmitEditing: (e) => {
                    setRingColor(e.nativeEvent.text);
                } }),
            React.createElement(TextInput, { accessibilityLabel: "Ring background color", style: textBoxBorderStyle.textbox, placeholder: "Ring background color", blurOnSubmit: true, onSubmitEditing: (e) => {
                    setRingBackgroundColor(e.nativeEvent.text);
                } }),
            React.createElement(AlignmentPicker, { style: commonStyles.header, label: "Horizontal icon alignment", onSelectionChange: setHorizontalAlignment }),
            React.createElement(AlignmentPicker, { style: commonStyles.header, label: "Vertical icon alignment", onSelectionChange: setVerticalAlignment }),
            React.createElement(Text, null, "Coin size"),
            React.createElement(Slider, { minimum: 8, maximum: 200, initialValue: 80, style: commonStyles.vmargin, onChange: setPhysicalSize }),
            React.createElement(Text, null, "Icon size"),
            React.createElement(Slider, { minimum: 8, maximum: 100, initialValue: 24, style: commonStyles.vmargin, onChange: setIconSize }),
            React.createElement(Text, null, "Icon stroke width"),
            React.createElement(Slider, { minimum: 0, maximum: 8, initialValue: 2, style: commonStyles.vmargin, onChange: setIconStrokeWidth }),
            React.createElement(Text, null, "Font size"),
            React.createElement(Slider, { minimum: 5, maximum: 50, initialValue: 14, style: commonStyles.vmargin, onChange: setInitialsSize })),
        React.createElement(CustomizedPersonaCoin, { initials: "SB", imageDescription: "Former CEO of Microsoft", presence: "blocked", imageUrl: showImage ? steveBallmerPhotoUrl : undefined, ring: showRing
                ? {
                    ringColor,
                    ringBackgroundColor,
                    ringThickness: 4,
                    innerGap: 4,
                    transparent,
                }
                : undefined })));
};
//# sourceMappingURL=CustomizeUsage.js.map