import { __assign } from "tslib";
import * as React from 'react';
import { TouchableHighlight, View } from 'react-native';
import { FocusTrapZone, Text } from '@fluentui/react-native';
import { useFocusState } from '@fluentui-react-native/interactive-hooks';
import { Stack } from '@fluentui-react-native/stack';
import { useTheme } from '@fluentui-react-native/theme-types';
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
import { FOCUSTRAPZONE_TESTPAGE } from '../../../../E2E/src/FocusTrapZone/consts';
import { stackStyle } from '../Common/styles';
import { Test } from '../Test';
var getThemedStyles = themedStyleSheet(function (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,
        },
    };
});
export var ComponentTwiddler = function (props) {
    var _a = useFocusState({}), focusProps = _a[0], focusState = _a[1];
    var theme = useTheme();
    var themedStyles = getThemedStyles(theme);
    return (React.createElement(TouchableHighlight, __assign({}, { focusable: false }, { onPress: props.onPress }),
        React.createElement(View, __assign({ focusable: true }, focusProps, { style: focusState.focused ? themedStyles.focusedComponentTwiddlerStyle : themedStyles.componentTwiddlerStyle }),
            React.createElement(Text, { style: focusState.focused ? themedStyles.focusedComponentTwiddlerText : themedStyles.componentTwiddlerText }, props.label))));
};
var BasicFocusTrapZone = function () {
    var theme = useTheme();
    var themedStyles = getThemedStyles(theme);
    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(__assign(__assign({}, state), { useTrapZone: !state.useTrapZone }));
        }
        else if (ev.nativeEvent.key === ' ') {
            setState(__assign(__assign({}, state), { renderTrapZone: !state.renderTrapZone }));
        }
        else if (ev.nativeEvent.key === 'f' && ftzRef.current) {
            ftzRef.current.focus();
        }
    }, [state, setState]);
    var onTwiddleExternalFocusing = React.useCallback(function () {
        setState(__assign(__assign({}, state), { ignoreExternalFocusing: !state.ignoreExternalFocusing }));
    }, [state, setState]);
    var onTwiddleFocusPrevious = React.useCallback(function () {
        setState(__assign(__assign({}, state), { focusPreviouslyFocusedInnerElement: !state.focusPreviouslyFocusedInnerElement }));
    }, [state, setState]);
    var onTwiddleFirstFocus = React.useCallback(function () {
        setState(__assign(__assign({}, state), { disableFirstFocus: !state.disableFirstFocus }));
    }, [state, setState]);
    return (React.createElement(View, __assign({}, { onKeyDown: onKeyDown }),
        React.createElement(Stack, { style: stackStyle, gap: 5 },
            React.createElement(ComponentTwiddler, { label: "Press space to render or enter to trap, f to focus" }),
            React.createElement(ComponentTwiddler, { label: state.ignoreExternalFocusing ? 'ignoreExternalFocusing: true' : 'ignoreExternalFocusing: false', onPress: onTwiddleExternalFocusing }),
            React.createElement(ComponentTwiddler, { label: state.focusPreviouslyFocusedInnerElement
                    ? 'focusPreviouslyFocusedInnerElement: true'
                    : 'focusPreviouslyFocusedInnerElement: false', onPress: onTwiddleFocusPrevious }),
            React.createElement(ComponentTwiddler, { label: state.disableFirstFocus ? 'disableFirstFocus: true' : 'disableFirstFocus: false', onPress: onTwiddleFirstFocus }),
            state.renderTrapZone && (React.createElement(FocusTrapZone, { componentRef: ftzRef, disableFirstFocus: state.disableFirstFocus, ignoreExternalFocusing: state.ignoreExternalFocusing, focusPreviouslyFocusedInnerElement: state.focusPreviouslyFocusedInnerElement, disabled: !state.useTrapZone, style: state.useTrapZone ? themedStyles.activeTrapZoneStyle : themedStyles.trapZoneStyle },
                React.createElement(Text, null, state.useTrapZone ? 'Trap Active' : 'Trap Active'),
                React.createElement(ComponentTwiddler, { label: "trapped" }),
                React.createElement(ComponentTwiddler, { label: "trapped" }),
                React.createElement(ComponentTwiddler, { label: "trapped" }),
                React.createElement(ComponentTwiddler, { label: "trapped" }))))));
};
var focusTrapZoneSections = [
    {
        name: 'Basic FocusTrapZone Usage',
        testID: FOCUSTRAPZONE_TESTPAGE,
        component: BasicFocusTrapZone,
    },
];
export 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, { name: "Focus Trap Zone Test", description: description, sections: focusTrapZoneSections, status: status });
};
//# sourceMappingURL=FocusTrapZoneTest.js.map