import * as React from 'react';
import { View, TextInput, Text, StyleSheet } from 'react-native';
import { RadioGroupV1 as RadioGroup, Radio } from '@fluentui-react-native/radio-group';
import { commonTestStyles as commonStyles } from '../Common/styles';
var styles = StyleSheet.create({
    tokensRow: {
        flexDirection: 'row',
        marginBottom: 10,
    },
    tokensColumn: {
        flexDirection: 'column',
        margin: 10,
    },
});
export var CustomizedRadioGroup = function () {
    // RadioGroup
    var _a = React.useState('black'), groupColor = _a[0], setGroupColor = _a[1];
    var _b = React.useState('red'), requiredColor = _b[0], setRequiredColor = _b[1];
    var _c = React.useState(2), requiredPadding = _c[0], setRequiredPadding = _c[1];
    // Radio
    var _d = React.useState('white'), borderColor = _d[0], setBorderColor = _d[1];
    var _e = React.useState(1), borderWidth = _e[0], setBorderWidth = _e[1];
    var _f = React.useState(1), borderRadius = _f[0], setBorderRadius = _f[1];
    var _g = React.useState(1), radioBorderWidth = _g[0], setRadioBorderWidth = _g[1];
    var _h = React.useState(1), radioVisibility = _h[0], setRadioVisibility = _h[1];
    var _j = React.useState('black'), radioBorder = _j[0], setRadioBorder = _j[1];
    var _k = React.useState(20), radioOuterCircleSize = _k[0], setRadioOuterCircleSize = _k[1];
    var _l = React.useState(10), radioInnerCircleSize = _l[0], setRadioInnerCircleSize = _l[1];
    var _m = React.useState('blue'), radioFill = _m[0], setRadioFill = _m[1];
    var _o = React.useState('black'), color = _o[0], setColor = _o[1];
    var _p = React.useState(6), marginTop = _p[0], setMarginTop = _p[1];
    var _q = React.useState(6), marginRight = _q[0], setMarginRight = _q[1];
    var _r = React.useState(6), marginBottom = _r[0], setMarginBottom = _r[1];
    var _s = React.useState(4), marginLeft = _s[0], setMarginLeft = _s[1];
    var _t = React.useState(4), labelMarginVertical = _t[0], setLabelMarginVertical = _t[1];
    var _u = React.useState(2), labelMarginRight = _u[0], setLabelMarginRight = _u[1];
    var _v = React.useState(0), labelMarginLeft = _v[0], setLabelMarginLeft = _v[1];
    var _w = React.useState(2), subtextMarginTop = _w[0], setSubtextMarginTop = _w[1];
    var _x = React.useState(2), subtextMarginBottom = _x[0], setSubtextMarginBottom = _x[1];
    var CustomRadioGroup = React.useMemo(function () {
        var tokens = {
            color: groupColor,
            requiredColor: requiredColor,
            requiredPadding: requiredPadding,
            disabled: {
                color: groupColor,
            },
        };
        return RadioGroup.customize(tokens);
    }, [groupColor, requiredColor, requiredPadding]);
    var CustomRadio = React.useMemo(function () {
        var tokens = {
            borderColor: borderColor,
            borderWidth: borderWidth,
            borderRadius: borderRadius,
            radioBorderWidth: radioBorderWidth,
            radioVisibility: radioVisibility,
            radioBorder: radioBorder,
            radioOuterCircleSize: radioOuterCircleSize,
            radioInnerCircleSize: radioInnerCircleSize,
            color: color,
            marginTop: marginTop,
            marginRight: marginRight,
            marginBottom: marginBottom,
            marginLeft: marginLeft,
            labelMarginVertical: labelMarginVertical,
            labelMarginRight: labelMarginRight,
            labelMarginLeft: labelMarginLeft,
            subtextMarginTop: subtextMarginTop,
            subtextMarginBottom: subtextMarginBottom,
            labelPositionBelow: {
                marginLeft: marginLeft,
            },
            disabled: {
                radioBorder: radioBorder,
                color: color,
                radioVisibility: radioVisibility,
            },
            hovered: {
                radioBorder: radioBorder,
                color: color,
                selected: {
                    radioBorder: radioBorder,
                    radioFill: radioFill,
                    color: color,
                    radioVisibility: radioVisibility,
                },
            },
            pressed: {
                radioBorder: radioBorder,
                color: color,
                selected: {
                    radioBorder: radioBorder,
                    radioFill: radioFill,
                    color: color,
                    radioVisibility: radioVisibility,
                },
            },
            focused: {
                borderColor: borderColor,
                selected: {
                    radioVisibility: radioVisibility,
                },
            },
            selected: {
                radioBorder: radioBorder,
                radioFill: radioFill,
                color: color,
                radioVisibility: radioVisibility,
                disabled: {
                    radioFill: radioFill,
                },
            },
        };
        return Radio.customize(tokens);
    }, [
        borderColor,
        borderWidth,
        borderRadius,
        radioBorderWidth,
        radioVisibility,
        radioBorder,
        radioOuterCircleSize,
        radioInnerCircleSize,
        radioFill,
        color,
        marginTop,
        marginRight,
        marginBottom,
        marginLeft,
        labelMarginVertical,
        labelMarginRight,
        labelMarginLeft,
        subtextMarginTop,
        subtextMarginBottom,
    ]);
    return (React.createElement(View, { style: styles.tokensColumn },
        React.createElement(View, { style: styles.tokensRow },
            React.createElement(View, null,
                React.createElement(Text, null, "RadioGroup Tokens"),
                React.createElement(TextInput, { accessibilityLabel: "RadioGroup color", style: commonStyles.textBox, placeholder: "color", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setGroupColor(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "RadioGroup required color", style: commonStyles.textBox, placeholder: "requiredColor", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setRequiredColor(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "RadioGroup required padding", style: commonStyles.textBox, placeholder: "requiredPadding", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setRequiredPadding(parseInt(e.nativeEvent.text.toString()));
                    } }))),
        React.createElement(View, { style: styles.tokensRow },
            React.createElement(View, null,
                React.createElement(Text, null, "Radio Border Tokens"),
                React.createElement(TextInput, { accessibilityLabel: "Radio border color", style: commonStyles.textBox, placeholder: "borderColor", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setBorderColor(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio border width", style: commonStyles.textBox, placeholder: "borderWidth", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setBorderWidth(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio border radius", style: commonStyles.textBox, placeholder: "borderRadius", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setBorderRadius(parseInt(e.nativeEvent.text.toString()));
                    } })),
            React.createElement(View, null,
                React.createElement(Text, null, "Radio Button Tokens"),
                React.createElement(TextInput, { accessibilityLabel: "Radio button border width", style: commonStyles.textBox, placeholder: "radioBorderWidth", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setRadioBorderWidth(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio button visibility", style: commonStyles.textBox, placeholder: "radioVisibility", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setRadioVisibility(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio button border", style: commonStyles.textBox, placeholder: "radioBorder", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setRadioBorder(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio button size", style: commonStyles.textBox, placeholder: "radioOuterCircleSize", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setRadioOuterCircleSize(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio button inner circle size", style: commonStyles.textBox, placeholder: "radioInnerCircleSize", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setRadioInnerCircleSize(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio button fill", style: commonStyles.textBox, placeholder: "radioFill", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setRadioFill(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio button margin top", style: commonStyles.textBox, placeholder: "marginTop", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setMarginTop(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio button margin right", style: commonStyles.textBox, placeholder: "marginRight", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setMarginRight(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio button margin bottom", style: commonStyles.textBox, placeholder: "marginBottom", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setMarginBottom(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio button margin left", style: commonStyles.textBox, placeholder: "marginLeft", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setMarginLeft(parseInt(e.nativeEvent.text.toString()));
                    } })),
            React.createElement(View, null,
                React.createElement(Text, null, "Radio Label Tokens"),
                React.createElement(TextInput, { accessibilityLabel: "Radio label color", style: commonStyles.textBox, placeholder: "color", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setColor(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio label margin vertical", style: commonStyles.textBox, placeholder: "marginVertical", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setLabelMarginVertical(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio label margin right", style: commonStyles.textBox, placeholder: "marginRight", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setLabelMarginRight(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio label margin left", style: commonStyles.textBox, placeholder: "marginLeft", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setLabelMarginLeft(parseInt(e.nativeEvent.text.toString()));
                    } })),
            React.createElement(View, null,
                React.createElement(Text, null, "Radio Subtext Tokens"),
                React.createElement(TextInput, { accessibilityLabel: "Radio subtext margin top", style: commonStyles.textBox, placeholder: "marginTop", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setSubtextMarginTop(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio subtext margin bottom", style: commonStyles.textBox, placeholder: "marginBottom", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setSubtextMarginBottom(parseInt(e.nativeEvent.text.toString()));
                    } }))),
        React.createElement(CustomRadioGroup, { required: true, label: "Custom RadioGroup", accessibilityLabel: "Custom Switch" },
            React.createElement(CustomRadio, { label: "Apple", subtext: "Fruit", value: "Apple" }),
            React.createElement(CustomRadio, { label: "Pear", value: "Pear" }),
            React.createElement(CustomRadio, { label: "Banana", value: "Banana" }),
            React.createElement(CustomRadio, { label: "Orange", value: "Orange" }))));
};
//# sourceMappingURL=CustomizedRadioGroup.js.map