import * as React from 'react';
import { View } from 'react-native';
import { Separator } from '@fluentui/react-native';
import { RadioGroupV1 as RadioGroup, Radio } from '@fluentui-react-native/radio-group';
export const DefaultRadioGroup = () => {
    // Client's example onChange function
    const onChange = React.useCallback((key) => {
        console.log(key);
    }, []);
    const [selectedKey, setSelectedKey] = React.useState('C');
    const onChange2 = React.useCallback((key) => {
        setSelectedKey(key);
    }, []);
    return (React.createElement(View, null,
        React.createElement(RadioGroup, { label: "Uncontrolled RadioGroup", defaultValue: "X", onChange: onChange },
            React.createElement(Radio, { label: "Option W", value: "W", accessibilityLabel: "Test Accessibility Label" }),
            React.createElement(Radio, { label: "Option X", value: "X" }),
            React.createElement(Radio, { label: "Option Y (disabled)", value: "C", disabled: true }),
            React.createElement(Radio, { label: "Option Z", value: "Z" })),
        React.createElement(Separator, null),
        React.createElement(RadioGroup, { label: "Controlled RadioGroup", value: selectedKey, onChange: onChange2 },
            React.createElement(View, null,
                React.createElement(Radio, { label: "Option A", value: "A", accessibilityLabel: "Test Accessibility Label", accessibilityPositionInSet: 1, accessibilitySetSize: 4 }),
                React.createElement(Radio, { label: "Option B", value: "B", accessibilityPositionInSet: 2, accessibilitySetSize: 4 }),
                React.createElement(Radio, { label: "Option C", value: "C", accessibilityPositionInSet: 3, accessibilitySetSize: 4 }),
                React.createElement(Radio, { label: "Option D", value: "D", accessibilityPositionInSet: 4, accessibilitySetSize: 4 })))));
};
//# sourceMappingURL=DefaultRadioGroup.js.map