/**
 * Copyright (c) Microsoft Corporation.
 * Licensed under the MIT License.
 * @format
 */
import * as React from 'react';
import { Text, View, Switch, Platform } from 'react-native';
import { Separator } from '@fluentui/react-native';
import { MenuButton } from '@fluentui-react-native/experimental-menu-button';
import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonV1TestStyles';
import { menuItems, iconProps } from './testData';
import { testImage } from '../Common/iconExamples';
export const StandardMenuButton = () => {
    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 contextualMenuProps = {
        accessibilityLabel: 'MenuButton',
        shouldFocusOnMount: focusOnMount,
        shouldFocusOnContainer: focusOnContainer,
    };
    const iconToShow = Platform.select({
        macos: testImage,
        default: iconProps,
    });
    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(View, { style: { ...rowStyle, paddingHorizontal: 5 } },
                    React.createElement(View, { style: columnStyle },
                        React.createElement(MenuButton, { content: "Standard MenuButton", tooltip: "Standard MenuButton tooltip", menuItems: menuItems, onItemClick: onItemClick, contextualMenu: contextualMenuProps }),
                        React.createElement(Text, null, "MenuButton with icon"),
                        React.createElement(MenuButton, { icon: iconToShow, content: "MenuButton", menuItems: menuItems, onItemClick: onItemClick, contextualMenu: contextualMenuProps }),
                        React.createElement(Text, null, "MenuButton with only icon"),
                        React.createElement(MenuButton, { icon: iconToShow, menuItems: menuItems, onItemClick: onItemClick, contextualMenu: contextualMenuProps }),
                        React.createElement(Text, null, "Disabled MenuButton"),
                        React.createElement(MenuButton, { disabled: true, content: "Disabled MenuButton", menuItems: menuItems })),
                    React.createElement(Separator, { vertical: true }),
                    React.createElement(View, { style: columnStyle },
                        React.createElement(MenuButton, { appearance: "primary", content: "Primary MenuButton", menuItems: menuItems, onItemClick: onItemClick, contextualMenu: contextualMenuProps }),
                        React.createElement(Text, null, "Primary MenuButton with icon"),
                        React.createElement(MenuButton, { appearance: "primary", icon: iconToShow, content: "Primary MenuButton", menuItems: menuItems, onItemClick: onItemClick, contextualMenu: contextualMenuProps }),
                        React.createElement(Text, null, "Primary MenuButton with only icon"),
                        React.createElement(MenuButton, { appearance: "primary", icon: iconToShow, menuItems: menuItems, onItemClick: onItemClick, contextualMenu: contextualMenuProps }),
                        React.createElement(Text, null, "Primary Disabled MenuButton"),
                        React.createElement(MenuButton, { appearance: "primary", disabled: true, content: "Disabled Primary MenuButton", menuItems: menuItems })))))));
};
//# sourceMappingURL=StandardMenuButtonTest.js.map