"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FocusZoneTest = exports.FirstFocusTest = void 0;
const React = __importStar(require("react"));
const react_native_1 = require("react-native");
const react_native_2 = require("@fluentui/react-native");
const button_1 = require("@fluentui-react-native/button");
const e2e_testing_1 = require("@fluentui-react-native/e2e-testing");
const experimental_checkbox_1 = require("@fluentui-react-native/experimental-checkbox");
const FocusZoneE2ETest_1 = require("./FocusZoneE2ETest");
const styles_1 = require("./styles");
const MenuPicker_1 = require("../Common/MenuPicker");
const Test_1 = require("../Test");
const directionCollection = FocusZoneE2ETest_1.FocusZoneDirections.map((dir) => ({ label: dir, value: dir }));
const Checkboxes = (props) => {
    return (React.createElement(react_native_1.View, { style: styles_1.focusZoneTestStyles.dashedBorder },
        React.createElement(experimental_checkbox_1.Checkbox, { label: "Option A", ...props }),
        React.createElement(experimental_checkbox_1.Checkbox, { label: "Option B", ...props }),
        React.createElement(experimental_checkbox_1.Checkbox, { label: "Option C", ...props })));
};
const DirectionalFocusZone = () => {
    const [direction, setDirection] = React.useState('none');
    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))));
};
const CommonUsageFocusZone = () => {
    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))));
};
const FocusZoneInsideScrollView = () => {
    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"))))));
};
const FocusZoneNoFocusableElements = () => {
    return (React.createElement(react_native_2.FocusZone, null,
        React.createElement(Checkboxes, { disabled: true })));
};
const FocusZoneNoProps = () => {
    return (React.createElement(react_native_2.FocusZone, null,
        React.createElement(Checkboxes, null)));
};
const FocusZoneTabNavigationComponent = () => {
    const [tabNavigation, setTabNavigation] = React.useState('None');
    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: ${tabNavigation}`, menuItems: FocusZoneE2ETest_1.FocusZoneTabNavigations.map((dir) => ({
                itemKey: dir,
                text: dir,
            })), onItemClick: (dir) => setTabNavigation(dir) }),
        React.createElement(react_native_2.FocusZone, { tabKeyNavigation: tabNavigation },
            React.createElement(Checkboxes, null))));
};
const TinyBox = () => {
    const ref = React.useRef();
    const 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 });
};
const WideBox = () => {
    const ref = React.useRef();
    const 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 });
};
const TinyText = () => {
    return (React.createElement(react_native_2.Text, { selectable: true, style: styles_1.focusZoneTestStyles.smallBoxStyle }, "Hi"));
};
const WideText = () => {
    return (React.createElement(react_native_2.Text, { selectable: true, style: styles_1.focusZoneTestStyles.wideBoxStyle }, "Hello world"));
};
const DifferentSizesTest = () => {
    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))));
};
const NestedFocusZone = () => {
    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"))))));
};
const FocusZoneGrid = () => {
    const [isCircularNavigation, setCircularNavigation] = React.useState(true);
    const [tabNavigation, setTabNavigation] = React.useState('None');
    const onCircularNavigationChange = React.useCallback((_, isChecked) => 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: ${tabNavigation}`, menuItems: FocusZoneE2ETest_1.FocusZoneTabNavigations.map((dir) => ({
                    itemKey: dir,
                    text: dir,
                })), onItemClick: (dir) => setTabNavigation(dir) }),
            React.createElement(react_native_2.FocusZone, { isCircularNavigation: true, tabKeyNavigation: tabNavigation },
                React.createElement(FocusZoneE2ETest_1.GridOfButtons, { gridWidth: 3, gridHeight: 3 })))));
};
const FocusZoneTextInput = () => {
    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 })))));
};
const FirstFocusTest = () => {
    const outerNormalRef = React.useRef(null);
    const innerNormalRef = React.useRef(null);
    const innerDirectRef = React.useRef(null);
    const innerFZRef = React.useRef(null);
    const outerNativeID = 'nativeIDToOuterButton';
    const innerNativeID = 'nativeIDToInnerButton';
    const innerDirectNativeID = 'nativeIDDirectToInnerButton';
    const [outerFocusZoneTabbableElement, setOuterFocusZoneTabbableElement] = React.useState();
    const [innerFocusZoneTabbableElement, setInnerFocusZoneTabbableElement] = React.useState();
    return (React.createElement(react_native_2.FocusZone, { defaultTabbableElement: outerFocusZoneTabbableElement, tabKeyNavigation: "Normal" },
        React.createElement(react_native_1.View, null,
            React.createElement(button_1.ButtonV1, { onClick: () => setOuterFocusZoneTabbableElement(undefined) }, "clear OuterFocusZone"),
            React.createElement(button_1.ButtonV1, { componentRef: outerNormalRef, onClick: () => setOuterFocusZoneTabbableElement(outerNormalRef) }, "Test ref"),
            React.createElement(button_1.ButtonV1, { nativeID: outerNativeID, onClick: () => setOuterFocusZoneTabbableElement(outerNativeID) }, "Test nativeId")),
        React.createElement(react_native_2.FocusZone, { componentRef: innerFZRef, defaultTabbableElement: innerFocusZoneTabbableElement },
            React.createElement(button_1.ButtonV1, { onClick: () => setInnerFocusZoneTabbableElement(undefined) }, "clear InnerFocusZone"),
            React.createElement(button_1.ButtonV1, { componentRef: innerDirectRef, onClick: () => setOuterFocusZoneTabbableElement(innerDirectRef) }, "Test nested (direct ref)"),
            React.createElement(button_1.ButtonV1, { nativeID: innerDirectNativeID, onClick: () => setOuterFocusZoneTabbableElement(innerDirectNativeID) }, "Test nested (direct nativeID)"),
            React.createElement(button_1.ButtonV1, { componentRef: innerNormalRef, onClick: () => setInnerFocusZoneTabbableElement(innerNormalRef) }, "Test inner zone (ref)"),
            React.createElement(button_1.ButtonV1, { nativeID: innerNativeID, onClick: () => setInnerFocusZoneTabbableElement(innerNativeID) }, "Test inner zone (nativeID)"),
            React.createElement(button_1.ButtonV1, { onClick: () => setOuterFocusZoneTabbableElement(innerFZRef) }, "Test nested (transitive)"))));
};
exports.FirstFocusTest = FirstFocusTest;
const focusZoneSections = [
    {
        name: 'First Focus FocusZone Usage',
        component: exports.FirstFocusTest,
        testID: e2e_testing_1.FOCUSZONE_TESTPAGE,
    },
    {
        name: 'Common FocusZone Usage',
        component: CommonUsageFocusZone,
        testID: e2e_testing_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,
    },
];
const e2eSections = [
    {
        name: '2D Navigation + E2E Testing',
        component: FocusZoneE2ETest_1.FocusZone2D,
    },
];
const FocusZoneTest = () => {
    const 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