/* eslint-disable @typescript-eslint/no-var-requires */
import * as React from 'react';
import { Text, View, Switch } from 'react-native';
import { Text as FURNText, ButtonV1 as Button, ContextualMenu, ContextualMenuItem, Submenu, SubmenuItem, Separator, Checkbox, } from '@fluentui/react-native';
import { E2EContextualMenuTest } from './E2EContextualMenuTest';
import { CONTEXTUALMENU_TESTPAGE } from '../../../../E2E/src/ContextualMenu/consts';
import { svgProps, fontProps, testImage } from '../Common/iconExamples';
import { Test } from '../Test';
var ContextualMenuMainTest = function () {
    var stdBtnRef = React.useRef(null);
    var _a = React.useState(false), showContextualMenu = _a[0], setShowContextualMenu = _a[1];
    var _b = React.useState(false), isContextualMenuVisible = _b[0], setIsContextualMenuVisible = _b[1];
    var _c = React.useState(null), lastMenuItemClicked = _c[0], setLastMenuItemClicked = _c[1];
    var _d = React.useState(false), isBeakVisible = _d[0], setIsBeakVisible = _d[1];
    var onIsBeakVisibleChange = React.useCallback(function (value) { return setIsBeakVisible(value); }, []);
    var _e = React.useState(true), focusOnMount = _e[0], setShouldFocusOnMount = _e[1];
    var toggleFocusOnMount = React.useCallback(function (value) { return setShouldFocusOnMount(value); }, [setShouldFocusOnMount]);
    var _f = React.useState(false), focusOnContainer = _f[0], setShouldFocusOnContainer = _f[1];
    var toggleFocusOnContainer = React.useCallback(function (value) { return setShouldFocusOnContainer(value); }, [setShouldFocusOnContainer]);
    var toggleShowContextualMenu = React.useCallback(function () {
        setShowContextualMenu(!showContextualMenu);
        setIsContextualMenuVisible(false);
    }, [showContextualMenu, setShowContextualMenu, setIsContextualMenuVisible]);
    var onShowContextualMenu = React.useCallback(function () {
        setIsContextualMenuVisible(true);
    }, [setIsContextualMenuVisible]);
    var onDismissContextualMenu = React.useCallback(function () {
        setShowContextualMenu(false);
        setIsContextualMenuVisible(false);
    }, [setShowContextualMenu]);
    var onItemClick = React.useCallback(function (key) {
        setLastMenuItemClicked(key);
    }, [setLastMenuItemClicked]);
    return (React.createElement(View, null,
        React.createElement(View, { style: { flexDirection: 'row', paddingVertical: 5 } },
            React.createElement(View, { style: { flexDirection: 'column', paddingHorizontal: 5 } },
                React.createElement(View, { style: { flexDirection: 'row' } },
                    React.createElement(Text, null, "Should Focus on Mount"),
                    React.createElement(Switch, { value: focusOnMount, onValueChange: toggleFocusOnMount })),
                React.createElement(View, { style: { flexDirection: 'row' } },
                    React.createElement(Text, null, "Should Focus on Container"),
                    React.createElement(Switch, { value: focusOnContainer, onValueChange: toggleFocusOnContainer })),
                React.createElement(View, { style: { flexDirection: 'row' } },
                    React.createElement(Text, null, "Beak Visible"),
                    React.createElement(Switch, { value: isBeakVisible, onValueChange: onIsBeakVisibleChange }))),
            React.createElement(Separator, { vertical: true }),
            React.createElement(View, { style: { flexDirection: 'column', paddingHorizontal: 5 } },
                React.createElement(Text, null,
                    React.createElement(Text, null, "Menu Visibility: "),
                    isContextualMenuVisible ? React.createElement(Text, { style: { color: 'green' } }, "Visible") : React.createElement(Text, { style: { color: 'red' } }, "Not Visible")),
                React.createElement(Text, null,
                    React.createElement(Text, null, "Last Menu Item Clicked: "),
                    lastMenuItemClicked > 0 ? (React.createElement(Text, { style: { color: 'blue' } }, lastMenuItemClicked)) : (React.createElement(Text, { style: { color: 'blue' } }, "none"))),
                React.createElement(Button, { onClick: toggleShowContextualMenu, componentRef: stdBtnRef }, "Press for ContextualMenu"))),
        showContextualMenu && (React.createElement(ContextualMenu, { target: stdBtnRef, onDismiss: onDismissContextualMenu, onShow: onShowContextualMenu, accessibilityLabel: "Standard ContextualMenu", onItemClick: onItemClick, setShowMenu: toggleShowContextualMenu, shouldFocusOnMount: focusOnMount, shouldFocusOnContainer: focusOnContainer, isBeakVisible: isBeakVisible },
            React.createElement(ContextualMenuItem, { text: "MenuItem 1", itemKey: "1" }),
            React.createElement(ContextualMenuItem, { text: "MenuItem 2", itemKey: "2" }),
            React.createElement(ContextualMenuItem, { text: "Disabled Menu Item", itemKey: "3", disabled: true }),
            React.createElement(ContextualMenuItem, { text: "MenuItem 4", itemKey: "4" }),
            React.createElement(ContextualMenuItem, { text: "MenuItem 5", itemKey: "5" })))));
};
var NestedContextualMenu = function () {
    var stdBtnRef = React.useRef(null);
    var _a = React.useState(false), showContextualMenu = _a[0], setShowContextualMenu = _a[1];
    var _b = React.useState(false), isContextualMenuVisible = _b[0], setIsContextualMenuVisible = _b[1];
    var _c = React.useState(true), focusOnMount = _c[0], setShouldFocusOnMount = _c[1];
    var toggleFocusOnMount = React.useCallback(function (value) { return setShouldFocusOnMount(value); }, [setShouldFocusOnMount]);
    var _d = React.useState(false), focusOnContainer = _d[0], setShouldFocusOnContainer = _d[1];
    var toggleFocusOnContainer = React.useCallback(function (value) { return setShouldFocusOnContainer(value); }, [setShouldFocusOnContainer]);
    var toggleShowContextualMenu = React.useCallback(function () {
        setShowContextualMenu(!showContextualMenu);
        setIsContextualMenuVisible(!isContextualMenuVisible);
    }, [showContextualMenu, isContextualMenuVisible, setShowContextualMenu, setIsContextualMenuVisible]);
    var onShowContextualMenu = React.useCallback(function () {
        setIsContextualMenuVisible(true);
    }, [setIsContextualMenuVisible]);
    var onDismissContextualMenu = React.useCallback(function () {
        setShowContextualMenu(false);
        setIsContextualMenuVisible(false);
    }, [setShowContextualMenu]);
    var stdMenuItemRef = React.useRef(null);
    var _e = React.useState(false), showSubmenu = _e[0], setShowSubmenu = _e[1];
    var _f = React.useState(false), isSubmenuVisible = _f[0], setIsSubmenuVisible = _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 onClick = React.useCallback(function () {
        console.log('submenu item clicked');
    }, []);
    return (React.createElement(View, null,
        React.createElement(View, { style: { flexDirection: 'row', paddingVertical: 5 } },
            React.createElement(View, { style: { flexDirection: 'column', paddingHorizontal: 5 } },
                React.createElement(View, { style: { flexDirection: 'row' } },
                    React.createElement(Text, null, "Should Focus on Mount"),
                    React.createElement(Switch, { value: focusOnMount, onValueChange: toggleFocusOnMount })),
                React.createElement(View, { style: { flexDirection: 'row' } },
                    React.createElement(Text, null, "Should Focus on Container"),
                    React.createElement(Switch, { value: focusOnContainer, onValueChange: toggleFocusOnContainer }))),
            React.createElement(Separator, { vertical: true }),
            React.createElement(View, { style: { flexDirection: 'column', paddingHorizontal: 5 } },
                React.createElement(Text, null,
                    React.createElement(Text, null, "Menu Visibility: "),
                    isContextualMenuVisible ? React.createElement(Text, { style: { color: 'green' } }, "Visible") : React.createElement(Text, { style: { color: 'red' } }, "Not Visible")),
                React.createElement(Text, null,
                    React.createElement(Text, null, "Submenu Visibility: "),
                    isSubmenuVisible ? React.createElement(Text, { style: { color: 'green' } }, "Visible") : React.createElement(Text, { style: { color: 'red' } }, "Not Visible")),
                React.createElement(Button, { onClick: toggleShowContextualMenu, componentRef: stdBtnRef }, "Press for ContextualMenu"))),
        showContextualMenu && (React.createElement(ContextualMenu, { target: stdBtnRef, onDismiss: onDismissContextualMenu, onShow: onShowContextualMenu, accessibilityLabel: "Standard ContextualMenu", setShowMenu: toggleShowContextualMenu, shouldFocusOnMount: focusOnMount, shouldFocusOnContainer: focusOnContainer },
            React.createElement(ContextualMenuItem, { icon: testImage, text: "Menu item with png Icon", itemKey: "1" }),
            React.createElement(ContextualMenuItem, { icon: { fontSource: fontProps, color: 'blue' }, text: "Menu item with font icon", itemKey: "2" }),
            React.createElement(ContextualMenuItem, { text: "Disabled Menu Item", itemKey: "3", disabled: true }),
            React.createElement(SubmenuItem, { icon: { svgSource: svgProps, width: 12, height: 12 }, text: "Nested Menu", itemKey: "4", onHoverIn: toggleShowSubmenu, componentRef: stdMenuItemRef }),
            showSubmenu && (React.createElement(Submenu, { target: stdMenuItemRef, onDismiss: onDismissSubmenu, onShow: onShowSubmenu, setShowMenu: toggleShowSubmenu },
                React.createElement(ContextualMenuItem, { icon: { svgSource: svgProps, width: 12, height: 12 }, text: "SubmenuItem svg icon", itemKey: "4", onClick: onClick }),
                React.createElement(ContextualMenuItem, { text: "SubmenuItem 2", itemKey: "2" }),
                React.createElement(ContextualMenuItem, { text: "Disabled Menu Item", itemKey: "3", disabled: true }))),
            React.createElement(ContextualMenuItem, { text: "Menuitem 5", itemKey: "5" })))));
};
// custom text
var IndigoHeroBold = FURNText.customize({ tokens: { variant: 'heroStandard', fontWeight: '100', color: '#4b0082' } });
var IconContextualMenu = function () {
    var stdBtnRef = React.useRef(null);
    var _a = React.useState(false), showContextualMenu = _a[0], setShowContextualMenu = _a[1];
    var _b = React.useState(false), isContextualMenuVisible = _b[0], setIsContextualMenuVisible = _b[1];
    var _c = React.useState(true), focusOnMount = _c[0], setShouldFocusOnMount = _c[1];
    var toggleFocusOnMount = React.useCallback(function (value) { return setShouldFocusOnMount(value); }, [setShouldFocusOnMount]);
    var _d = React.useState(false), focusOnContainer = _d[0], setShouldFocusOnContainer = _d[1];
    var toggleFocusOnContainer = React.useCallback(function (value) { return setShouldFocusOnContainer(value); }, [setShouldFocusOnContainer]);
    var toggleShowContextualMenu = React.useCallback(function () {
        setShowContextualMenu(!showContextualMenu);
        setIsContextualMenuVisible(!isContextualMenuVisible);
    }, [showContextualMenu, isContextualMenuVisible, setShowContextualMenu, setIsContextualMenuVisible]);
    var onShowContextualMenu = React.useCallback(function () {
        setIsContextualMenuVisible(true);
    }, [setIsContextualMenuVisible]);
    var onDismissContextualMenu = React.useCallback(function () {
        setShowContextualMenu(false);
        setIsContextualMenuVisible(false);
    }, [setShowContextualMenu]);
    return (React.createElement(View, null,
        React.createElement(View, { style: { flexDirection: 'row', paddingVertical: 5 } },
            React.createElement(View, { style: { flexDirection: 'column', paddingHorizontal: 5 } },
                React.createElement(View, { style: { flexDirection: 'row' } },
                    React.createElement(Text, null, "Should Focus on Mount"),
                    React.createElement(Switch, { value: focusOnMount, onValueChange: toggleFocusOnMount })),
                React.createElement(View, { style: { flexDirection: 'row' } },
                    React.createElement(Text, null, "Should Focus on Container"),
                    React.createElement(Switch, { value: focusOnContainer, onValueChange: toggleFocusOnContainer }))),
            React.createElement(Separator, { vertical: true }),
            React.createElement(View, { style: { flexDirection: 'column', paddingHorizontal: 5 } },
                React.createElement(Text, null,
                    React.createElement(Text, null, "Menu Visibility: "),
                    isContextualMenuVisible ? React.createElement(Text, { style: { color: 'green' } }, "Visible") : React.createElement(Text, { style: { color: 'red' } }, "Not Visible")),
                React.createElement(Button, { componentRef: stdBtnRef, style: { borderWidth: 0 }, icon: { svgSource: svgProps, width: 12, height: 12 }, onClick: toggleShowContextualMenu }))),
        showContextualMenu && (React.createElement(ContextualMenu, { target: stdBtnRef, onDismiss: onDismissContextualMenu, onShow: onShowContextualMenu, accessibilityLabel: "Standard ContextualMenu", setShowMenu: toggleShowContextualMenu, shouldFocusOnMount: focusOnMount, shouldFocusOnContainer: focusOnContainer },
            React.createElement(ContextualMenuItem, { itemKey: "1" },
                React.createElement(Checkbox, { label: "Unchecked checkbox" })),
            React.createElement(ContextualMenuItem, { itemKey: "2" },
                React.createElement(IndigoHeroBold, null, "IndigoHeroBold text with checkbox")),
            React.createElement(ContextualMenuItem, { text: "Disabled Menu Item", itemKey: "3", disabled: true }),
            React.createElement(ContextualMenuItem, { text: "Menuitem 4", itemKey: "4" })))));
};
var ScrollViewContextualMenu = function () {
    var stdBtnRef = React.useRef(null);
    var _a = React.useState(false), showContextualMenu = _a[0], setShowContextualMenu = _a[1];
    var _b = React.useState(false), isContextualMenuVisible = _b[0], setIsContextualMenuVisible = _b[1];
    var _c = React.useState(null), lastMenuItemClicked = _c[0], setLastMenuItemClicked = _c[1];
    var _d = React.useState(false), isBeakVisible = _d[0], setIsBeakVisible = _d[1];
    var onIsBeakVisibleChange = React.useCallback(function (value) { return setIsBeakVisible(value); }, []);
    var _e = React.useState(true), focusOnMount = _e[0], setShouldFocusOnMount = _e[1];
    var toggleFocusOnMount = React.useCallback(function (value) { return setShouldFocusOnMount(value); }, [setShouldFocusOnMount]);
    var _f = React.useState(false), focusOnContainer = _f[0], setShouldFocusOnContainer = _f[1];
    var toggleFocusOnContainer = React.useCallback(function (value) { return setShouldFocusOnContainer(value); }, [setShouldFocusOnContainer]);
    var toggleShowContextualMenu = React.useCallback(function () {
        setShowContextualMenu(!showContextualMenu);
        setIsContextualMenuVisible(false);
    }, [showContextualMenu, setShowContextualMenu, setIsContextualMenuVisible]);
    var onShowContextualMenu = React.useCallback(function () {
        setIsContextualMenuVisible(true);
    }, [setIsContextualMenuVisible]);
    var onDismissContextualMenu = React.useCallback(function () {
        setShowContextualMenu(false);
        setIsContextualMenuVisible(false);
    }, [setShowContextualMenu]);
    var onItemClick = React.useCallback(function (key) {
        setLastMenuItemClicked(key);
    }, [setLastMenuItemClicked]);
    var stdMenuItemRef = React.useRef(null);
    var _g = React.useState(false), showSubmenu = _g[0], setShowSubmenu = _g[1];
    var _h = React.useState(false), isSubmenuVisible = _h[0], setIsSubmenuVisible = _h[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 onClick = React.useCallback(function () {
        console.log('submenu item clicked');
    }, []);
    return (React.createElement(View, null,
        React.createElement(View, { style: { flexDirection: 'row', paddingVertical: 5 } },
            React.createElement(View, { style: { flexDirection: 'column', paddingHorizontal: 5 } },
                React.createElement(View, { style: { flexDirection: 'row' } },
                    React.createElement(Text, null, "Should Focus on Mount"),
                    React.createElement(Switch, { value: focusOnMount, onValueChange: toggleFocusOnMount })),
                React.createElement(View, { style: { flexDirection: 'row' } },
                    React.createElement(Text, null, "Should Focus on Container"),
                    React.createElement(Switch, { value: focusOnContainer, onValueChange: toggleFocusOnContainer })),
                React.createElement(View, { style: { flexDirection: 'row' } },
                    React.createElement(Text, null, "Beak Visible"),
                    React.createElement(Switch, { value: isBeakVisible, onValueChange: onIsBeakVisibleChange }))),
            React.createElement(Separator, { vertical: true }),
            React.createElement(View, { style: { flexDirection: 'column', paddingHorizontal: 5 } },
                React.createElement(Text, null,
                    React.createElement(Text, null, "Menu Visibility: "),
                    isContextualMenuVisible ? React.createElement(Text, { style: { color: 'green' } }, "Visible") : React.createElement(Text, { style: { color: 'red' } }, "Not Visible")),
                React.createElement(Text, null,
                    React.createElement(Text, null, "Last Menu Item Clicked: "),
                    lastMenuItemClicked > 0 ? (React.createElement(Text, { style: { color: 'blue' } }, lastMenuItemClicked)) : (React.createElement(Text, { style: { color: 'blue' } }, "none"))),
                React.createElement(Text, null,
                    React.createElement(Text, null, "Menu and Submenu max height set to 200")),
                React.createElement(Button, { onClick: toggleShowContextualMenu, componentRef: stdBtnRef }, "Press for ContextualMenu"))),
        showContextualMenu && (React.createElement(ContextualMenu, { target: stdBtnRef, onDismiss: onDismissContextualMenu, onShow: onShowContextualMenu, accessibilityLabel: "Standard ContextualMenu", onItemClick: onItemClick, setShowMenu: toggleShowContextualMenu, shouldFocusOnMount: focusOnMount, shouldFocusOnContainer: focusOnContainer, isBeakVisible: isBeakVisible, maxHeight: 200 },
            React.createElement(ContextualMenuItem, { text: "MenuItem 1", itemKey: "1" }),
            React.createElement(ContextualMenuItem, { text: "MenuItem 2", itemKey: "2" }),
            React.createElement(SubmenuItem, { icon: { svgSource: svgProps, width: 12, height: 12 }, text: "Nested Menu", itemKey: "3", onHoverIn: toggleShowSubmenu, componentRef: stdMenuItemRef }),
            showSubmenu && (React.createElement(Submenu, { maxHeight: 200, target: stdMenuItemRef, onDismiss: onDismissSubmenu, onShow: onShowSubmenu, setShowMenu: toggleShowSubmenu },
                React.createElement(ContextualMenuItem, { text: "MenuItem 4", itemKey: "4" }),
                React.createElement(ContextualMenuItem, { text: "MenuItem 5", itemKey: "5" }),
                React.createElement(ContextualMenuItem, { text: "MenuItem 6", itemKey: "6" }),
                React.createElement(ContextualMenuItem, { text: "MenuItem 7", itemKey: "7" }),
                React.createElement(ContextualMenuItem, { icon: { svgSource: svgProps, width: 12, height: 12 }, text: "SubmenuItem svg icon", itemKey: "8", onClick: onClick }),
                React.createElement(ContextualMenuItem, { text: "SubmenuItem 2", itemKey: "9" }),
                React.createElement(ContextualMenuItem, { text: "Disabled Menu Item", itemKey: "10", disabled: true }))),
            React.createElement(ContextualMenuItem, { text: "Disabled Menu Item", itemKey: "11", disabled: true }),
            React.createElement(ContextualMenuItem, { text: "MenuItem 4", itemKey: "12" }),
            React.createElement(ContextualMenuItem, { text: "MenuItem 5", itemKey: "13" }),
            React.createElement(ContextualMenuItem, { text: "MenuItem 6", itemKey: "14" }),
            React.createElement(ContextualMenuItem, { text: "MenuItem 7", itemKey: "15" }),
            React.createElement(ContextualMenuItem, { text: "MenuItem 8", itemKey: "16" }),
            React.createElement(ContextualMenuItem, { text: "MenuItem 9", itemKey: "17" }),
            React.createElement(ContextualMenuItem, { text: "MenuItem 10", itemKey: "18" }),
            React.createElement(ContextualMenuItem, { text: "MenuItem 11", itemKey: "19" }),
            React.createElement(ContextualMenuItem, { text: "MenuItem 12", itemKey: "20" })))));
};
var contextualMenuSections = [
    {
        name: 'Standard ContextualMenu',
        testID: CONTEXTUALMENU_TESTPAGE,
        component: ContextualMenuMainTest,
    },
    {
        name: 'Nested ContextualMenu',
        component: NestedContextualMenu,
    },
    {
        name: 'IconButton with Customized ContextualMenu',
        component: IconContextualMenu,
    },
    {
        name: 'ContextalMenu with ScrollView',
        component: ScrollViewContextualMenu,
    },
];
var e2eSections = [
    {
        name: 'ContextualMenu E2E Test',
        component: E2EContextualMenuTest,
    },
];
export var ContextualMenuTest = function () {
    var status = {
        win32Status: 'Deprecated',
        uwpStatus: 'Backlog',
        iosStatus: 'Backlog',
        macosStatus: 'Beta',
        androidStatus: 'Backlog',
    };
    var description = 'ContextualMenus are lists of commands that are based on the context of selection, mouse hover or keyboard focus. They are one of the most effective and highly used command surfaces, and can be used in a variety of places.\n\nThere are variants that originate from a command bar, or from cursor or focus. Those that come from CommandBars use a beak that is horizontally centered on the button. Ones that come from right click and menu button do not have a beak, but appear to the right and below the cursor. ContextualMenus can have submenus from commands, show selection checks, and icons.\n\nOrganize commands in groups divided by rules. This helps users remember command locations, or find less used commands based on proximity to others. One should also group sets of mutually exclusive or multiple selectable options. Use icons sparingly, for high value commands, and don’t mix icons with selection checks, as it makes parsing commands difficult. Avoid submenus of submenus as they can be difficult to invoke or remember.';
    return (React.createElement(Test, { name: "ContextualMenu Test", description: description, sections: contextualMenuSections, status: status, e2eSections: e2eSections }));
};
//# sourceMappingURL=ContextualMenuTest.js.map