import { __assign } from "tslib";
import * as React from 'react';
import { View, TextInput, Platform } from 'react-native';
import { ButtonV1 as Button } from '@fluentui-react-native/button';
import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
import { useTheme } from '@fluentui-react-native/theme-types';
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
import { E2ECheckboxV1Test } from './E2ECheckboxV1Test';
import { CHECKBOXV1_TESTPAGE } from '../../../../E2E/src/CheckboxV1/consts';
import { commonTestStyles as commonStyles, mobileStyles } from '../Common/styles';
import { Test } from '../Test';
function onChangeUncontrolled(_e, isChecked) {
    console.log(isChecked);
}
var BasicCheckbox = function () {
    return (React.createElement(View, null,
        React.createElement(Checkbox, { label: "Unchecked checkbox (undefined)", onChange: onChangeUncontrolled }),
        React.createElement(Checkbox, { label: "Unchecked checkbox (uncontrolled)", onChange: onChangeUncontrolled, defaultChecked: false }),
        React.createElement(Checkbox, { label: "Checked checkbox (uncontrolled)", onChange: onChangeUncontrolled, defaultChecked: true, accessibilityLabel: "Hello there" }),
        React.createElement(Checkbox, { label: "Disabled checkbox", disabled: true }),
        React.createElement(Checkbox, { label: "Disabled checked checkbox", defaultChecked: true, disabled: true }),
        React.createElement(Checkbox, { label: "A required checkbox", required: true })));
};
var DesktopSpecificCheckbox = function () {
    return (React.createElement(React.Fragment, null,
        React.createElement(Checkbox, { label: "Checkbox will display a tooltip", tooltip: "This is a tooltip" }),
        React.createElement(Checkbox, { label: "A circular checkbox", shape: "circular" }),
        React.createElement(Checkbox, { label: "A checkbox with label placed before", labelPosition: "before" })));
};
var SizeCheckbox = function () {
    return (React.createElement(View, null,
        React.createElement(Checkbox, { tooltip: "Medium checkbox", size: "medium" }),
        React.createElement(Checkbox, { tooltip: "Large checkbox", size: "large" }),
        React.createElement(Checkbox, { label: "Medium checkbox", size: "medium" }),
        React.createElement(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 (Platform.OS === 'android' ? __assign(__assign({}, mobileStyles.containerSpacedEvenly), { height: 150 }) : {}); }, []);
    return (React.createElement(View, { style: memoizedStyles },
        React.createElement(Button, { onClick: setCheckedTrue, size: "small" }, "Check controlled checkboxes below"),
        React.createElement(Button, { onClick: setCheckedFalse, size: "small" }, "Uncheck controlled checkboxes below"),
        React.createElement(Checkbox, { label: "This is a controlled Checkbox", checked: isChecked }),
        Platform.OS !== 'android' && (React.createElement(React.Fragment, null,
            React.createElement(Checkbox, { label: "Checkbox rendered with labelPosition 'before' (controlled)", labelPosition: "before", checked: isChecked }),
            React.createElement(Checkbox, { label: "A required checkbox with other required text", required: "**" })))));
};
var CircleColorCheckbox = Checkbox.customize({
    checked: {
        checkboxBackgroundColor: 'green',
        checkboxBorderColor: 'green',
        checkmarkColor: 'white',
    },
});
var HoverCheckbox = Checkbox.customize({
    hovered: {
        checkmarkOpacity: 1,
    },
});
var BigLabelCheckbox = Checkbox.customize({
    label: {
        fontSize: 24,
        fontWeight: 'bold',
    },
});
var ComposedCheckbox = Checkbox.compose({
    slotProps: {
        label: { style: { color: 'hotpink' } },
    },
});
var getThemedStyles = themedStyleSheet(function (t) {
    return { textbox: __assign(__assign({}, commonStyles.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 = Checkbox.customize({
        checked: {
            checkboxBackgroundColor: checkboxColor,
            checkboxBorderColor: checkboxColor,
            checkmarkColor: checkmarkColor,
        },
    });
    var theme = useTheme();
    var textBoxBorderStyle = getThemedStyles(theme);
    return (React.createElement(View, null,
        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(TextInput, { accessibilityLabel: "Background color", style: textBoxBorderStyle.textbox, placeholder: "Background color", blurOnSubmit: true, onSubmitEditing: function (e) {
                setCheckboxColor(e.nativeEvent.text);
            } }),
        React.createElement(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: CHECKBOXV1_TESTPAGE,
        component: BasicCheckbox,
    },
    Platform.select({
        android: null,
        ios: null,
        default: {
            name: 'Size Checkboxes',
            component: SizeCheckbox,
        },
    }),
    Platform.select({
        android: null,
        ios: null,
        default: {
            name: 'Desktop Specific Checkboxes',
            component: DesktopSpecificCheckbox,
        },
    }),
    {
        name: 'Other Implementations',
        component: OtherCheckbox,
    },
    Platform.select({
        android: null,
        ios: null,
        default: {
            name: 'Token Customized Checkboxes',
            component: TokenCheckbox,
        },
    }),
];
var e2eSections = [
    {
        name: 'E2E Testing for CheckboxV1',
        component: E2ECheckboxV1Test,
    },
];
export var CheckboxV1Test = function () {
    var status = {
        win32Status: 'Production',
        uwpStatus: 'N/A',
        iosStatus: 'Production',
        macosStatus: 'Production',
        androidStatus: 'Production',
    };
    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). For macOS, use experimental-checkbox package.';
    return React.createElement(Test, { name: "CheckboxV1 Test", description: description, sections: checkboxSections, status: status, e2eSections: e2eSections });
};
//# sourceMappingURL=CheckboxV1Test.js.map