import * as React from 'react';
import { View } from 'react-native';
import { ButtonV1 as Button, Callout, Text } from '@fluentui/react-native';
import { BUTTON_TO_OPEN_CALLOUT, CALLOUT_ACCESSIBILITY_LABEL, CALLOUT_TEST_COMPONENT } from '@fluentui-react-native/e2e-testing';
import { Switch } from '@fluentui-react-native/switch';
import { testProps } from '../Common/TestProps';
export const E2ECalloutTest = () => {
    const [showCallout, setShowCallout] = React.useState(false);
    const [isCalloutVisible, setIsCalloutVisible] = React.useState(false);
    const [dismissBehaviors, setDismissBehaviors] = React.useState({
        preventDismissOnKeyDown: false,
        preventDismissOnClickOutside: false,
    });
    const toggleShowCallout = React.useCallback(() => {
        setShowCallout(!showCallout);
        setIsCalloutVisible(false);
    }, [showCallout, setIsCalloutVisible, setShowCallout]);
    const onShowCallout = React.useCallback(() => {
        setIsCalloutVisible(true);
    }, [setIsCalloutVisible]);
    const onDismissCallout = React.useCallback(() => {
        setIsCalloutVisible(false);
        setShowCallout(false);
    }, [setIsCalloutVisible, setShowCallout]);
    const myRect = { screenX: 10, screenY: 10, width: 100, height: 100 };
    return (React.createElement(View, null,
        React.createElement(View, { style: { flexDirection: 'column', paddingVertical: 5 } },
            React.createElement(Text, { variant: "subheaderSemibold" }, "Dismiss Behaviors"),
            React.createElement(View, { style: { flexDirection: 'row', paddingVertical: 5 } }, Object.entries(dismissBehaviors).map(([behavior, checked], i) => (React.createElement(Switch, { label: behavior, checked: checked, onChange: (_, isChecked) => setDismissBehaviors({ ...dismissBehaviors, [behavior]: isChecked }), key: i })))),
            React.createElement(Button, { onClick: toggleShowCallout, ...testProps(BUTTON_TO_OPEN_CALLOUT) }, "Press for Callout"),
            React.createElement(Text, { selectable: true },
                React.createElement(Text, null, "Visibility: "),
                isCalloutVisible ? React.createElement(Text, { style: { color: 'green' } }, "Visible") : React.createElement(Text, { style: { color: 'red' } }, "Not Visible"))),
        showCallout && (React.createElement(Callout, { anchorRect: myRect, onDismiss: onDismissCallout, onShow: onShowCallout, accessibilityLabel: CALLOUT_ACCESSIBILITY_LABEL, accessibilityRole: "alert", accessibilityOnShowAnnouncement: "Be informed that a customized callout has been opened.", dismissBehaviors: Object.keys(dismissBehaviors).filter((behavior) => dismissBehaviors[behavior]), ...testProps(CALLOUT_TEST_COMPONENT) },
            React.createElement(View, { style: { padding: 20, borderWidth: 2, borderColor: 'black' } },
                React.createElement(Text, null, "just some text so it does not take focus and is not empty."))))));
};
//# sourceMappingURL=CalloutE2ETest.js.map