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