"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FocusTrapTest = exports.ComponentTwiddler = 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 interactive_hooks_1 = require("@fluentui-react-native/interactive-hooks");
const stack_1 = require("@fluentui-react-native/stack");
const theme_types_1 = require("@fluentui-react-native/theme-types");
const themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
const styles_1 = require("../Common/styles");
const Test_1 = require("../Test");
const getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)((t) => {
    return {
        trapZoneStyle: {
            padding: 10,
            borderWidth: 2,
            borderColor: t.colors.neutralStroke1,
            borderStyle: 'dashed',
        },
        activeTrapZoneStyle: {
            padding: 10,
            borderColor: t.colors.neutralStroke1,
            borderWidth: 2,
            borderStyle: 'solid',
        },
        componentTwiddlerStyle: {
            borderWidth: 1,
            padding: 8,
            margin: 4,
            borderColor: t.colors.neutralStroke1,
            borderStyle: 'solid',
        },
        focusedComponentTwiddlerStyle: {
            borderWidth: 1,
            padding: 8,
            margin: 4,
            borderStyle: 'solid',
            borderColor: t.colors.strokeFocus2,
            backgroundColor: t.colors.neutralBackground1Hover,
        },
        componentTwiddlerText: {
            color: t.colors.neutralForeground1,
        },
        focusedComponentTwiddlerText: {
            color: t.colors.neutralForeground1Hover,
        },
    };
});
const ComponentTwiddler = (props) => {
    const [focusProps, focusState] = (0, interactive_hooks_1.useFocusState)({});
    const theme = (0, theme_types_1.useTheme)();
    const themedStyles = getThemedStyles(theme);
    return (React.createElement(react_native_1.TouchableHighlight, { ...{ focusable: false }, onPress: props.onPress },
        React.createElement(react_native_1.View, { focusable: true, ...focusProps, style: focusState.focused ? themedStyles.focusedComponentTwiddlerStyle : themedStyles.componentTwiddlerStyle },
            React.createElement(react_native_2.Text, { style: focusState.focused ? themedStyles.focusedComponentTwiddlerText : themedStyles.componentTwiddlerText }, props.label))));
};
exports.ComponentTwiddler = ComponentTwiddler;
const BasicFocusTrapZone = () => {
    const theme = (0, theme_types_1.useTheme)();
    const themedStyles = getThemedStyles(theme);
    const [state, setState] = React.useState({
        useTrapZone: false,
        renderTrapZone: true,
        disableFirstFocus: false,
        ignoreExternalFocusing: false,
        focusPreviouslyFocusedInnerElement: false,
    });
    const ftzRef = React.useRef(null);
    const onKeyDown = React.useCallback((ev) => {
        if (ev.nativeEvent.key === 'Enter') {
            setState({ ...state, useTrapZone: !state.useTrapZone });
        }
        else if (ev.nativeEvent.key === ' ') {
            setState({ ...state, renderTrapZone: !state.renderTrapZone });
        }
        else if (ev.nativeEvent.key === 'f' && ftzRef.current) {
            ftzRef.current.focus();
        }
    }, [state, setState]);
    const onTwiddleExternalFocusing = React.useCallback(() => {
        setState({ ...state, ignoreExternalFocusing: !state.ignoreExternalFocusing });
    }, [state, setState]);
    const onTwiddleFocusPrevious = React.useCallback(() => {
        setState({ ...state, focusPreviouslyFocusedInnerElement: !state.focusPreviouslyFocusedInnerElement });
    }, [state, setState]);
    const onTwiddleFirstFocus = React.useCallback(() => {
        setState({ ...state, disableFirstFocus: !state.disableFirstFocus });
    }, [state, setState]);
    return (React.createElement(react_native_1.View, { ...{ onKeyDown: onKeyDown } },
        React.createElement(stack_1.Stack, { style: styles_1.stackStyle, gap: 5 },
            React.createElement(exports.ComponentTwiddler, { label: "Press space to render or enter to trap, f to focus" }),
            React.createElement(exports.ComponentTwiddler, { label: state.ignoreExternalFocusing ? 'ignoreExternalFocusing: true' : 'ignoreExternalFocusing: false', onPress: onTwiddleExternalFocusing }),
            React.createElement(exports.ComponentTwiddler, { label: state.focusPreviouslyFocusedInnerElement
                    ? 'focusPreviouslyFocusedInnerElement: true'
                    : 'focusPreviouslyFocusedInnerElement: false', onPress: onTwiddleFocusPrevious }),
            React.createElement(exports.ComponentTwiddler, { label: state.disableFirstFocus ? 'disableFirstFocus: true' : 'disableFirstFocus: false', onPress: onTwiddleFirstFocus }),
            state.renderTrapZone && (React.createElement(react_native_2.FocusTrapZone, { componentRef: ftzRef, disableFirstFocus: state.disableFirstFocus, ignoreExternalFocusing: state.ignoreExternalFocusing, focusPreviouslyFocusedInnerElement: state.focusPreviouslyFocusedInnerElement, disabled: !state.useTrapZone, style: state.useTrapZone ? themedStyles.activeTrapZoneStyle : themedStyles.trapZoneStyle },
                React.createElement(react_native_2.Text, null, state.useTrapZone ? 'Trap Active' : 'Trap Active'),
                React.createElement(exports.ComponentTwiddler, { label: "trapped" }),
                React.createElement(exports.ComponentTwiddler, { label: "trapped" }),
                React.createElement(exports.ComponentTwiddler, { label: "trapped" }),
                React.createElement(exports.ComponentTwiddler, { label: "trapped" }))))));
};
const focusTrapZoneSections = [
    {
        name: 'Basic FocusTrapZone Usage',
        testID: e2e_testing_1.FOCUSTRAPZONE_TESTPAGE,
        component: BasicFocusTrapZone,
    },
];
const FocusTrapTest = () => {
    const status = {
        win32Status: 'Beta',
        uwpStatus: 'Backlog',
        iosStatus: 'N/A',
        macosStatus: 'N/A',
        androidStatus: 'N/A',
    };
    const description = 'FocusTrapZone is used to trap the focus in any html element. Pressing tab will circle focus within the inner focusable elements of the FocusTrapZone.';
    return React.createElement(Test_1.Test, { name: "Focus Trap Zone Test", description: description, sections: focusTrapZoneSections, status: status });
};
exports.FocusTrapTest = FocusTrapTest;
//# sourceMappingURL=FocusTrapZoneTest.js.map