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';
const styles = StyleSheet.create({
    tokensRow: {
        flexDirection: 'row',
        marginBottom: 10,
    },
    tokensColumn: {
        flexDirection: 'column',
        margin: 10,
    },
});
export const CustomizedRadioGroup = () => {
    // RadioGroup
    const [groupColor, setGroupColor] = React.useState('black');
    const [requiredColor, setRequiredColor] = React.useState('red');
    const [requiredPadding, setRequiredPadding] = React.useState(2);
    // Radio
    const [borderColor, setBorderColor] = React.useState('white');
    const [borderWidth, setBorderWidth] = React.useState(1);
    const [borderRadius, setBorderRadius] = React.useState(1);
    const [radioBorderWidth, setRadioBorderWidth] = React.useState(1);
    const [radioVisibility, setRadioVisibility] = React.useState(1);
    const [radioBorder, setRadioBorder] = React.useState('black');
    const [radioOuterCircleSize, setRadioOuterCircleSize] = React.useState(20);
    const [radioInnerCircleSize, setRadioInnerCircleSize] = React.useState(10);
    const [radioFill, setRadioFill] = React.useState('blue');
    const [color, setColor] = React.useState('black');
    const [marginTop, setMarginTop] = React.useState(6);
    const [marginRight, setMarginRight] = React.useState(6);
    const [marginBottom, setMarginBottom] = React.useState(6);
    const [marginLeft, setMarginLeft] = React.useState(4);
    const [labelMarginVertical, setLabelMarginVertical] = React.useState(4);
    const [labelMarginRight, setLabelMarginRight] = React.useState(2);
    const [labelMarginLeft, setLabelMarginLeft] = React.useState(0);
    const [subtextMarginTop, setSubtextMarginTop] = React.useState(2);
    const [subtextMarginBottom, setSubtextMarginBottom] = React.useState(2);
    const CustomRadioGroup = React.useMemo(() => {
        const tokens = {
            color: groupColor,
            requiredColor,
            requiredPadding,
            disabled: {
                color: groupColor,
            },
        };
        return RadioGroup.customize(tokens);
    }, [groupColor, requiredColor, requiredPadding]);
    const CustomRadio = React.useMemo(() => {
        const tokens = {
            borderColor,
            borderWidth,
            borderRadius,
            radioBorderWidth,
            radioVisibility,
            radioBorder,
            radioOuterCircleSize,
            radioInnerCircleSize,
            color,
            marginTop,
            marginRight,
            marginBottom,
            marginLeft,
            labelMarginVertical,
            labelMarginRight,
            labelMarginLeft,
            subtextMarginTop,
            subtextMarginBottom,
            labelPositionBelow: {
                marginLeft: marginLeft,
            },
            disabled: {
                radioBorder,
                color,
                radioVisibility,
            },
            hovered: {
                radioBorder,
                color,
                selected: {
                    radioBorder,
                    radioFill,
                    color,
                    radioVisibility,
                },
            },
            pressed: {
                radioBorder,
                color,
                selected: {
                    radioBorder,
                    radioFill,
                    color,
                    radioVisibility,
                },
            },
            focused: {
                borderColor,
                selected: {
                    radioVisibility,
                },
            },
            selected: {
                radioBorder,
                radioFill,
                color,
                radioVisibility,
                disabled: {
                    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: (e) => {
                        setGroupColor(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "RadioGroup required color", style: commonStyles.textBox, placeholder: "requiredColor", blurOnSubmit: true, onSubmitEditing: (e) => {
                        setRequiredColor(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "RadioGroup required padding", style: commonStyles.textBox, placeholder: "requiredPadding", blurOnSubmit: true, onSubmitEditing: (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: (e) => {
                        setBorderColor(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio border width", style: commonStyles.textBox, placeholder: "borderWidth", blurOnSubmit: true, onSubmitEditing: (e) => {
                        setBorderWidth(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio border radius", style: commonStyles.textBox, placeholder: "borderRadius", blurOnSubmit: true, onSubmitEditing: (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: (e) => {
                        setRadioBorderWidth(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio button visibility", style: commonStyles.textBox, placeholder: "radioVisibility", blurOnSubmit: true, onSubmitEditing: (e) => {
                        setRadioVisibility(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio button border", style: commonStyles.textBox, placeholder: "radioBorder", blurOnSubmit: true, onSubmitEditing: (e) => {
                        setRadioBorder(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio button size", style: commonStyles.textBox, placeholder: "radioOuterCircleSize", blurOnSubmit: true, onSubmitEditing: (e) => {
                        setRadioOuterCircleSize(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio button inner circle size", style: commonStyles.textBox, placeholder: "radioInnerCircleSize", blurOnSubmit: true, onSubmitEditing: (e) => {
                        setRadioInnerCircleSize(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio button fill", style: commonStyles.textBox, placeholder: "radioFill", blurOnSubmit: true, onSubmitEditing: (e) => {
                        setRadioFill(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio button margin top", style: commonStyles.textBox, placeholder: "marginTop", blurOnSubmit: true, onSubmitEditing: (e) => {
                        setMarginTop(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio button margin right", style: commonStyles.textBox, placeholder: "marginRight", blurOnSubmit: true, onSubmitEditing: (e) => {
                        setMarginRight(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio button margin bottom", style: commonStyles.textBox, placeholder: "marginBottom", blurOnSubmit: true, onSubmitEditing: (e) => {
                        setMarginBottom(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio button margin left", style: commonStyles.textBox, placeholder: "marginLeft", blurOnSubmit: true, onSubmitEditing: (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: (e) => {
                        setColor(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio label margin vertical", style: commonStyles.textBox, placeholder: "marginVertical", blurOnSubmit: true, onSubmitEditing: (e) => {
                        setLabelMarginVertical(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio label margin right", style: commonStyles.textBox, placeholder: "marginRight", blurOnSubmit: true, onSubmitEditing: (e) => {
                        setLabelMarginRight(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio label margin left", style: commonStyles.textBox, placeholder: "marginLeft", blurOnSubmit: true, onSubmitEditing: (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: (e) => {
                        setSubtextMarginTop(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Radio subtext margin bottom", style: commonStyles.textBox, placeholder: "marginBottom", blurOnSubmit: true, onSubmitEditing: (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