import { __assign } from "tslib";
import * as React from 'react';
import { Switch, View, Text, TextInput, StyleSheet } from 'react-native';
import { PersonaCoin } from '@fluentui/react-native';
import { useTheme } from '@fluentui-react-native/theme-types';
import Slider from '@react-native-community/slider';
import { steveBallmerPhotoUrl } from './styles';
import { commonTestStyles as commonStyles } from '../Common/styles';
var styles = StyleSheet.create({ slider: __assign(__assign({}, commonStyles.vmargin), { flex: 1 }) });
var StyledSlider = function (props) {
    var title = props.title, min = props.min, max = props.max, initial = props.initial, onChange = props.onChange, current = props.current, step = props.step;
    var theme = useTheme();
    return (React.createElement(View, { style: { flexDirection: 'row' } },
        React.createElement(Text, { style: { flex: 0.5, color: theme.colors.inputText } }, title),
        React.createElement(Slider, { step: step || 1, minimumValue: min, maximumValue: max, value: initial, style: styles.slider, onValueChange: onChange }),
        React.createElement(Text, { style: { flex: 0.2, color: theme.colors.inputText } }, current)));
};
var StyledTextInput = function (props) {
    var theme = useTheme();
    var textInputStyles = [
        commonStyles.textBox,
        { flex: 1, marginHorizontal: 5, borderColor: theme.colors.disabledBodyText, color: theme.colors.inputText },
    ];
    return (React.createElement(TextInput, __assign({ accessibilityLabel: props.placeholder, style: textInputStyles, placeholderTextColor: theme.colors.disabledBodyText, blurOnSubmit: true }, props)));
};
var StyledSwitch = function (props) {
    var title = props.title, value = props.value, onChange = props.onChange;
    var theme = useTheme();
    return (React.createElement(View, { style: commonStyles.switch },
        React.createElement(Text, { style: { color: theme.colors.inputText, flex: 1 } }, title),
        React.createElement(Switch, { style: { flex: 1 }, value: value, onValueChange: onChange })));
};
export var CustomizeUsage = function () {
    var _a = React.useState(true), showImage = _a[0], setShowImage = _a[1];
    var _b = React.useState(true), showRings = _b[0], setShowRings = _b[1];
    var _c = React.useState(true), showPresence = _c[0], setShowPresence = _c[1];
    var _d = React.useState(false), showColoredBackground = _d[0], setShowColoredBackground = _d[1];
    var _e = React.useState(false), transparent = _e[0], setTransparent = _e[1];
    var _f = React.useState('green'), coinColor = _f[0], setCoinColor = _f[1];
    var _g = React.useState('white'), textColor = _g[0], setTextColor = _g[1];
    var _h = React.useState(88), coinSize = _h[0], setCoinsize = _h[1];
    var _j = React.useState(4), ringThickness = _j[0], setRingThickness = _j[1];
    var _k = React.useState(4), innerGap = _k[0], setInnerGap = _k[1];
    var _l = React.useState(20), iconSize = _l[0], setIconSize = _l[1];
    var _m = React.useState(4), iconStrokeWidth = _m[0], setIconStrokeWidth = _m[1];
    var _o = React.useState('green'), ringColor = _o[0], setRingColor = _o[1];
    var _p = React.useState(undefined), ringBackgroundColor = _p[0], setRingBackgroundColor = _p[1];
    var CustomizedPersonaCoin = React.useMemo(function () {
        var tokens = {
            backgroundColor: coinColor,
            color: textColor,
            ring: { ringColor: 'red' },
            coinSize: coinSize,
            iconSize: iconSize,
            iconStrokeWidth: iconStrokeWidth,
        };
        return PersonaCoin.customize({ tokens: tokens });
    }, [coinColor, textColor, coinSize, iconSize, iconStrokeWidth]);
    return (React.createElement(View, { style: { flexDirection: 'column', padding: 10, backgroundColor: showColoredBackground ? 'gray' : 'transparent' } },
        React.createElement(View, { style: { flexDirection: 'row', padding: 20, alignItems: 'center' } },
            React.createElement(View, { style: { width: '35%', alignItems: 'center' } },
                React.createElement(CustomizedPersonaCoin, { initials: "SB", imageDescription: "Photo of Satya Nadella", imageUrl: showImage ? steveBallmerPhotoUrl : undefined, presence: showPresence && iconSize ? 'away' : undefined, ring: showRings && ringThickness
                        ? {
                            ringColor: ringColor,
                            ringBackgroundColor: ringBackgroundColor,
                            ringThickness: ringThickness,
                            innerGap: innerGap,
                            transparent: transparent,
                        }
                        : undefined })),
            React.createElement(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(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(View, { style: { flexDirection: 'row' } },
                React.createElement(StyledTextInput, { placeholder: "Ring glow color", onSubmitEditing: function (e) {
                        setRingColor(e.nativeEvent.text);
                    } }),
                React.createElement(StyledTextInput, { placeholder: "Ring background color", onSubmitEditing: function (e) {
                        setRingBackgroundColor(e.nativeEvent.text);
                    } })),
            React.createElement(View, { style: { flexDirection: 'row' } },
                React.createElement(StyledTextInput, { placeholder: "Background color", onSubmitEditing: function (e) {
                        setCoinColor(e.nativeEvent.text);
                    } }),
                React.createElement(StyledTextInput, { placeholder: "Initials text color", onSubmitEditing: function (e) {
                        setTextColor(e.nativeEvent.text);
                    } })))));
};
//# sourceMappingURL=CustomizeUsage.mobile.js.map