"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NestedMenuButton = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var react_native_2 = require("@fluentui/react-native");
var MenuButtonLegacyTestStyles_1 = require("./MenuButtonLegacyTestStyles");
var testData_1 = require("./testData");
var iconExamples_1 = require("../Common/iconExamples");
var NestedMenuButton = function () {
    var _a = React.useState(null), lastMenuItemClicked = _a[0], setLastMenuItemClicked = _a[1];
    var _b = React.useState(true), focusOnMount = _b[0], setShouldFocusOnMount = _b[1];
    var toggleFocusOnMount = React.useCallback(function (value) { return setShouldFocusOnMount(value); }, [setShouldFocusOnMount]);
    var _c = React.useState(false), focusOnContainer = _c[0], setShouldFocusOnContainer = _c[1];
    var toggleFocusOnContainer = React.useCallback(function (value) { return setShouldFocusOnContainer(value); }, [setShouldFocusOnContainer]);
    var onItemClick = React.useCallback(function (key) {
        setLastMenuItemClicked(key);
    }, [setLastMenuItemClicked]);
    var _d = React.useState(false), showSubmenu = _d[0], setShowSubmenu = _d[1];
    var _e = React.useState(false), isSubmenuVisible = _e[0], setIsSubmenuVisible = _e[1];
    var _f = React.useState(null), lastSubmenuItemClicked = _f[0], setSubmenuLastItemClicked = _f[1];
    var toggleShowSubmenu = React.useCallback(function () {
        setShowSubmenu(!showSubmenu);
        setIsSubmenuVisible(!isSubmenuVisible);
    }, [showSubmenu, isSubmenuVisible, setShowSubmenu, setIsSubmenuVisible]);
    var onShowSubmenu = React.useCallback(function () {
        setIsSubmenuVisible(true);
    }, [setIsSubmenuVisible]);
    var onDismissSubmenu = React.useCallback(function () {
        setShowSubmenu(false);
    }, [setShowSubmenu]);
    var onSubmenuItemClick = React.useCallback(function (key) {
        setSubmenuLastItemClicked(key);
    }, [setSubmenuLastItemClicked]);
    var nestedMenuItems = tslib_1.__spreadArray(tslib_1.__spreadArray([], testData_1.menuItems, true), [
        {
            hasSubmenu: true,
            itemKey: '4',
            text: 'SubmenuItem svg icon',
            componentRef: React.useRef(null),
            icon: testData_1.iconProps,
            onHoverIn: toggleShowSubmenu,
            showSubmenu: showSubmenu,
            submenuProps: {
                onShow: onShowSubmenu,
                setShowMenu: toggleShowSubmenu,
                onDismiss: onDismissSubmenu,
                onItemClick: onSubmenuItemClick,
            },
            submenuItems: [
                {
                    icon: testData_1.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',
                },
            ],
        },
    ], false);
    var rasterImageProps = {
        rasterImageSource: {
            src: iconExamples_1.testImage,
        },
        width: 12,
        height: 12,
    };
    return (React.createElement(react_native_1.View, null,
        React.createElement(react_native_1.View, { style: MenuButtonLegacyTestStyles_1.viewWrapperStyle },
            React.createElement(react_native_1.View, { style: MenuButtonLegacyTestStyles_1.columnStyle },
                React.createElement(react_native_1.View, { style: MenuButtonLegacyTestStyles_1.rowStyle },
                    React.createElement(react_native_1.Text, null, "Should Focus on Mount"),
                    React.createElement(react_native_1.Switch, { value: focusOnMount, onValueChange: toggleFocusOnMount })),
                React.createElement(react_native_1.View, { style: MenuButtonLegacyTestStyles_1.rowStyle },
                    React.createElement(react_native_1.Text, null, "Should Focus on Container"),
                    React.createElement(react_native_1.Switch, { value: focusOnContainer, onValueChange: toggleFocusOnContainer }))),
            React.createElement(react_native_2.Separator, { vertical: true }),
            React.createElement(react_native_1.View, { style: MenuButtonLegacyTestStyles_1.columnStyle },
                React.createElement(react_native_1.Text, null,
                    React.createElement(react_native_1.Text, null, "Last Menu Item Clicked: "),
                    lastMenuItemClicked > 0 ? React.createElement(react_native_1.Text, { style: MenuButtonLegacyTestStyles_1.textColor }, lastMenuItemClicked) : React.createElement(react_native_1.Text, { style: MenuButtonLegacyTestStyles_1.textColor }, "none")),
                React.createElement(react_native_1.Text, null,
                    React.createElement(react_native_1.Text, null, "Last Submenu Item Clicked: "),
                    lastSubmenuItemClicked > 0 ? React.createElement(react_native_1.Text, { style: MenuButtonLegacyTestStyles_1.textColor }, lastSubmenuItemClicked) : React.createElement(react_native_1.Text, { style: MenuButtonLegacyTestStyles_1.textColor }, "none")),
                React.createElement(react_native_2.MenuButton, { startIcon: rasterImageProps, content: "Press for Nested MenuButton", menuItems: nestedMenuItems, onItemClick: onItemClick })))));
};
exports.NestedMenuButton = NestedMenuButton;
//# sourceMappingURL=NestedMenuButtonTest.js.map