"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FocusZone2D = exports.GridOfButtons = exports.FocusZoneListWrapper = exports.FocusZoneDirections = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(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 switch_1 = require("@fluentui-react-native/switch");
var styles_1 = require("./styles");
var consts_1 = require("../../../../E2E/src/FocusZone/consts");
var styles_2 = require("../Common/styles");
var TestProps_1 = require("../Common/TestProps");
exports.FocusZoneDirections = ['bidirectional', 'horizontal', 'vertical', 'none'];
var FocusZoneListWrapper = function (_a) {
    var beforeID = _a.beforeID, afterID = _a.afterID, children = _a.children;
    var 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, tslib_1.__assign({}, buttonProps, (0, TestProps_1.testProps)(beforeID))),
        children,
        react_1.default.createElement(button_1.ButtonV1, tslib_1.__assign({}, buttonProps, (0, TestProps_1.testProps)(afterID)))));
};
exports.FocusZoneListWrapper = FocusZoneListWrapper;
var GridOfButtons = function (props) {
    return (react_1.default.createElement(react_native_1.View, { style: styles_1.focusZoneTestStyles.dashedBorder }, tslib_1.__spreadArray([], Array(props.gridHeight), true).map(function (_value, heightIndex) {
        return (react_1.default.createElement(react_native_1.View, { key: heightIndex, style: styles_1.focusZoneTestStyles.focusZoneViewStyle }, tslib_1.__spreadArray([], Array(props.gridWidth), true).map(function (_value, widthIndex) {
            var gridIndex = heightIndex * props.gridWidth + widthIndex + 1;
            return (react_1.default.createElement(styles_1.GridButton, tslib_1.__assign({ key: widthIndex, style: styles_1.focusZoneTestStyles.focusZoneButton, componentRef: gridIndex === props.tabbableIdx ? props.tabRef : undefined }, (0, TestProps_1.testProps)(props.e2etesting ? (0, consts_1.FOCUSZONE_GRID_BUTTON)(gridIndex) : undefined)),
                react_1.default.createElement(react_native_2.Text, null, gridIndex)));
        })));
    })));
};
exports.GridOfButtons = GridOfButtons;
var FocusZone2D = function () {
    var _a = react_1.default.useState(false), is2DNav = _a[0], set2dNav = _a[1];
    var _b = react_1.default.useState(false), isDisabled = _b[0], setDisabled = _b[1];
    var _c = react_1.default.useState(false), isCircularNav = _c[0], setIsCircularNav = _c[1];
    var _d = react_1.default.useState(false), useDeffaultTabbableElement = _d[0], setUseDeffaultTabbableElement = _d[1];
    var _e = react_1.default.useState('bidirectional'), direction = _e[0], setDirection = _e[1];
    var 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, tslib_1.__assign({ variant: "subheaderSemibold" }, (0, TestProps_1.testProps)(consts_1.FOCUSZONE_TEST_COMPONENT)), "FocusZone Direction"),
            react_1.default.createElement(react_native_2.MenuButton, tslib_1.__assign({ content: "Current direction: ".concat(direction), menuItems: exports.FocusZoneDirections.map(function (dir) { return ({
                    itemKey: dir,
                    text: dir,
                    testID: (0, consts_1.FOCUSZONE_DIRECTION_ID)(dir),
                }); }), onItemClick: function (dir) { return setDirection(dir); } }, (0, TestProps_1.testProps)(consts_1.FOCUSZONE_DIRECTION_PICKER))),
            react_1.default.createElement(switch_1.Switch
            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
            , tslib_1.__assign({}, (0, TestProps_1.testProps)(consts_1.FOCUSZONE_TWO_DIM_SWITCH), { label: "2D Navigation", checked: is2DNav, onChange: function (_, checked) { return set2dNav(checked); } })),
            react_1.default.createElement(switch_1.Switch
            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
            , tslib_1.__assign({}, (0, TestProps_1.testProps)(consts_1.FOCUSZONE_DISABLED_SWITCH), { label: "Disabled", checked: isDisabled, onChange: function (_, checked) { return setDisabled(checked); } })),
            react_1.default.createElement(switch_1.Switch
            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
            , tslib_1.__assign({}, (0, TestProps_1.testProps)(consts_1.FOCUSZONE_CIRCLE_NAV_SWITCH), { label: "Circular Navigation", checked: isCircularNav, onChange: function (_, checked) { return setIsCircularNav(checked); } })),
            react_1.default.createElement(switch_1.Switch, tslib_1.__assign({ label: "Use Default Tabbable Element", checked: useDeffaultTabbableElement, onChange: function (_, checked) { return setUseDeffaultTabbableElement(checked); } }, (0, TestProps_1.testProps)(consts_1.FOCUSZONE_DEFAULT_TABBABLE_SWITCH)))),
        react_1.default.createElement(exports.FocusZoneListWrapper, { beforeID: consts_1.FOCUSZONE_GRID_BEFORE, afterID: consts_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