import * as React from 'react';
import { View, TextInput } from 'react-native';
import { Checkbox } from '@fluentui/react-native';
import { CHECKBOX_TESTPAGE } from '@fluentui-react-native/e2e-testing';
import { useTheme } from '@fluentui-react-native/theme-types';
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
import { CheckboxLegacyE2ETest } from './CheckboxLegacyE2ETest';
import { commonTestStyles as commonStyles } from '../Common/styles';
import { Test } from '../Test';
function onChangeUncontrolled(isChecked) {
    console.log(isChecked);
}
const BasicCheckbox = () => {
    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", onChange: onChangeUncontrolled, defaultChecked: false, disabled: true }),
        React.createElement(Checkbox, { label: "Disabled checked checkbox", onChange: onChangeUncontrolled, defaultChecked: true, disabled: true }),
        React.createElement(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(View, null,
        React.createElement(Checkbox, { label: "This is a controlled Checkbox", onChange: onChangeControlled1, checked: isCheckedControlled1 }),
        React.createElement(Checkbox, { label: "Checkbox rendered with boxSide 'end' (controlled)", onChange: onChangeControlled2, boxSide: "end", checked: isCheckedControlled2 })));
};
const CircularCheckbox = Checkbox.customize({ tokens: { borderRadius: 50 } });
const CircleColorCheckbox = 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 = Checkbox.customize({
    _overrides: {
        checked: {
            tokens: {
                checkboxBackgroundColor: 'black',
                checkmarkColor: 'white',
            },
        },
        hovered: {
            tokens: {
                checkmarkVisibility: 1,
            },
        },
    },
});
const getThemedStyles = themedStyleSheet((t) => {
    return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
});
const TokenCheckbox = () => {
    const [checkboxColor, setCheckboxColor] = React.useState('blue');
    const [checkmarkColor, setCheckmarkColor] = React.useState('white');
    const BlueCheckbox = 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 = useTheme();
    const textBoxBorderStyle = getThemedStyles(theme);
    return (React.createElement(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(TextInput, { accessibilityLabel: "Background color", style: textBoxBorderStyle.textbox, placeholder: "Background color", blurOnSubmit: true, onSubmitEditing: (e) => {
                setCheckboxColor(e.nativeEvent.text);
            } }),
        React.createElement(TextInput, { accessibilityLabel: "Checkmark color", style: textBoxBorderStyle.textbox, placeholder: "Checkmark color", blurOnSubmit: true, onSubmitEditing: (e) => {
                setCheckmarkColor(e.nativeEvent.text);
            } })));
};
const checkboxSections = [
    {
        name: 'Basic Checkboxes',
        testID: CHECKBOX_TESTPAGE,
        component: BasicCheckbox,
    },
    {
        name: 'Other Implementations',
        component: OtherCheckbox,
    },
    {
        name: 'Token Customized Checkboxes',
        component: TokenCheckbox,
    },
];
const e2eSections = [
    {
        name: 'Checkbox for E2E Testing',
        component: CheckboxLegacyE2ETest,
    },
];
export 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, { name: "Checkbox Legacy Test", description: description, spec: spec, sections: checkboxSections, status: status, e2eSections: e2eSections }));
};
//# sourceMappingURL=CheckboxLegacyTest.js.map