"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckboxLegacyTest = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var react_native_2 = require("@fluentui/react-native");
var theme_types_1 = require("@fluentui-react-native/theme-types");
var themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
var CheckboxLegacyE2ETest_1 = require("./CheckboxLegacyE2ETest");
var consts_1 = require("../../../../E2E/src/CheckboxLegacy/consts");
var styles_1 = require("../Common/styles");
var Test_1 = require("../Test");
function onChangeUncontrolled(isChecked) {
    console.log(isChecked);
}
var BasicCheckbox = function () {
    return (React.createElement(react_native_1.View, null,
        React.createElement(react_native_2.Checkbox, { label: "Unchecked checkbox (undefined)", onChange: onChangeUncontrolled }),
        React.createElement(react_native_2.Checkbox, { label: "Unchecked checkbox (uncontrolled)", onChange: onChangeUncontrolled, defaultChecked: false }),
        React.createElement(react_native_2.Checkbox, { label: "Checked checkbox (uncontrolled)", onChange: onChangeUncontrolled, defaultChecked: true, accessibilityLabel: "Hello there" }),
        React.createElement(react_native_2.Checkbox, { label: "Disabled checkbox", onChange: onChangeUncontrolled, defaultChecked: false, disabled: true }),
        React.createElement(react_native_2.Checkbox, { label: "Disabled checked checkbox", onChange: onChangeUncontrolled, defaultChecked: true, disabled: true }),
        React.createElement(react_native_2.Checkbox, { label: "Checkbox will display a tooltip", onChange: onChangeUncontrolled, tooltip: "This is a tooltip" })));
};
var OtherCheckbox = function () {
    var _a = React.useState(false), isCheckedControlled1 = _a[0], setCheckedControlled1 = _a[1];
    var onChangeControlled1 = React.useCallback(function (checked) {
        setCheckedControlled1(checked);
    }, []);
    var _b = React.useState(true), isCheckedControlled2 = _b[0], setCheckedControlled2 = _b[1];
    var onChangeControlled2 = React.useCallback(function (checked) {
        setCheckedControlled2(checked);
    }, []);
    return (React.createElement(react_native_1.View, null,
        React.createElement(react_native_2.Checkbox, { label: "This is a controlled Checkbox", onChange: onChangeControlled1, checked: isCheckedControlled1 }),
        React.createElement(react_native_2.Checkbox, { label: "Checkbox rendered with boxSide 'end' (controlled)", onChange: onChangeControlled2, boxSide: "end", checked: isCheckedControlled2 })));
};
var CircularCheckbox = react_native_2.Checkbox.customize({ tokens: { borderRadius: 50 } });
var CircleColorCheckbox = react_native_2.Checkbox.customize({
    tokens: { borderRadius: 50, checkboxBackgroundColor: 'white' },
    _overrides: {
        checked: {
            tokens: {
                checkboxBackgroundColor: 'green',
                checkboxBorderColor: 'green',
                checkmarkColor: 'white',
            },
        },
        focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
        hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
        pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
    },
});
var HoverCheckbox = react_native_2.Checkbox.customize({
    _overrides: {
        checked: {
            tokens: {
                checkboxBackgroundColor: 'black',
                checkmarkColor: 'white',
            },
        },
        hovered: {
            tokens: {
                checkmarkVisibility: 1,
            },
        },
    },
});
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.useState('blue'), checkboxColor = _a[0], setCheckboxColor = _a[1];
    var _b = React.useState('white'), checkmarkColor = _b[0], setCheckmarkColor = _b[1];
    var BlueCheckbox = react_native_2.Checkbox.customize({
        tokens: { checkboxBackgroundColor: 'white' },
        _overrides: {
            checked: {
                tokens: {
                    checkboxBackgroundColor: checkboxColor,
                    checkboxBorderColor: checkboxColor,
                    checkmarkColor: checkmarkColor,
                },
            },
            focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
            hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
            pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
        },
    });
    var theme = (0, theme_types_1.useTheme)();
    var textBoxBorderStyle = getThemedStyles(theme);
    return (React.createElement(react_native_1.View, null,
        React.createElement(CircularCheckbox, { label: "A circular checkbox", onChange: onChangeUncontrolled, defaultChecked: false }),
        React.createElement(HoverCheckbox, { label: "A checkbox with checkmark visible on hover", onChange: onChangeUncontrolled, defaultChecked: false }),
        React.createElement(CircleColorCheckbox, { label: "A circular token-customized checkbox", onChange: onChangeUncontrolled, defaultChecked: true }),
        React.createElement(BlueCheckbox, { label: "Token-customized checkbox. Customizable below.", onChange: onChangeUncontrolled, boxSide: "end", defaultChecked: false }),
        React.createElement(react_native_1.TextInput, { accessibilityLabel: "Background color", style: textBoxBorderStyle.textbox, placeholder: "Background color", blurOnSubmit: true, onSubmitEditing: function (e) {
                setCheckboxColor(e.nativeEvent.text);
            } }),
        React.createElement(react_native_1.TextInput, { accessibilityLabel: "Checkmark color", style: textBoxBorderStyle.textbox, placeholder: "Checkmark color", blurOnSubmit: true, onSubmitEditing: function (e) {
                setCheckmarkColor(e.nativeEvent.text);
            } })));
};
var checkboxSections = [
    {
        name: 'Basic Checkboxes',
        testID: consts_1.CHECKBOX_TESTPAGE,
        component: BasicCheckbox,
    },
    {
        name: 'Other Implementations',
        component: OtherCheckbox,
    },
    {
        name: 'Token Customized Checkboxes',
        component: TokenCheckbox,
    },
];
var e2eSections = [
    {
        name: 'Checkbox for E2E Testing',
        component: CheckboxLegacyE2ETest_1.CheckboxLegacyE2ETest,
    },
];
var CheckboxLegacyTest = function () {
    var status = {
        win32Status: 'Deprecated',
        uwpStatus: 'Deprecated',
        iosStatus: 'N/A',
        macosStatus: 'Deprecated',
        androidStatus: 'N/A',
    };
    var description = 'Checkboxes give people a way to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off).';
    var spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Checkbox/SPEC.md';
    return (React.createElement(Test_1.Test, { name: "Checkbox Legacy Test", description: description, spec: spec, sections: checkboxSections, status: status, e2eSections: e2eSections }));
};
exports.CheckboxLegacyTest = CheckboxLegacyTest;
//# sourceMappingURL=CheckboxLegacyTest.js.map