import * as React from 'react';
import { View, Text, Switch, TextInput } from 'react-native';
import { Persona } from '@fluentui/react-native';
import { useTheme } from '@fluentui-react-native/theme-types';
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
import { michaelImageUrl } from './styles';
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 [textSize, setTextSize] = React.useState(23);
    const [secondarySize, setSecondarySize] = React.useState(20);
    const [tertiarySize, setTertiarySize] = React.useState(17);
    const [optionalSize, setOptionalSize] = React.useState(14);
    const [horizontalGap, setHorizontalGap] = React.useState();
    const [verticalGap, setVerticalGap] = React.useState();
    const theme = useTheme();
    const textBoxBorderStyle = getThemedStyles(theme);
    const CustomizedPersona = React.useMemo(() => {
        const tokens = {
            backgroundColor: coinColor,
            color: textColor,
            textFont: { fontSize: textSize },
            secondaryFont: { fontSize: secondarySize },
            tertiaryFont: { fontSize: tertiarySize },
            optionalFont: { fontSize: optionalSize },
            horizontalGap: horizontalGap,
            verticalGap: verticalGap,
        };
        return Persona.customize({ tokens });
    }, [coinColor, textColor, textSize, secondarySize, tertiarySize, optionalSize, horizontalGap, verticalGap]);
    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(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(Text, null, "Primary text size"),
            React.createElement(Slider, { maximum: 50, minimum: 5, initialValue: textSize, style: commonStyles.vmargin, onChange: setTextSize }),
            React.createElement(Text, null, "Secondary text size"),
            React.createElement(Slider, { maximum: 50, minimum: 5, initialValue: secondarySize, style: commonStyles.vmargin, onChange: setSecondarySize }),
            React.createElement(Text, null, "Tertiary text size"),
            React.createElement(Slider, { maximum: 50, minimum: 5, initialValue: tertiarySize, style: commonStyles.vmargin, onChange: setTertiarySize }),
            React.createElement(Text, null, "Optional text size"),
            React.createElement(Slider, { maximum: 50, minimum: 5, initialValue: optionalSize, style: commonStyles.vmargin, onChange: setOptionalSize }),
            React.createElement(Text, null, "Horizontal gap"),
            React.createElement(Slider, { maximum: 100, initialValue: 5, minimum: 0, style: commonStyles.vmargin, onChange: setHorizontalGap }),
            React.createElement(Text, null, "Vertical gap"),
            React.createElement(Slider, { maximum: 20, initialValue: 5, minimum: 0, style: commonStyles.vmargin, onChange: setVerticalGap })),
        React.createElement(CustomizedPersona, { initials: "MJ", size: "size72", text: "Michael Jackson", secondaryText: "Pop singer", tertiaryText: "King of pop", optionalText: "Indiana", imageDescription: "Legendary pop singer", presence: "offline", imageUrl: showImage ? michaelImageUrl : undefined })));
};
//# sourceMappingURL=CustomizeUsage.js.map