import * as React from 'react';
import { Text, View, Switch } from 'react-native';
import { Separator, MenuButton } from '@fluentui/react-native';
import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonLegacyTestStyles';
import { menuItems, iconProps } from './testData';
import { testImage } from '../Common/iconExamples';
export const NestedMenuButton = () => {
    const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);
    const [focusOnMount, setShouldFocusOnMount] = React.useState(true);
    const toggleFocusOnMount = React.useCallback((value) => setShouldFocusOnMount(value), [setShouldFocusOnMount]);
    const [focusOnContainer, setShouldFocusOnContainer] = React.useState(false);
    const toggleFocusOnContainer = React.useCallback((value) => setShouldFocusOnContainer(value), [setShouldFocusOnContainer]);
    const onItemClick = React.useCallback((key) => {
        setLastMenuItemClicked(key);
    }, [setLastMenuItemClicked]);
    const [showSubmenu, setShowSubmenu] = React.useState(false);
    const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
    const [lastSubmenuItemClicked, setSubmenuLastItemClicked] = React.useState(null);
    const toggleShowSubmenu = React.useCallback(() => {
        setShowSubmenu(!showSubmenu);
        setIsSubmenuVisible(!isSubmenuVisible);
    }, [showSubmenu, isSubmenuVisible, setShowSubmenu, setIsSubmenuVisible]);
    const onShowSubmenu = React.useCallback(() => {
        setIsSubmenuVisible(true);
    }, [setIsSubmenuVisible]);
    const onDismissSubmenu = React.useCallback(() => {
        setShowSubmenu(false);
    }, [setShowSubmenu]);
    const onSubmenuItemClick = React.useCallback((key) => {
        setSubmenuLastItemClicked(key);
    }, [setSubmenuLastItemClicked]);
    const nestedMenuItems = [
        ...menuItems,
        {
            hasSubmenu: true,
            itemKey: '4',
            text: 'SubmenuItem svg icon',
            componentRef: React.useRef(null),
            icon: iconProps,
            onHoverIn: toggleShowSubmenu,
            showSubmenu,
            submenuProps: {
                onShow: onShowSubmenu,
                setShowMenu: toggleShowSubmenu,
                onDismiss: onDismissSubmenu,
                onItemClick: onSubmenuItemClick,
            },
            submenuItems: [
                {
                    icon: iconProps,
                    text: 'SubmenuItem svg icon',
                    itemKey: '1',
                },
                {
                    itemKey: '2',
                    text: 'SubmenuItem 2',
                    disabled: true,
                },
                {
                    itemKey: '3',
                    text: 'SubmenuItem 3',
                },
            ],
        },
        {
            itemKey: '5',
            text: 'Menu Item',
        },
        {
            hasSubmenu: true,
            itemKey: '6',
            text: 'SubmenuItem',
            componentRef: React.useRef(null),
            submenuProps: {
                onItemClick: onSubmenuItemClick,
            },
            submenuItems: [
                {
                    text: 'SubmenuItem 1',
                    itemKey: '1',
                },
                {
                    itemKey: '2',
                    text: 'SubmenuItem 2',
                },
                {
                    itemKey: '3',
                    text: 'SubmenuItem 3',
                },
            ],
        },
    ];
    const rasterImageProps = {
        rasterImageSource: {
            src: testImage,
        },
        width: 12,
        height: 12,
    };
    return (React.createElement(View, null,
        React.createElement(View, { style: viewWrapperStyle },
            React.createElement(View, { style: columnStyle },
                React.createElement(View, { style: rowStyle },
                    React.createElement(Text, null, "Should Focus on Mount"),
                    React.createElement(Switch, { value: focusOnMount, onValueChange: toggleFocusOnMount })),
                React.createElement(View, { style: rowStyle },
                    React.createElement(Text, null, "Should Focus on Container"),
                    React.createElement(Switch, { value: focusOnContainer, onValueChange: toggleFocusOnContainer }))),
            React.createElement(Separator, { vertical: true }),
            React.createElement(View, { style: columnStyle },
                React.createElement(Text, null,
                    React.createElement(Text, null, "Last Menu Item Clicked: "),
                    lastMenuItemClicked > 0 ? React.createElement(Text, { style: textColor }, lastMenuItemClicked) : React.createElement(Text, { style: textColor }, "none")),
                React.createElement(Text, null,
                    React.createElement(Text, null, "Last Submenu Item Clicked: "),
                    lastSubmenuItemClicked > 0 ? React.createElement(Text, { style: textColor }, lastSubmenuItemClicked) : React.createElement(Text, { style: textColor }, "none")),
                React.createElement(MenuButton, { startIcon: rasterImageProps, content: "Press for Nested MenuButton", menuItems: nestedMenuItems, onItemClick: onItemClick })))));
};
//# sourceMappingURL=NestedMenuButtonTest.js.map