import { __assign, __spreadArray } from "tslib";
import React from 'react';
import { View } from 'react-native';
import { FocusZone, MenuButton, Text } from '@fluentui/react-native';
import { ButtonV1 as Button } from '@fluentui-react-native/button';
import { Switch } from '@fluentui-react-native/switch';
import { focusZoneTestStyles, GridButton } from './styles';
import { FOCUSZONE_CIRCLE_NAV_SWITCH, FOCUSZONE_DEFAULT_TABBABLE_SWITCH, FOCUSZONE_DIRECTION_ID, FOCUSZONE_DIRECTION_PICKER, FOCUSZONE_DISABLED_SWITCH, FOCUSZONE_GRID_AFTER, FOCUSZONE_GRID_BEFORE, FOCUSZONE_GRID_BUTTON, FOCUSZONE_TEST_COMPONENT, FOCUSZONE_TWO_DIM_SWITCH, } from '../../../../E2E/src/FocusZone/consts';
import { commonTestStyles } from '../Common/styles';
import { testProps } from '../Common/TestProps';
export var FocusZoneDirections = ['bidirectional', 'horizontal', 'vertical', 'none'];
export var FocusZoneTabNavigations = ['None', 'NavigateWrap', 'NavigateStopAtEnds', 'Normal'];
export var FocusZoneListWrapper = function (_a) {
    var beforeID = _a.beforeID, afterID = _a.afterID, children = _a.children;
    var buttonProps = { children: 'Click to Focus', style: focusZoneTestStyles.listWrapperButton };
    return (React.createElement(React.Fragment, null,
        React.createElement(Button, __assign({}, buttonProps, testProps(beforeID))),
        children,
        React.createElement(Button, __assign({}, buttonProps, testProps(afterID)))));
};
export var GridOfButtons = function (props) {
    return (React.createElement(View, { style: focusZoneTestStyles.dashedBorder }, __spreadArray([], Array(props.gridHeight), true).map(function (_value, heightIndex) {
        return (React.createElement(View, { key: heightIndex, style: focusZoneTestStyles.focusZoneViewStyle }, __spreadArray([], Array(props.gridWidth), true).map(function (_value, widthIndex) {
            var gridIndex = heightIndex * props.gridWidth + widthIndex + 1;
            return (React.createElement(GridButton, __assign({ key: widthIndex, style: focusZoneTestStyles.focusZoneButton, componentRef: gridIndex === props.tabbableIdx ? props.tabRef : undefined }, testProps(props.e2etesting ? FOCUSZONE_GRID_BUTTON(gridIndex) : undefined)),
                React.createElement(Text, null, gridIndex)));
        })));
    })));
};
export var FocusZone2D = function () {
    var _a = React.useState(false), is2DNav = _a[0], set2dNav = _a[1];
    var _b = React.useState(false), isDisabled = _b[0], setDisabled = _b[1];
    var _c = React.useState(false), isCircularNav = _c[0], setIsCircularNav = _c[1];
    var _d = React.useState(false), useDeffaultTabbableElement = _d[0], setUseDeffaultTabbableElement = _d[1];
    var _e = React.useState('bidirectional'), direction = _e[0], setDirection = _e[1];
    var tabbableRef = React.useRef(null);
    return (React.createElement(View, { style: commonTestStyles.root },
        React.createElement(View, { style: commonTestStyles.settings },
            React.createElement(Text, __assign({ variant: "subheaderSemibold" }, testProps(FOCUSZONE_TEST_COMPONENT)), "FocusZone Direction"),
            React.createElement(MenuButton, __assign({ content: "Current direction: ".concat(direction), menuItems: FocusZoneDirections.map(function (dir) { return ({
                    itemKey: dir,
                    text: dir,
                    testID: FOCUSZONE_DIRECTION_ID(dir),
                }); }), onItemClick: function (dir) { return setDirection(dir); } }, testProps(FOCUSZONE_DIRECTION_PICKER))),
            React.createElement(Switch
            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
            , __assign({}, testProps(FOCUSZONE_TWO_DIM_SWITCH), { label: "2D Navigation", checked: is2DNav, onChange: function (_, checked) { return set2dNav(checked); } })),
            React.createElement(Switch
            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
            , __assign({}, testProps(FOCUSZONE_DISABLED_SWITCH), { label: "Disabled", checked: isDisabled, onChange: function (_, checked) { return setDisabled(checked); } })),
            React.createElement(Switch
            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
            , __assign({}, testProps(FOCUSZONE_CIRCLE_NAV_SWITCH), { label: "Circular Navigation", checked: isCircularNav, onChange: function (_, checked) { return setIsCircularNav(checked); } })),
            React.createElement(Switch, __assign({ label: "Use Default Tabbable Element", checked: useDeffaultTabbableElement, onChange: function (_, checked) { return setUseDeffaultTabbableElement(checked); } }, testProps(FOCUSZONE_DEFAULT_TABBABLE_SWITCH)))),
        React.createElement(FocusZoneListWrapper, { beforeID: FOCUSZONE_GRID_BEFORE, afterID: FOCUSZONE_GRID_AFTER },
            React.createElement(FocusZone, { disabled: isDisabled, use2DNavigation: is2DNav, focusZoneDirection: direction, isCircularNavigation: isCircularNav, defaultTabbableElement: useDeffaultTabbableElement ? tabbableRef : undefined },
                React.createElement(GridOfButtons, { gridWidth: 3, gridHeight: 3, tabRef: tabbableRef, tabbableIdx: 4, e2etesting: true })))));
};
//# sourceMappingURL=FocusZoneE2ETest.js.map