"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TokenCheckbox = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var react_native_1 = require("react-native");
var experimental_checkbox_1 = require("@fluentui-react-native/experimental-checkbox");
var theme_types_1 = require("@fluentui-react-native/theme-types");
var themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
var styles_1 = require("../Common/styles");
function onChangeUncontrolled(_e, isChecked) {
    console.log(isChecked);
}
var CircleColorCheckbox = experimental_checkbox_1.Checkbox.customize({
    checked: {
        checkboxBackgroundColor: 'green',
        checkboxBorderColor: 'green',
        checkmarkColor: 'white',
    },
});
var HoverCheckbox = experimental_checkbox_1.Checkbox.customize({
    hovered: {
        checkmarkOpacity: 1,
    },
});
var BigLabelCheckbox = experimental_checkbox_1.Checkbox.customize({
    label: {
        fontSize: 24,
        fontWeight: 'bold',
    },
});
var ComposedCheckbox = experimental_checkbox_1.Checkbox.compose({
    slotProps: {
        label: { style: { color: 'hotpink' } },
    },
});
var getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)(function (t) {
    return { textbox: tslib_1.__assign(tslib_1.__assign({}, styles_1.commonTestStyles.textBox), { borderColor: t.colors.inputBorder }) };
});
var TokenCheckbox = function () {
    var _a = react_1.default.useState('blue'), checkboxColor = _a[0], setCheckboxColor = _a[1];
    var _b = react_1.default.useState('white'), checkmarkColor = _b[0], setCheckmarkColor = _b[1];
    var BlueCheckbox = experimental_checkbox_1.Checkbox.customize({
        checked: {
            checkboxBackgroundColor: checkboxColor,
            checkboxBorderColor: checkboxColor,
            checkmarkColor: checkmarkColor,
        },
    });
    var theme = (0, theme_types_1.useTheme)();
    var 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: function (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: function (e) {
                setCheckmarkColor(e.nativeEvent.text);
            } })));
};
exports.TokenCheckbox = TokenCheckbox;
//# sourceMappingURL=TokenCheckboxTest.js.map