"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.E2ECalloutTest = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_native_1 = require("react-native");
const react_native_2 = require("@fluentui/react-native");
const e2e_testing_1 = require("@fluentui-react-native/e2e-testing");
const switch_1 = require("@fluentui-react-native/switch");
const TestProps_1 = require("../Common/TestProps");
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(react_native_1.View, null,
        React.createElement(react_native_1.View, { style: { flexDirection: 'column', paddingVertical: 5 } },
            React.createElement(react_native_2.Text, { variant: "subheaderSemibold" }, "Dismiss Behaviors"),
            React.createElement(react_native_1.View, { style: { flexDirection: 'row', paddingVertical: 5 } }, Object.entries(dismissBehaviors).map(([behavior, checked], i) => (React.createElement(switch_1.Switch, { label: behavior, checked: checked, onChange: (_, isChecked) => setDismissBehaviors({ ...dismissBehaviors, [behavior]: isChecked }), key: i })))),
            React.createElement(react_native_2.ButtonV1, { onClick: toggleShowCallout, ...(0, TestProps_1.testProps)(e2e_testing_1.BUTTON_TO_OPEN_CALLOUT) }, "Press for Callout"),
            React.createElement(react_native_2.Text, { selectable: true },
                React.createElement(react_native_2.Text, null, "Visibility: "),
                isCalloutVisible ? React.createElement(react_native_2.Text, { style: { color: 'green' } }, "Visible") : React.createElement(react_native_2.Text, { style: { color: 'red' } }, "Not Visible"))),
        showCallout && (React.createElement(react_native_2.Callout, { anchorRect: myRect, onDismiss: onDismissCallout, onShow: onShowCallout, accessibilityLabel: e2e_testing_1.CALLOUT_ACCESSIBILITY_LABEL, accessibilityRole: "alert", accessibilityOnShowAnnouncement: "Be informed that a customized callout has been opened.", dismissBehaviors: Object.keys(dismissBehaviors).filter((behavior) => dismissBehaviors[behavior]), ...(0, TestProps_1.testProps)(e2e_testing_1.CALLOUT_TEST_COMPONENT) },
            React.createElement(react_native_1.View, { style: { padding: 20, borderWidth: 2, borderColor: 'black' } },
                React.createElement(react_native_2.Text, null, "just some text so it does not take focus and is not empty."))))));
};
exports.E2ECalloutTest = E2ECalloutTest;
//# sourceMappingURL=CalloutE2ETest.js.map