import { __assign } from "tslib";
import React from 'react';
import { Platform, Pressable, View } from 'react-native';
import { ButtonV1 as Button } from '@fluentui-react-native/button';
import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
import { TextV1 } from '@fluentui-react-native/text';
import { mobileStyles } from '../Common/styles';
var pressableStyle = { borderWidth: 1, padding: 4, gap: 4, flexDirection: 'row', alignItems: 'center' };
export var OtherCheckbox = function () {
    var _a = React.useState(false), isChecked = _a[0], setisChecked = _a[1];
    var setCheckedTrue = React.useCallback(function () {
        setisChecked(true);
    }, []);
    var setCheckedFalse = React.useCallback(function () {
        setisChecked(false);
    }, []);
    var onChange = React.useCallback(function (_e, checked) {
        setisChecked(checked);
    }, []);
    var onPress = React.useCallback(function () {
        setisChecked(!isChecked);
    }, [isChecked]);
    var memoizedStyles = React.useMemo(function () { return (Platform.OS === 'android' ? __assign(__assign({}, mobileStyles.containerSpacedEvenly), { height: 150 }) : { gap: 8 }); }, []);
    return (React.createElement(View, { style: memoizedStyles },
        React.createElement(View, null,
            React.createElement(Button, { onClick: setCheckedTrue, size: "small" }, "Check controlled checkboxes below"),
            React.createElement(Button, { onClick: setCheckedFalse, size: "small" }, "Uncheck controlled checkboxes below")),
        React.createElement(View, null,
            React.createElement(Checkbox, { label: "This is a controlled Checkbox", checked: isChecked, onChange: onChange }),
            React.createElement(Pressable, { style: pressableStyle, onPress: onPress },
                React.createElement(Checkbox, { checked: isChecked, onChange: onChange }),
                React.createElement(TextV1, null, "A controlled checkbox in a Pressable. Pressing Pressable also toggles Checkbox")),
            Platform.OS !== 'android' && (React.createElement(React.Fragment, null,
                React.createElement(Checkbox, { label: "Checkbox rendered with labelPosition 'before' (controlled)", labelPosition: "before", checked: isChecked }),
                React.createElement(Checkbox, { label: "A required checkbox with other required text", required: "**" }))))));
};
//# sourceMappingURL=OtherCheckboxPropsTest.js.map