import { __assign } from "tslib";
import * as React from 'react';
import { View, ScrollView, Pressable } from 'react-native';
import { FocusZone, MenuButton, Text, useOnPressWithFocus } from '@fluentui/react-native';
import { ButtonV1 as Button } from '@fluentui-react-native/button';
import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
import { FocusZone2D, FocusZoneDirections, FocusZoneListWrapper, FocusZoneTabNavigations, GridOfButtons } from './FocusZoneE2ETest';
import { focusZoneTestStyles, SubheaderText } from './styles';
import { FOCUSZONE_TESTPAGE } from '../../../../E2E/src/FocusZone/consts';
import { MenuPicker } from '../Common/MenuPicker';
import { Test } from '../Test';
var directionCollection = FocusZoneDirections.map(function (dir) { return ({ label: dir, value: dir }); });
var Checkboxes = function (props) {
    return (React.createElement(View, { style: focusZoneTestStyles.dashedBorder },
        React.createElement(Checkbox, __assign({ label: "Option A" }, props)),
        React.createElement(Checkbox, __assign({ label: "Option B" }, props)),
        React.createElement(Checkbox, __assign({ label: "Option C" }, props))));
};
var DirectionalFocusZone = function () {
    var _a = React.useState('none'), direction = _a[0], setDirection = _a[1];
    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))));
};
var CommonUsageFocusZone = function () {
    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))));
};
var FocusZoneInsideScrollView = function () {
    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"))))));
};
var FocusZoneNoFocusableElements = function () {
    return (React.createElement(FocusZone, null,
        React.createElement(Checkboxes, { disabled: true })));
};
var FocusZoneNoProps = function () {
    return (React.createElement(FocusZone, null,
        React.createElement(Checkboxes, null)));
};
var FocusZoneTabNavigationComponent = function () {
    var _a = React.useState('None'), tabNavigation = _a[0], setTabNavigation = _a[1];
    return (React.createElement(View, null,
        React.createElement(Text, null, "FocusZone Tab Navigation"),
        React.createElement(MenuButton, { content: "Current tab key navigation: ".concat(tabNavigation), menuItems: FocusZoneTabNavigations.map(function (dir) { return ({
                itemKey: dir,
                text: dir,
            }); }), onItemClick: function (dir) { return setTabNavigation(dir); } }),
        React.createElement(FocusZone, { tabKeyNavigation: tabNavigation },
            React.createElement(Checkboxes, null))));
};
var TinyBox = function () {
    var ref = React.useRef();
    var onPress = useOnPressWithFocus(ref, null);
    return React.createElement(Pressable, { focusable: true, style: focusZoneTestStyles.smallBoxStyle, ref: ref, onPress: onPress });
};
var WideBox = function () {
    var ref = React.useRef();
    var onPress = useOnPressWithFocus(ref, null);
    return React.createElement(Pressable, { focusable: true, style: focusZoneTestStyles.wideBoxStyle, ref: ref, onPress: onPress });
};
var TinyText = function () {
    return (React.createElement(Text, { selectable: true, style: focusZoneTestStyles.smallBoxStyle }, "Hi"));
};
var WideText = function () {
    return (React.createElement(Text, { selectable: true, style: focusZoneTestStyles.wideBoxStyle }, "Hello world"));
};
var DifferentSizesTest = function () {
    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))));
};
var NestedFocusZone = function () {
    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"))))));
};
var focusZoneSections = [
    {
        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,
    },
];
var e2eSections = [
    {
        name: '2D Navigation + E2E Testing',
        component: FocusZone2D,
    },
];
export var FocusZoneTest = function () {
    var 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