import * as React from 'react';
import { View, ScrollView, Pressable, TextInput } from 'react-native';
import { FocusZone, MenuButton, Text, useOnPressWithFocus } from '@fluentui/react-native';
import { ButtonV1 as Button } from '@fluentui-react-native/button';
import { FOCUSZONE_TESTPAGE } from '@fluentui-react-native/e2e-testing';
import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
import { FocusZone2D, FocusZoneDirections, FocusZoneListWrapper, FocusZoneTabNavigations, GridOfButtons } from './FocusZoneE2ETest';
import { focusZoneTestStyles, SubheaderText } from './styles';
import { MenuPicker } from '../Common/MenuPicker';
import { Test } from '../Test';
const directionCollection = FocusZoneDirections.map((dir) => ({ label: dir, value: dir }));
const Checkboxes = (props) => {
    return (React.createElement(View, { style: focusZoneTestStyles.dashedBorder },
        React.createElement(Checkbox, { label: "Option A", ...props }),
        React.createElement(Checkbox, { label: "Option B", ...props }),
        React.createElement(Checkbox, { label: "Option C", ...props })));
};
const DirectionalFocusZone = () => {
    const [direction, setDirection] = React.useState('none');
    return (React.createElement(React.Fragment, null,
        React.createElement(MenuPicker, { prompt: "Direction", selected: direction, onChange: setDirection, collection: directionCollection }),
        React.createElement(FocusZone, { focusZoneDirection: direction },
            React.createElement(Checkboxes, null))));
};
const CommonUsageFocusZone = () => {
    return (React.createElement(FocusZoneListWrapper, null,
        React.createElement(FocusZone, { isCircularNavigation: true },
            React.createElement(SubheaderText, null, "FocusZone with Circular Navigation"),
            React.createElement(Checkboxes, null)),
        React.createElement(FocusZone, { disabled: true },
            React.createElement(SubheaderText, null, "Disabled FocusZone"),
            React.createElement(Checkboxes, null))));
};
const FocusZoneInsideScrollView = () => {
    return (React.createElement(FocusZoneListWrapper, null,
        React.createElement(FocusZone, { focusZoneDirection: "bidirectional" },
            React.createElement(View, { style: focusZoneTestStyles.dashedBorder },
                React.createElement(Button, { style: focusZoneTestStyles.listWrapperButton }, "Inside Focus Zone"),
                React.createElement(ScrollView, { focusable: false, style: focusZoneTestStyles.scrollViewStyle, contentContainerStyle: focusZoneTestStyles.scrollViewContentStyle, showsVerticalScrollIndicator: true },
                    React.createElement(Button, { style: focusZoneTestStyles.scrollViewButton }, "1"),
                    React.createElement(Button, { style: focusZoneTestStyles.scrollViewButton }, "2"),
                    React.createElement(Button, { style: focusZoneTestStyles.scrollViewButton }, "3"))))));
};
const FocusZoneNoFocusableElements = () => {
    return (React.createElement(FocusZone, null,
        React.createElement(Checkboxes, { disabled: true })));
};
const FocusZoneNoProps = () => {
    return (React.createElement(FocusZone, null,
        React.createElement(Checkboxes, null)));
};
const FocusZoneTabNavigationComponent = () => {
    const [tabNavigation, setTabNavigation] = React.useState('None');
    return (React.createElement(View, null,
        React.createElement(Text, null, "FocusZone Tab Navigation"),
        React.createElement(MenuButton, { content: `Current tab key navigation: ${tabNavigation}`, menuItems: FocusZoneTabNavigations.map((dir) => ({
                itemKey: dir,
                text: dir,
            })), onItemClick: (dir) => setTabNavigation(dir) }),
        React.createElement(FocusZone, { tabKeyNavigation: tabNavigation },
            React.createElement(Checkboxes, null))));
};
const TinyBox = () => {
    const ref = React.useRef();
    const onPress = useOnPressWithFocus(ref, null);
    return React.createElement(Pressable, { focusable: true, style: focusZoneTestStyles.smallBoxStyle, ref: ref, onPress: onPress });
};
const WideBox = () => {
    const ref = React.useRef();
    const onPress = useOnPressWithFocus(ref, null);
    return React.createElement(Pressable, { focusable: true, style: focusZoneTestStyles.wideBoxStyle, ref: ref, onPress: onPress });
};
const TinyText = () => {
    return (React.createElement(Text, { selectable: true, style: focusZoneTestStyles.smallBoxStyle }, "Hi"));
};
const WideText = () => {
    return (React.createElement(Text, { selectable: true, style: focusZoneTestStyles.wideBoxStyle }, "Hello world"));
};
const DifferentSizesTest = () => {
    return (React.createElement(FocusZone, { focusZoneDirection: "bidirectional" },
        React.createElement(View, { style: 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(FocusZoneListWrapper, null,
        React.createElement(React.Fragment, null,
            React.createElement(Text, null, "Parent FocusZone, vertical"),
            React.createElement(View, { style: focusZoneTestStyles.nestedFocusZoneStyle },
                React.createElement(FocusZone, { focusZoneDirection: "vertical" },
                    React.createElement(Text, null, "Inner FocusZone 1, horizontal"),
                    React.createElement(FocusZone, { focusZoneDirection: "horizontal" },
                        React.createElement(GridOfButtons, { gridWidth: 3, gridHeight: 1 })),
                    React.createElement(Text, null, "Inner FocusZone 2, horizontal"),
                    React.createElement(FocusZone, { focusZoneDirection: "horizontal" },
                        React.createElement(GridOfButtons, { gridWidth: 3, gridHeight: 1 })),
                    React.createElement(Button, 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(FocusZoneListWrapper, null,
        React.createElement(React.Fragment, null,
            React.createElement(Text, null, "FocusZone Grid"),
            React.createElement(Checkbox, { label: "Circular Navigation", checked: isCircularNavigation, onChange: onCircularNavigationChange }),
            React.createElement(MenuButton, { content: `Tab key navigation: ${tabNavigation}`, menuItems: FocusZoneTabNavigations.map((dir) => ({
                    itemKey: dir,
                    text: dir,
                })), onItemClick: (dir) => setTabNavigation(dir) }),
            React.createElement(FocusZone, { isCircularNavigation: true, tabKeyNavigation: tabNavigation },
                React.createElement(GridOfButtons, { gridWidth: 3, gridHeight: 3 })))));
};
const FocusZoneTextInput = () => {
    return (React.createElement(FocusZoneListWrapper, null,
        React.createElement(React.Fragment, null,
            React.createElement(Text, null, "FocusZone Grid"),
            React.createElement(FocusZone, null,
                React.createElement(TextInput, { multiline: true })))));
};
export 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(FocusZone, { defaultTabbableElement: outerFocusZoneTabbableElement, tabKeyNavigation: "Normal" },
        React.createElement(View, null,
            React.createElement(Button, { onClick: () => setOuterFocusZoneTabbableElement(undefined) }, "clear OuterFocusZone"),
            React.createElement(Button, { componentRef: outerNormalRef, onClick: () => setOuterFocusZoneTabbableElement(outerNormalRef) }, "Test ref"),
            React.createElement(Button, { nativeID: outerNativeID, onClick: () => setOuterFocusZoneTabbableElement(outerNativeID) }, "Test nativeId")),
        React.createElement(FocusZone, { componentRef: innerFZRef, defaultTabbableElement: innerFocusZoneTabbableElement },
            React.createElement(Button, { onClick: () => setInnerFocusZoneTabbableElement(undefined) }, "clear InnerFocusZone"),
            React.createElement(Button, { componentRef: innerDirectRef, onClick: () => setOuterFocusZoneTabbableElement(innerDirectRef) }, "Test nested (direct ref)"),
            React.createElement(Button, { nativeID: innerDirectNativeID, onClick: () => setOuterFocusZoneTabbableElement(innerDirectNativeID) }, "Test nested (direct nativeID)"),
            React.createElement(Button, { componentRef: innerNormalRef, onClick: () => setInnerFocusZoneTabbableElement(innerNormalRef) }, "Test inner zone (ref)"),
            React.createElement(Button, { nativeID: innerNativeID, onClick: () => setInnerFocusZoneTabbableElement(innerNativeID) }, "Test inner zone (nativeID)"),
            React.createElement(Button, { onClick: () => setOuterFocusZoneTabbableElement(innerFZRef) }, "Test nested (transitive)"))));
};
const focusZoneSections = [
    {
        name: 'First Focus FocusZone Usage',
        component: FirstFocusTest,
        testID: FOCUSZONE_TESTPAGE,
    },
    {
        name: 'Common FocusZone Usage',
        component: CommonUsageFocusZone,
        testID: 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: FocusZone2D,
    },
];
export const FocusZoneTest = () => {
    const status = {
        win32Status: 'Production',
        uwpStatus: 'Backlog',
        iosStatus: 'Backlog',
        macosStatus: 'Production',
        androidStatus: 'Backlog',
    };
    return (React.createElement(Test, { name: "FocusZone Test", description: 'No description.', sections: focusZoneSections, status: status, e2eSections: e2eSections }));
};
//# sourceMappingURL=FocusZoneTest.js.map