import { __assign } from "tslib";
import React from 'react';
import { View, TextInput, Platform } from 'react-native';
import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
import { useTheme } from '@fluentui-react-native/theme-types';
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
import { commonTestStyles as commonStyles } from '../Common/styles';
function onChangeUncontrolled(_e, isChecked) {
    console.log(isChecked);
}
var CircleColorCheckbox = Checkbox.customize({
    checked: {
        checkboxBackgroundColor: 'green',
        checkboxBorderColor: 'green',
        checkmarkColor: 'white',
    },
});
var HoverCheckbox = Checkbox.customize({
    hovered: {
        checkmarkOpacity: 1,
    },
});
var BigLabelCheckbox = Checkbox.customize({
    label: {
        fontSize: 24,
        fontWeight: 'bold',
    },
});
var ComposedCheckbox = Checkbox.compose({
    slotProps: {
        label: { style: { color: 'hotpink' } },
    },
});
var getThemedStyles = themedStyleSheet(function (t) {
    return { textbox: __assign(__assign({}, commonStyles.textBox), { borderColor: t.colors.inputBorder }) };
});
export var TokenCheckbox = function () {
    var _a = React.useState('blue'), checkboxColor = _a[0], setCheckboxColor = _a[1];
    var _b = React.useState('white'), checkmarkColor = _b[0], setCheckmarkColor = _b[1];
    var BlueCheckbox = Checkbox.customize({
        checked: {
            checkboxBackgroundColor: checkboxColor,
            checkboxBorderColor: checkboxColor,
            checkmarkColor: checkmarkColor,
        },
    });
    var theme = useTheme();
    var textBoxBorderStyle = getThemedStyles(theme);
    return (React.createElement(View, null,
        Platform.OS !== 'android' && (React.createElement(React.Fragment, null,
            React.createElement(HoverCheckbox, { label: "A checkbox with checkmark visible on hover", onChange: onChangeUncontrolled }),
            React.createElement(CircleColorCheckbox, { label: "A circular token-customized checkbox", shape: "circular", onChange: onChangeUncontrolled, defaultChecked: true }))),
        React.createElement(BigLabelCheckbox, { label: "A checkbox with a bold large font label" }),
        React.createElement(ComposedCheckbox, { label: "A checkbox with a hot pink label and no padding" }),
        React.createElement(BlueCheckbox, { label: "Token-customized checkbox. Customizable below.", onChange: onChangeUncontrolled, labelPosition: "before", defaultChecked: false }),
        React.createElement(TextInput, { accessibilityLabel: "Background color", style: textBoxBorderStyle.textbox, placeholder: "Background color", blurOnSubmit: true, onSubmitEditing: function (e) {
                setCheckboxColor(e.nativeEvent.text);
            } }),
        React.createElement(TextInput, { accessibilityLabel: "Checkmark color", style: textBoxBorderStyle.textbox, placeholder: "Checkmark color", blurOnSubmit: true, onSubmitEditing: function (e) {
                setCheckmarkColor(e.nativeEvent.text);
            } })));
};
//# sourceMappingURL=TokenCheckboxTest.js.map