"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FocusZoneTest = exports.FirstFocusTest = 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 button_1 = require("@fluentui-react-native/button");
var experimental_checkbox_1 = require("@fluentui-react-native/experimental-checkbox");
var FocusZoneE2ETest_1 = require("./FocusZoneE2ETest");
var styles_1 = require("./styles");
var consts_1 = require("../../../../E2E/src/FocusZone/consts");
var MenuPicker_1 = require("../Common/MenuPicker");
var Test_1 = require("../Test");
var directionCollection = FocusZoneE2ETest_1.FocusZoneDirections.map(function (dir) { return ({ label: dir, value: dir }); });
var Checkboxes = function (props) {
    return (React.createElement(react_native_1.View, { style: styles_1.focusZoneTestStyles.dashedBorder },
        React.createElement(experimental_checkbox_1.Checkbox, tslib_1.__assign({ label: "Option A" }, props)),
        React.createElement(experimental_checkbox_1.Checkbox, tslib_1.__assign({ label: "Option B" }, props)),
        React.createElement(experimental_checkbox_1.Checkbox, tslib_1.__assign({ label: "Option C" }, props))));
};
var DirectionalFocusZone = function () {
    var _a = React.useState('none'), direction = _a[0], setDirection = _a[1];
    return (React.createElement(React.Fragment, null,
        React.createElement(MenuPicker_1.MenuPicker, { prompt: "Direction", selected: direction, onChange: setDirection, collection: directionCollection }),
        React.createElement(react_native_2.FocusZone, { focusZoneDirection: direction },
            React.createElement(Checkboxes, null))));
};
var CommonUsageFocusZone = function () {
    return (React.createElement(FocusZoneE2ETest_1.FocusZoneListWrapper, null,
        React.createElement(react_native_2.FocusZone, { isCircularNavigation: true },
            React.createElement(styles_1.SubheaderText, null, "FocusZone with Circular Navigation"),
            React.createElement(Checkboxes, null)),
        React.createElement(react_native_2.FocusZone, { disabled: true },
            React.createElement(styles_1.SubheaderText, null, "Disabled FocusZone"),
            React.createElement(Checkboxes, null))));
};
var FocusZoneInsideScrollView = function () {
    return (React.createElement(FocusZoneE2ETest_1.FocusZoneListWrapper, null,
        React.createElement(react_native_2.FocusZone, { focusZoneDirection: "bidirectional" },
            React.createElement(react_native_1.View, { style: styles_1.focusZoneTestStyles.dashedBorder },
                React.createElement(button_1.ButtonV1, { style: styles_1.focusZoneTestStyles.listWrapperButton }, "Inside Focus Zone"),
                React.createElement(react_native_1.ScrollView, { focusable: false, style: styles_1.focusZoneTestStyles.scrollViewStyle, contentContainerStyle: styles_1.focusZoneTestStyles.scrollViewContentStyle, showsVerticalScrollIndicator: true },
                    React.createElement(button_1.ButtonV1, { style: styles_1.focusZoneTestStyles.scrollViewButton }, "1"),
                    React.createElement(button_1.ButtonV1, { style: styles_1.focusZoneTestStyles.scrollViewButton }, "2"),
                    React.createElement(button_1.ButtonV1, { style: styles_1.focusZoneTestStyles.scrollViewButton }, "3"))))));
};
var FocusZoneNoFocusableElements = function () {
    return (React.createElement(react_native_2.FocusZone, null,
        React.createElement(Checkboxes, { disabled: true })));
};
var FocusZoneNoProps = function () {
    return (React.createElement(react_native_2.FocusZone, null,
        React.createElement(Checkboxes, null)));
};
var FocusZoneTabNavigationComponent = function () {
    var _a = React.useState('None'), tabNavigation = _a[0], setTabNavigation = _a[1];
    return (React.createElement(react_native_1.View, null,
        React.createElement(react_native_2.Text, null, "FocusZone Tab Navigation"),
        React.createElement(react_native_2.MenuButton, { content: "Current tab key navigation: ".concat(tabNavigation), menuItems: FocusZoneE2ETest_1.FocusZoneTabNavigations.map(function (dir) { return ({
                itemKey: dir,
                text: dir,
            }); }), onItemClick: function (dir) { return setTabNavigation(dir); } }),
        React.createElement(react_native_2.FocusZone, { tabKeyNavigation: tabNavigation },
            React.createElement(Checkboxes, null))));
};
var TinyBox = function () {
    var ref = React.useRef();
    var onPress = (0, react_native_2.useOnPressWithFocus)(ref, null);
    return React.createElement(react_native_1.Pressable, { focusable: true, style: styles_1.focusZoneTestStyles.smallBoxStyle, ref: ref, onPress: onPress });
};
var WideBox = function () {
    var ref = React.useRef();
    var onPress = (0, react_native_2.useOnPressWithFocus)(ref, null);
    return React.createElement(react_native_1.Pressable, { focusable: true, style: styles_1.focusZoneTestStyles.wideBoxStyle, ref: ref, onPress: onPress });
};
var TinyText = function () {
    return (React.createElement(react_native_2.Text, { selectable: true, style: styles_1.focusZoneTestStyles.smallBoxStyle }, "Hi"));
};
var WideText = function () {
    return (React.createElement(react_native_2.Text, { selectable: true, style: styles_1.focusZoneTestStyles.wideBoxStyle }, "Hello world"));
};
var DifferentSizesTest = function () {
    return (React.createElement(react_native_2.FocusZone, { focusZoneDirection: "bidirectional" },
        React.createElement(react_native_1.View, { style: styles_1.focusZoneTestStyles.dashedBorder },
            React.createElement(WideBox, null),
            React.createElement(TinyBox, null),
            React.createElement(WideBox, null),
            React.createElement(TinyText, null),
            React.createElement(WideText, null))));
};
var NestedFocusZone = function () {
    return (React.createElement(FocusZoneE2ETest_1.FocusZoneListWrapper, null,
        React.createElement(React.Fragment, null,
            React.createElement(react_native_2.Text, null, "Parent FocusZone, vertical"),
            React.createElement(react_native_1.View, { style: styles_1.focusZoneTestStyles.nestedFocusZoneStyle },
                React.createElement(react_native_2.FocusZone, { focusZoneDirection: "vertical" },
                    React.createElement(react_native_2.Text, null, "Inner FocusZone 1, horizontal"),
                    React.createElement(react_native_2.FocusZone, { focusZoneDirection: "horizontal" },
                        React.createElement(FocusZoneE2ETest_1.GridOfButtons, { gridWidth: 3, gridHeight: 1 })),
                    React.createElement(react_native_2.Text, null, "Inner FocusZone 2, horizontal"),
                    React.createElement(react_native_2.FocusZone, { focusZoneDirection: "horizontal" },
                        React.createElement(FocusZoneE2ETest_1.GridOfButtons, { gridWidth: 3, gridHeight: 1 })),
                    React.createElement(button_1.ButtonV1, null, "Inside Focus Zone"))))));
};
var FocusZoneGrid = function () {
    var _a = React.useState(true), isCircularNavigation = _a[0], setCircularNavigation = _a[1];
    var _b = React.useState('None'), tabNavigation = _b[0], setTabNavigation = _b[1];
    var onCircularNavigationChange = React.useCallback(function (_, isChecked) { return setCircularNavigation(isChecked); }, []);
    return (React.createElement(FocusZoneE2ETest_1.FocusZoneListWrapper, null,
        React.createElement(React.Fragment, null,
            React.createElement(react_native_2.Text, null, "FocusZone Grid"),
            React.createElement(experimental_checkbox_1.Checkbox, { label: "Circular Navigation", checked: isCircularNavigation, onChange: onCircularNavigationChange }),
            React.createElement(react_native_2.MenuButton, { content: "Tab key navigation: ".concat(tabNavigation), menuItems: FocusZoneE2ETest_1.FocusZoneTabNavigations.map(function (dir) { return ({
                    itemKey: dir,
                    text: dir,
                }); }), onItemClick: function (dir) { return setTabNavigation(dir); } }),
            React.createElement(react_native_2.FocusZone, { isCircularNavigation: true, tabKeyNavigation: tabNavigation },
                React.createElement(FocusZoneE2ETest_1.GridOfButtons, { gridWidth: 3, gridHeight: 3 })))));
};
var FocusZoneTextInput = function () {
    return (React.createElement(FocusZoneE2ETest_1.FocusZoneListWrapper, null,
        React.createElement(React.Fragment, null,
            React.createElement(react_native_2.Text, null, "FocusZone Grid"),
            React.createElement(react_native_2.FocusZone, null,
                React.createElement(react_native_1.TextInput, { multiline: true })))));
};
var FirstFocusTest = function () {
    var outerNormalRef = React.useRef(null);
    var innerNormalRef = React.useRef(null);
    var innerDirectRef = React.useRef(null);
    var innerFZRef = React.useRef(null);
    var outerNativeID = 'nativeIDToOuterButton';
    var innerNativeID = 'nativeIDToInnerButton';
    var innerDirectNativeID = 'nativeIDDirectToInnerButton';
    var _a = React.useState(), outerFocusZoneTabbableElement = _a[0], setOuterFocusZoneTabbableElement = _a[1];
    var _b = React.useState(), innerFocusZoneTabbableElement = _b[0], setInnerFocusZoneTabbableElement = _b[1];
    return (React.createElement(react_native_2.FocusZone, { defaultTabbableElement: outerFocusZoneTabbableElement, tabKeyNavigation: "Normal" },
        React.createElement(react_native_1.View, null,
            React.createElement(button_1.ButtonV1, { onClick: function () { return setOuterFocusZoneTabbableElement(undefined); } }, "clear OuterFocusZone"),
            React.createElement(button_1.ButtonV1, { componentRef: outerNormalRef, onClick: function () { return setOuterFocusZoneTabbableElement(outerNormalRef); } }, "Test ref"),
            React.createElement(button_1.ButtonV1, { nativeID: outerNativeID, onClick: function () { return setOuterFocusZoneTabbableElement(outerNativeID); } }, "Test nativeId")),
        React.createElement(react_native_2.FocusZone, { componentRef: innerFZRef, defaultTabbableElement: innerFocusZoneTabbableElement },
            React.createElement(button_1.ButtonV1, { onClick: function () { return setInnerFocusZoneTabbableElement(undefined); } }, "clear InnerFocusZone"),
            React.createElement(button_1.ButtonV1, { componentRef: innerDirectRef, onClick: function () { return setOuterFocusZoneTabbableElement(innerDirectRef); } }, "Test nested (direct ref)"),
            React.createElement(button_1.ButtonV1, { nativeID: innerDirectNativeID, onClick: function () { return setOuterFocusZoneTabbableElement(innerDirectNativeID); } }, "Test nested (direct nativeID)"),
            React.createElement(button_1.ButtonV1, { componentRef: innerNormalRef, onClick: function () { return setInnerFocusZoneTabbableElement(innerNormalRef); } }, "Test inner zone (ref)"),
            React.createElement(button_1.ButtonV1, { nativeID: innerNativeID, onClick: function () { return setInnerFocusZoneTabbableElement(innerNativeID); } }, "Test inner zone (nativeID)"),
            React.createElement(button_1.ButtonV1, { onClick: function () { return setOuterFocusZoneTabbableElement(innerFZRef); } }, "Test nested (transitive)"))));
};
exports.FirstFocusTest = FirstFocusTest;
var focusZoneSections = [
    {
        name: 'First Focus FocusZone Usage',
        component: exports.FirstFocusTest,
        testID: consts_1.FOCUSZONE_TESTPAGE,
    },
    {
        name: 'Common FocusZone Usage',
        component: CommonUsageFocusZone,
        testID: consts_1.FOCUSZONE_TESTPAGE,
    },
    {
        name: 'Directional FocusZone Usage',
        component: DirectionalFocusZone,
    },
    {
        name: 'FocusZone with Tab Key Abstraction',
        component: FocusZoneTabNavigationComponent,
    },
    {
        name: 'ScrollView inside FocusZone',
        component: FocusZoneInsideScrollView,
    },
    {
        name: 'FocusZone with no focusable components',
        component: FocusZoneNoFocusableElements,
    },
    {
        name: 'FocusZone with no props',
        component: FocusZoneNoProps,
    },
    {
        name: 'Different Sized Children',
        component: DifferentSizesTest,
    },
    {
        name: 'Nested FocusZone',
        component: NestedFocusZone,
    },
    {
        name: 'FocusZone Grid',
        component: FocusZoneGrid,
    },
    {
        name: 'FocusZone with TextInput',
        component: FocusZoneTextInput,
    },
];
var e2eSections = [
    {
        name: '2D Navigation + E2E Testing',
        component: FocusZoneE2ETest_1.FocusZone2D,
    },
];
var FocusZoneTest = function () {
    var status = {
        win32Status: 'Production',
        uwpStatus: 'Backlog',
        iosStatus: 'Backlog',
        macosStatus: 'Production',
        androidStatus: 'Backlog',
    };
    return (React.createElement(Test_1.Test, { name: "FocusZone Test", description: 'No description.', sections: focusZoneSections, status: status, e2eSections: e2eSections }));
};
exports.FocusZoneTest = FocusZoneTest;
//# sourceMappingURL=FocusZoneTest.js.map