"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckboxLegacyTest = void 0;
const React = __importStar(require("react"));
const react_native_1 = require("react-native");
const react_native_2 = require("@fluentui/react-native");
const e2e_testing_1 = require("@fluentui-react-native/e2e-testing");
const theme_types_1 = require("@fluentui-react-native/theme-types");
const themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
const CheckboxLegacyE2ETest_1 = require("./CheckboxLegacyE2ETest");
const styles_1 = require("../Common/styles");
const Test_1 = require("../Test");
function onChangeUncontrolled(isChecked) {
    console.log(isChecked);
}
const BasicCheckbox = () => {
    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" })));
};
const OtherCheckbox = () => {
    const [isCheckedControlled1, setCheckedControlled1] = React.useState(false);
    const onChangeControlled1 = React.useCallback((checked) => {
        setCheckedControlled1(checked);
    }, []);
    const [isCheckedControlled2, setCheckedControlled2] = React.useState(true);
    const onChangeControlled2 = React.useCallback((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 })));
};
const CircularCheckbox = react_native_2.Checkbox.customize({ tokens: { borderRadius: 50 } });
const 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' } },
    },
});
const HoverCheckbox = react_native_2.Checkbox.customize({
    _overrides: {
        checked: {
            tokens: {
                checkboxBackgroundColor: 'black',
                checkmarkColor: 'white',
            },
        },
        hovered: {
            tokens: {
                checkmarkVisibility: 1,
            },
        },
    },
});
const getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)((t) => {
    return { textbox: { ...styles_1.commonTestStyles.textBox, borderColor: t.colors.inputBorder } };
});
const TokenCheckbox = () => {
    const [checkboxColor, setCheckboxColor] = React.useState('blue');
    const [checkmarkColor, setCheckmarkColor] = React.useState('white');
    const 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' } },
        },
    });
    const theme = (0, theme_types_1.useTheme)();
    const 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: (e) => {
                setCheckboxColor(e.nativeEvent.text);
            } }),
        React.createElement(react_native_1.TextInput, { accessibilityLabel: "Checkmark color", style: textBoxBorderStyle.textbox, placeholder: "Checkmark color", blurOnSubmit: true, onSubmitEditing: (e) => {
                setCheckmarkColor(e.nativeEvent.text);
            } })));
};
const checkboxSections = [
    {
        name: 'Basic Checkboxes',
        testID: e2e_testing_1.CHECKBOX_TESTPAGE,
        component: BasicCheckbox,
    },
    {
        name: 'Other Implementations',
        component: OtherCheckbox,
    },
    {
        name: 'Token Customized Checkboxes',
        component: TokenCheckbox,
    },
];
const e2eSections = [
    {
        name: 'Checkbox for E2E Testing',
        component: CheckboxLegacyE2ETest_1.CheckboxLegacyE2ETest,
    },
];
const CheckboxLegacyTest = () => {
    const status = {
        win32Status: 'Deprecated',
        uwpStatus: 'Deprecated',
        iosStatus: 'N/A',
        macosStatus: 'Deprecated',
        androidStatus: 'N/A',
    };
    const 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).';
    const 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