"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FocusZone2D = exports.GridOfButtons = exports.FocusZoneListWrapper = exports.FocusZoneTabNavigations = exports.FocusZoneDirections = void 0;
const react_1 = __importDefault(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 switch_1 = require("@fluentui-react-native/switch");
const styles_1 = require("./styles");
const styles_2 = require("../Common/styles");
const TestProps_1 = require("../Common/TestProps");
exports.FocusZoneDirections = ['bidirectional', 'horizontal', 'vertical', 'none'];
exports.FocusZoneTabNavigations = ['None', 'NavigateWrap', 'NavigateStopAtEnds', 'Normal'];
// Buttons by default focus on click on Win32, but they don't on the Mac, so place focus explicitly for convenience
function useFocusOnClickForMac() {
    const componentRef = react_1.default.useRef();
    const onClick = react_1.default.useCallback(() => componentRef.current?.focus(), [componentRef]);
    return react_native_1.Platform.OS === 'macos' ? { componentRef, onClick } : {};
}
const FocusZoneListWrapper = ({ beforeID, afterID, children }) => {
    const buttonProps = { children: 'Click to Focus', style: styles_1.focusZoneTestStyles.listWrapperButton };
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(button_1.ButtonV1, { ...buttonProps, ...useFocusOnClickForMac(), ...(0, TestProps_1.testProps)(beforeID) }),
        children,
        react_1.default.createElement(button_1.ButtonV1, { ...buttonProps, ...useFocusOnClickForMac(), ...(0, TestProps_1.testProps)(afterID) })));
};
exports.FocusZoneListWrapper = FocusZoneListWrapper;
const GridOfButtons = (props) => {
    return (react_1.default.createElement(react_native_1.View, { style: styles_1.focusZoneTestStyles.dashedBorder }, [...Array(props.gridHeight)].map((_value, heightIndex) => {
        return (react_1.default.createElement(react_native_1.View, { key: heightIndex, style: styles_1.focusZoneTestStyles.focusZoneViewStyle }, [...Array(props.gridWidth)].map((_value, widthIndex) => {
            const gridIndex = heightIndex * props.gridWidth + widthIndex + 1;
            return (react_1.default.createElement(styles_1.GridButton, { key: widthIndex, style: styles_1.focusZoneTestStyles.focusZoneButton, componentRef: gridIndex === props.tabbableIdx ? props.tabRef : undefined, ...(0, TestProps_1.testProps)(props.e2etesting ? (0, e2e_testing_1.FOCUSZONE_GRID_BUTTON)(gridIndex) : undefined) },
                react_1.default.createElement(react_native_2.Text, null, gridIndex)));
        })));
    })));
};
exports.GridOfButtons = GridOfButtons;
const FocusZone2D = () => {
    const [is2DNav, set2dNav] = react_1.default.useState(false);
    const [isDisabled, setDisabled] = react_1.default.useState(false);
    const [isCircularNav, setIsCircularNav] = react_1.default.useState(false);
    const [useDeffaultTabbableElement, setUseDeffaultTabbableElement] = react_1.default.useState(false);
    const [direction, setDirection] = react_1.default.useState('bidirectional');
    const tabbableRef = react_1.default.useRef(null);
    return (react_1.default.createElement(react_native_1.View, { style: styles_2.commonTestStyles.root },
        react_1.default.createElement(react_native_1.View, { style: styles_2.commonTestStyles.settings },
            react_1.default.createElement(react_native_2.Text, { variant: "subheaderSemibold", ...(0, TestProps_1.testProps)(e2e_testing_1.FOCUSZONE_TEST_COMPONENT) }, "FocusZone Direction"),
            react_1.default.createElement(react_native_2.MenuButton, { content: `Current direction: ${direction}`, menuItems: exports.FocusZoneDirections.map((dir) => ({
                    itemKey: dir,
                    text: dir,
                    testID: (0, e2e_testing_1.FOCUSZONE_DIRECTION_ID)(dir),
                })), onItemClick: (dir) => setDirection(dir), ...(0, TestProps_1.testProps)(e2e_testing_1.FOCUSZONE_DIRECTION_PICKER) }),
            react_1.default.createElement(switch_1.Switch
            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
            , { ...(0, TestProps_1.testProps)(e2e_testing_1.FOCUSZONE_TWO_DIM_SWITCH), label: "2D Navigation", checked: is2DNav, onChange: (_, checked) => set2dNav(checked) }),
            react_1.default.createElement(switch_1.Switch
            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
            , { ...(0, TestProps_1.testProps)(e2e_testing_1.FOCUSZONE_DISABLED_SWITCH), label: "Disabled", checked: isDisabled, onChange: (_, checked) => setDisabled(checked) }),
            react_1.default.createElement(switch_1.Switch
            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
            , { ...(0, TestProps_1.testProps)(e2e_testing_1.FOCUSZONE_CIRCLE_NAV_SWITCH), label: "Circular Navigation", checked: isCircularNav, onChange: (_, checked) => setIsCircularNav(checked) }),
            react_1.default.createElement(switch_1.Switch, { label: "Use Default Tabbable Element", checked: useDeffaultTabbableElement, onChange: (_, checked) => setUseDeffaultTabbableElement(checked), ...(0, TestProps_1.testProps)(e2e_testing_1.FOCUSZONE_DEFAULT_TABBABLE_SWITCH) })),
        react_1.default.createElement(exports.FocusZoneListWrapper, { beforeID: e2e_testing_1.FOCUSZONE_GRID_BEFORE, afterID: e2e_testing_1.FOCUSZONE_GRID_AFTER },
            react_1.default.createElement(react_native_2.FocusZone, { disabled: isDisabled, use2DNavigation: is2DNav, focusZoneDirection: direction, isCircularNavigation: isCircularNav, defaultTabbableElement: useDeffaultTabbableElement ? tabbableRef : undefined },
                react_1.default.createElement(exports.GridOfButtons, { gridWidth: 3, gridHeight: 3, tabRef: tabbableRef, tabbableIdx: 4, e2etesting: true })))));
};
exports.FocusZone2D = FocusZone2D;
//# sourceMappingURL=FocusZoneE2ETest.js.map