"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomizeUsage = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_native_1 = require("react-native");
const react_native_2 = require("@fluentui/react-native");
const theme_types_1 = require("@fluentui-react-native/theme-types");
const slider_1 = tslib_1.__importDefault(require("@react-native-community/slider"));
const styles_1 = require("./styles");
const styles_2 = require("../Common/styles");
const styles = react_native_1.StyleSheet.create({ slider: { ...styles_2.commonTestStyles.vmargin, flex: 1 } });
const StyledSlider = (props) => {
    const { title, min, max, initial, onChange, current, step } = props;
    const theme = (0, theme_types_1.useTheme)();
    return (React.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
        React.createElement(react_native_1.Text, { style: { flex: 0.5, color: theme.colors.inputText } }, title),
        React.createElement(slider_1.default, { step: step || 1, minimumValue: min, maximumValue: max, value: initial, style: styles.slider, onValueChange: onChange }),
        React.createElement(react_native_1.Text, { style: { flex: 0.2, color: theme.colors.inputText } }, current)));
};
const StyledTextInput = (props) => {
    const theme = (0, theme_types_1.useTheme)();
    const textInputStyles = [
        styles_2.commonTestStyles.textBox,
        { flex: 1, marginHorizontal: 5, borderColor: theme.colors.disabledBodyText, color: theme.colors.inputText },
    ];
    return (React.createElement(react_native_1.TextInput, { accessibilityLabel: props.placeholder, style: textInputStyles, placeholderTextColor: theme.colors.disabledBodyText, blurOnSubmit: true, ...props }));
};
const StyledSwitch = (props) => {
    const { title, value, onChange } = props;
    const theme = (0, theme_types_1.useTheme)();
    return (React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.switch },
        React.createElement(react_native_1.Text, { style: { color: theme.colors.inputText, flex: 1 } }, title),
        React.createElement(react_native_1.Switch, { style: { flex: 1 }, value: value, onValueChange: onChange })));
};
const CustomizeUsage = () => {
    const [showImage, setShowImage] = React.useState(true);
    const [showRings, setShowRings] = React.useState(true);
    const [showPresence, setShowPresence] = React.useState(true);
    const [showColoredBackground, setShowColoredBackground] = React.useState(false);
    const [transparent, setTransparent] = React.useState(false);
    const [coinColor, setCoinColor] = React.useState('green');
    const [textColor, setTextColor] = React.useState('white');
    const [coinSize, setCoinsize] = React.useState(88);
    const [ringThickness, setRingThickness] = React.useState(4);
    const [innerGap, setInnerGap] = React.useState(4);
    const [iconSize, setIconSize] = React.useState(20);
    const [iconStrokeWidth, setIconStrokeWidth] = React.useState(4);
    const [ringColor, setRingColor] = React.useState('green');
    const [ringBackgroundColor, setRingBackgroundColor] = React.useState(undefined);
    const CustomizedPersonaCoin = React.useMemo(() => {
        const tokens = {
            backgroundColor: coinColor,
            color: textColor,
            ring: { ringColor: 'red' },
            coinSize: coinSize,
            iconSize: iconSize,
            iconStrokeWidth: iconStrokeWidth,
        };
        return react_native_2.PersonaCoin.customize({ tokens });
    }, [coinColor, textColor, coinSize, iconSize, iconStrokeWidth]);
    return (React.createElement(react_native_1.View, { style: { flexDirection: 'column', padding: 10, backgroundColor: showColoredBackground ? 'gray' : 'transparent' } },
        React.createElement(react_native_1.View, { style: { flexDirection: 'row', padding: 20, alignItems: 'center' } },
            React.createElement(react_native_1.View, { style: { width: '35%', alignItems: 'center' } },
                React.createElement(CustomizedPersonaCoin, { initials: "SB", imageDescription: "Photo of Satya Nadella", imageUrl: showImage ? styles_1.steveBallmerPhotoUrl : undefined, presence: showPresence && iconSize ? 'away' : undefined, ring: showRings && ringThickness
                        ? {
                            ringColor,
                            ringBackgroundColor,
                            ringThickness,
                            innerGap,
                            transparent,
                        }
                        : undefined })),
            React.createElement(react_native_1.View, { style: { width: '50%', marginLeft: 30 } },
                React.createElement(StyledSwitch, { title: "Change Background", value: showColoredBackground, onChange: setShowColoredBackground }),
                React.createElement(StyledSwitch, { title: "Show Image", value: showImage, onChange: setShowImage }),
                React.createElement(StyledSwitch, { title: "Show Presence", value: showPresence, onChange: setShowPresence }),
                React.createElement(StyledSwitch, { title: "Show Rings", value: showRings, onChange: setShowRings }),
                React.createElement(StyledSwitch, { title: "Show transparent rings", value: transparent, onChange: setTransparent }))),
        React.createElement(react_native_1.View, null,
            React.createElement(StyledSlider, { min: 8, max: 120, initial: 88, onChange: setCoinsize, current: coinSize, step: 8, title: "coinSize" }),
            React.createElement(StyledSlider, { min: 0, max: 8, initial: 4, onChange: setRingThickness, current: ringThickness, title: "ringThickness" }),
            React.createElement(StyledSlider, { min: 0, max: 8, initial: 4, onChange: setInnerGap, current: innerGap, title: "innerGap" }),
            React.createElement(StyledSlider, { min: 0, max: 28, initial: 20, onChange: setIconSize, current: iconSize, step: 4, title: "iconSize" }),
            React.createElement(StyledSlider, { min: 2, max: 8, initial: 4, onChange: setIconStrokeWidth, current: iconStrokeWidth, title: "iconStrokeWidth" }),
            React.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
                React.createElement(StyledTextInput, { placeholder: "Ring glow color", onSubmitEditing: (e) => {
                        setRingColor(e.nativeEvent.text);
                    } }),
                React.createElement(StyledTextInput, { placeholder: "Ring background color", onSubmitEditing: (e) => {
                        setRingBackgroundColor(e.nativeEvent.text);
                    } })),
            React.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
                React.createElement(StyledTextInput, { placeholder: "Background color", onSubmitEditing: (e) => {
                        setCoinColor(e.nativeEvent.text);
                    } }),
                React.createElement(StyledTextInput, { placeholder: "Initials text color", onSubmitEditing: (e) => {
                        setTextColor(e.nativeEvent.text);
                    } })))));
};
exports.CustomizeUsage = CustomizeUsage;
//# sourceMappingURL=CustomizeUsage.mobile.js.map