"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FocusTrapTest = exports.ComponentTwiddler = 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 interactive_hooks_1 = require("@fluentui-react-native/interactive-hooks");
var stack_1 = require("@fluentui-react-native/stack");
var consts_1 = require("../../../../E2E/src/FocusTrapZone/consts");
var styles_1 = require("../Common/styles");
var Test_1 = require("../Test");
var trapZoneStyle = {
    padding: 10,
    borderWidth: 2,
    borderColor: '#ababab',
    borderStyle: 'dashed',
};
var activeTrapZoneStyle = {
    padding: 10,
    borderColor: '#ababab',
    borderWidth: 2,
    borderStyle: 'solid',
};
var componentTwiddlerStyle = {
    borderWidth: 1,
    padding: 8,
    margin: 4,
    borderColor: '#ababab',
    borderStyle: 'solid',
};
var focusedComponentTwiddlerStyle = tslib_1.__assign(tslib_1.__assign({}, componentTwiddlerStyle), { borderColor: 'black', backgroundColor: 'lightblue' });
var ComponentTwiddler = function (props) {
    var _a = (0, interactive_hooks_1.useFocusState)({}), focusProps = _a[0], focusState = _a[1];
    return (React.createElement(react_native_1.TouchableHighlight, tslib_1.__assign({}, { focusable: false }, { onPress: props.onPress }),
        React.createElement(react_native_1.View, tslib_1.__assign({ focusable: true }, focusProps, { style: focusState.focused ? focusedComponentTwiddlerStyle : componentTwiddlerStyle }),
            React.createElement(react_native_2.Text, null, props.label))));
};
exports.ComponentTwiddler = ComponentTwiddler;
var BasicFocusTrapZone = function () {
    var _a = React.useState({
        useTrapZone: false,
        renderTrapZone: true,
        disableFirstFocus: false,
        ignoreExternalFocusing: false,
        focusPreviouslyFocusedInnerElement: false,
    }), state = _a[0], setState = _a[1];
    var ftzRef = React.useRef(null);
    var onKeyDown = React.useCallback(function (ev) {
        if (ev.nativeEvent.key === 'Enter') {
            setState(tslib_1.__assign(tslib_1.__assign({}, state), { useTrapZone: !state.useTrapZone }));
        }
        else if (ev.nativeEvent.key === ' ') {
            setState(tslib_1.__assign(tslib_1.__assign({}, state), { renderTrapZone: !state.renderTrapZone }));
        }
        else if (ev.nativeEvent.key === 'f' && ftzRef.current) {
            ftzRef.current.focus();
        }
    }, [state, setState]);
    var onTwiddleExternalFocusing = React.useCallback(function () {
        setState(tslib_1.__assign(tslib_1.__assign({}, state), { ignoreExternalFocusing: !state.ignoreExternalFocusing }));
    }, [state, setState]);
    var onTwiddleFocusPrevious = React.useCallback(function () {
        setState(tslib_1.__assign(tslib_1.__assign({}, state), { focusPreviouslyFocusedInnerElement: !state.focusPreviouslyFocusedInnerElement }));
    }, [state, setState]);
    var onTwiddleFirstFocus = React.useCallback(function () {
        setState(tslib_1.__assign(tslib_1.__assign({}, state), { disableFirstFocus: !state.disableFirstFocus }));
    }, [state, setState]);
    return (React.createElement(react_native_1.View, tslib_1.__assign({}, { 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 ? activeTrapZoneStyle : 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" }))))));
};
var focusTrapZoneSections = [
    {
        name: 'Basic FocusTrapZone Usage',
        testID: consts_1.FOCUSTRAPZONE_TESTPAGE,
        component: BasicFocusTrapZone,
    },
];
var FocusTrapTest = function () {
    var status = {
        win32Status: 'Beta',
        uwpStatus: 'Backlog',
        iosStatus: 'N/A',
        macosStatus: 'N/A',
        androidStatus: 'N/A',
    };
    var 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