"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckboxV1Test = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var button_1 = require("@fluentui-react-native/button");
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 E2ECheckboxV1Test_1 = require("./E2ECheckboxV1Test");
var consts_1 = require("../../../../E2E/src/CheckboxV1/consts");
var styles_1 = require("../Common/styles");
var Test_1 = require("../Test");
function onChangeUncontrolled(_e, isChecked) {
    console.log(isChecked);
}
var BasicCheckbox = function () {
    return (React.createElement(react_native_1.View, null,
        React.createElement(experimental_checkbox_1.Checkbox, { label: "Unchecked checkbox (undefined)", onChange: onChangeUncontrolled }),
        React.createElement(experimental_checkbox_1.Checkbox, { label: "Unchecked checkbox (uncontrolled)", onChange: onChangeUncontrolled, defaultChecked: false }),
        React.createElement(experimental_checkbox_1.Checkbox, { label: "Checked checkbox (uncontrolled)", onChange: onChangeUncontrolled, defaultChecked: true, accessibilityLabel: "Hello there" }),
        React.createElement(experimental_checkbox_1.Checkbox, { label: "Disabled checkbox", disabled: true }),
        React.createElement(experimental_checkbox_1.Checkbox, { label: "Disabled checked checkbox", defaultChecked: true, disabled: true }),
        React.createElement(experimental_checkbox_1.Checkbox, { label: "A required checkbox", required: true })));
};
var DesktopSpecificCheckbox = function () {
    return (React.createElement(React.Fragment, null,
        React.createElement(experimental_checkbox_1.Checkbox, { label: "Checkbox will display a tooltip", tooltip: "This is a tooltip" }),
        React.createElement(experimental_checkbox_1.Checkbox, { label: "A circular checkbox", shape: "circular" }),
        React.createElement(experimental_checkbox_1.Checkbox, { label: "A checkbox with label placed before", labelPosition: "before" })));
};
var SizeCheckbox = function () {
    return (React.createElement(react_native_1.View, null,
        React.createElement(experimental_checkbox_1.Checkbox, { tooltip: "Medium checkbox", size: "medium" }),
        React.createElement(experimental_checkbox_1.Checkbox, { tooltip: "Large checkbox", size: "large" }),
        React.createElement(experimental_checkbox_1.Checkbox, { label: "Medium checkbox", size: "medium" }),
        React.createElement(experimental_checkbox_1.Checkbox, { label: "Large checkbox", size: "large" })));
};
var OtherCheckbox = function () {
    var _a = React.useState(false), isChecked = _a[0], setisChecked = _a[1];
    var setCheckedTrue = React.useCallback(function () {
        setisChecked(true);
    }, []);
    var setCheckedFalse = React.useCallback(function () {
        setisChecked(false);
    }, []);
    var memoizedStyles = React.useMemo(function () { return (react_native_1.Platform.OS === 'android' ? tslib_1.__assign(tslib_1.__assign({}, styles_1.mobileStyles.containerSpacedEvenly), { height: 150 }) : {}); }, []);
    return (React.createElement(react_native_1.View, { style: memoizedStyles },
        React.createElement(button_1.ButtonV1, { onClick: setCheckedTrue, size: "small" }, "Check controlled checkboxes below"),
        React.createElement(button_1.ButtonV1, { onClick: setCheckedFalse, size: "small" }, "Uncheck controlled checkboxes below"),
        React.createElement(experimental_checkbox_1.Checkbox, { label: "This is a controlled Checkbox", checked: isChecked }),
        react_native_1.Platform.OS !== 'android' && (React.createElement(React.Fragment, null,
            React.createElement(experimental_checkbox_1.Checkbox, { label: "Checkbox rendered with labelPosition 'before' (controlled)", labelPosition: "before", checked: isChecked }),
            React.createElement(experimental_checkbox_1.Checkbox, { label: "A required checkbox with other required text", required: "**" })))));
};
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.useState('blue'), checkboxColor = _a[0], setCheckboxColor = _a[1];
    var _b = React.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.createElement(react_native_1.View, null,
        react_native_1.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(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.CHECKBOXV1_TESTPAGE,
        component: BasicCheckbox,
    },
    react_native_1.Platform.select({
        android: null,
        ios: null,
        default: {
            name: 'Size Checkboxes',
            component: SizeCheckbox,
        },
    }),
    react_native_1.Platform.select({
        android: null,
        ios: null,
        default: {
            name: 'Desktop Specific Checkboxes',
            component: DesktopSpecificCheckbox,
        },
    }),
    {
        name: 'Other Implementations',
        component: OtherCheckbox,
    },
    react_native_1.Platform.select({
        android: null,
        ios: null,
        default: {
            name: 'Token Customized Checkboxes',
            component: TokenCheckbox,
        },
    }),
];
var e2eSections = [
    {
        name: 'E2E Testing for CheckboxV1',
        component: E2ECheckboxV1Test_1.E2ECheckboxV1Test,
    },
];
var CheckboxV1Test = function () {
    var status = {
        win32Status: 'Production',
        uwpStatus: 'N/A',
        iosStatus: 'Experimental',
        macosStatus: 'Experimental',
        androidStatus: 'Experimental',
    };
    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).';
    return React.createElement(Test_1.Test, { name: "CheckboxV1 Test", description: description, sections: checkboxSections, status: status, e2eSections: e2eSections });
};
exports.CheckboxV1Test = CheckboxV1Test;
//# sourceMappingURL=CheckboxV1Test.js.map