"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.E2ECalloutTest = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var react_native_2 = require("@fluentui/react-native");
var switch_1 = require("@fluentui-react-native/switch");
var consts_1 = require("../../../../E2E/src/Callout/consts");
var TestProps_1 = require("../Common/TestProps");
var E2ECalloutTest = function () {
    var _a = React.useState(false), showCallout = _a[0], setShowCallout = _a[1];
    var _b = React.useState(false), isCalloutVisible = _b[0], setIsCalloutVisible = _b[1];
    var _c = React.useState({
        preventDismissOnKeyDown: false,
        preventDismissOnClickOutside: false,
    }), dismissBehaviors = _c[0], setDismissBehaviors = _c[1];
    var toggleShowCallout = React.useCallback(function () {
        setShowCallout(!showCallout);
        setIsCalloutVisible(false);
    }, [showCallout, setIsCalloutVisible, setShowCallout]);
    var onShowCallout = React.useCallback(function () {
        setIsCalloutVisible(true);
    }, [setIsCalloutVisible]);
    var onDismissCallout = React.useCallback(function () {
        setIsCalloutVisible(false);
        setShowCallout(false);
    }, [setIsCalloutVisible, setShowCallout]);
    var 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(function (_a, i) {
                var behavior = _a[0], checked = _a[1];
                return (React.createElement(switch_1.Switch, { label: behavior, checked: checked, onChange: function (_, isChecked) {
                        var _a;
                        return setDismissBehaviors(tslib_1.__assign(tslib_1.__assign({}, dismissBehaviors), (_a = {}, _a[behavior] = isChecked, _a)));
                    }, key: i }));
            })),
            React.createElement(react_native_2.ButtonV1, tslib_1.__assign({ onClick: toggleShowCallout }, (0, TestProps_1.testProps)(consts_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, tslib_1.__assign({ anchorRect: myRect, onDismiss: onDismissCallout, onShow: onShowCallout, accessibilityLabel: consts_1.CALLOUT_ACCESSIBILITY_LABEL, accessibilityRole: "alert", accessibilityOnShowAnnouncement: "Be informed that a customized callout has been opened.", dismissBehaviors: Object.keys(dismissBehaviors).filter(function (behavior) { return dismissBehaviors[behavior]; }) }, (0, TestProps_1.testProps)(consts_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