import * as React from 'react';
import { View } from 'react-native';
import { ButtonV1 as Button, Text } from '@fluentui/react-native';
import { BUTTON_TEST_COMPONENT, BUTTON_ON_PRESS, BUTTON_NO_A11Y_LABEL_COMPONENT, BUTTON_ACCESSIBILITY_LABEL, BUTTON_TEST_COMPONENT_LABEL, BUTTON_ON_KEY, BUTTON_PRESS_TEST_COMPONENT, BUTTON_PRESS_TEST_COMPONENT_LABEL, BUTTON_FOCUSABLE_TEST_COMPONENT, BUTTON_FOCUSABLE_TEST_COMPONENT_LABEL, } from '@fluentui-react-native/e2e-testing';
import { Stack } from '@fluentui-react-native/stack';
import { stackStyle } from '../Common/styles';
import { testProps } from '../Common/TestProps';
function keyEvent(key) {
    return {
        key,
        capsLockKey: false,
        shiftKey: false,
        ctrlKey: false,
        altKey: false,
        metaKey: false,
        numericPadKey: false,
        helpKey: false,
        functionKey: false,
        ArrowLeft: false,
        ArrowRight: false,
        ArrowUp: false,
        ArrowDown: false,
    };
}
export const E2EButtonTest = () => {
    const [buttonPressed, setButtonPressed] = React.useState(false);
    const [keyDetected, setKeyDetected] = React.useState('');
    const onClick = React.useCallback(() => {
        setButtonPressed(!buttonPressed);
        setKeyDetected('');
    }, [buttonPressed]);
    const keyPressProps = {
        keyDownEvents: [keyEvent('a')],
        onKeyDown: (args) => {
            if (args.nativeEvent.key === 'a') {
                setKeyDetected('a (down)');
                args.stopPropagation();
            }
        },
        keyUpEvents: [keyEvent('b')],
        onKeyUp: (args) => {
            if (args.nativeEvent.key === 'b') {
                setKeyDetected('b (up)');
                args.stopPropagation();
            }
        },
    };
    return (React.createElement(View, null,
        React.createElement(Stack, { style: stackStyle },
            React.createElement(Button, { onClick: onClick, accessibilityLabel: BUTTON_ACCESSIBILITY_LABEL, ...testProps(BUTTON_TEST_COMPONENT) }, "This is a button for E2E testing"),
            React.createElement(Button, { onClick: onClick, accessibilityRole: "menuitem", ...testProps(BUTTON_NO_A11Y_LABEL_COMPONENT) }, BUTTON_TEST_COMPONENT_LABEL),
            React.createElement(Button, { onClick: onClick, accessibilityLabel: BUTTON_PRESS_TEST_COMPONENT_LABEL, ...keyPressProps, ...testProps(BUTTON_PRESS_TEST_COMPONENT) }, "Press \"a\" or \"b\" after focusing this button"),
            React.createElement(Button, { onClick: onClick, accessibilityLabel: BUTTON_FOCUSABLE_TEST_COMPONENT_LABEL, focusable: false, ...testProps(BUTTON_FOCUSABLE_TEST_COMPONENT) }, "This button isn't focusable (but isn't disabled or indeterminate either)"),
            buttonPressed ? (React.createElement(Text
            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
            , { ...testProps(BUTTON_ON_PRESS) }, "Button Pressed")) : null,
            keyDetected ? (React.createElement(Text /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */, { ...testProps(BUTTON_ON_KEY) },
                "Button Key Press detected: ",
                keyDetected)) : null)));
};
//# sourceMappingURL=E2EButtonTest.js.map