import React from 'react';
import { Platform, View } from 'react-native';
import { FocusZone, MenuButton, Text } from '@fluentui/react-native';
import { ButtonV1 as Button } from '@fluentui-react-native/button';
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 '@fluentui-react-native/e2e-testing';
import { Switch } from '@fluentui-react-native/switch';
import { focusZoneTestStyles, GridButton } from './styles';
import { commonTestStyles } from '../Common/styles';
import { testProps } from '../Common/TestProps';
export const FocusZoneDirections = ['bidirectional', 'horizontal', 'vertical', 'none'];
export const 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.useRef();
    const onClick = React.useCallback(() => componentRef.current?.focus(), [componentRef]);
    return Platform.OS === 'macos' ? { componentRef, onClick } : {};
}
export const FocusZoneListWrapper = ({ beforeID, afterID, children }) => {
    const buttonProps = { children: 'Click to Focus', style: focusZoneTestStyles.listWrapperButton };
    return (React.createElement(React.Fragment, null,
        React.createElement(Button, { ...buttonProps, ...useFocusOnClickForMac(), ...testProps(beforeID) }),
        children,
        React.createElement(Button, { ...buttonProps, ...useFocusOnClickForMac(), ...testProps(afterID) })));
};
export const GridOfButtons = (props) => {
    return (React.createElement(View, { style: focusZoneTestStyles.dashedBorder }, [...Array(props.gridHeight)].map((_value, heightIndex) => {
        return (React.createElement(View, { key: heightIndex, style: focusZoneTestStyles.focusZoneViewStyle }, [...Array(props.gridWidth)].map((_value, widthIndex) => {
            const gridIndex = heightIndex * props.gridWidth + widthIndex + 1;
            return (React.createElement(GridButton, { 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 const FocusZone2D = () => {
    const [is2DNav, set2dNav] = React.useState(false);
    const [isDisabled, setDisabled] = React.useState(false);
    const [isCircularNav, setIsCircularNav] = React.useState(false);
    const [useDeffaultTabbableElement, setUseDeffaultTabbableElement] = React.useState(false);
    const [direction, setDirection] = React.useState('bidirectional');
    const tabbableRef = React.useRef(null);
    return (React.createElement(View, { style: commonTestStyles.root },
        React.createElement(View, { style: commonTestStyles.settings },
            React.createElement(Text, { variant: "subheaderSemibold", ...testProps(FOCUSZONE_TEST_COMPONENT) }, "FocusZone Direction"),
            React.createElement(MenuButton, { content: `Current direction: ${direction}`, menuItems: FocusZoneDirections.map((dir) => ({
                    itemKey: dir,
                    text: dir,
                    testID: FOCUSZONE_DIRECTION_ID(dir),
                })), onItemClick: (dir) => setDirection(dir), ...testProps(FOCUSZONE_DIRECTION_PICKER) }),
            React.createElement(Switch
            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
            , { ...testProps(FOCUSZONE_TWO_DIM_SWITCH), label: "2D Navigation", checked: is2DNav, onChange: (_, checked) => set2dNav(checked) }),
            React.createElement(Switch
            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
            , { ...testProps(FOCUSZONE_DISABLED_SWITCH), label: "Disabled", checked: isDisabled, onChange: (_, checked) => setDisabled(checked) }),
            React.createElement(Switch
            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
            , { ...testProps(FOCUSZONE_CIRCLE_NAV_SWITCH), label: "Circular Navigation", checked: isCircularNav, onChange: (_, checked) => setIsCircularNav(checked) }),
            React.createElement(Switch, { label: "Use Default Tabbable Element", checked: useDeffaultTabbableElement, onChange: (_, checked) => 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