import { __assign } from "tslib";
import * as React from 'react';
import { View } from 'react-native';
import { ButtonV1 as Button, Callout, Text } from '@fluentui/react-native';
import { Switch } from '@fluentui-react-native/switch';
import { BUTTON_TO_OPEN_CALLOUT, CALLOUT_ACCESSIBILITY_LABEL, CALLOUT_TEST_COMPONENT } from '../../../../E2E/src/Callout/consts';
import { testProps } from '../Common/TestProps';
export 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(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(function (_a, i) {
                var behavior = _a[0], checked = _a[1];
                return (React.createElement(Switch, { label: behavior, checked: checked, onChange: function (_, isChecked) {
                        var _a;
                        return setDismissBehaviors(__assign(__assign({}, dismissBehaviors), (_a = {}, _a[behavior] = isChecked, _a)));
                    }, key: i }));
            })),
            React.createElement(Button, __assign({ 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, __assign({ 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(function (behavior) { return 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