import React from 'react';
import { Platform, StyleSheet, View } from 'react-native';
import { ButtonV1 as Button } from '@fluentui/react-native';
import { MENU_TESTPAGE } from '@fluentui-react-native/e2e-testing';
import { Menu, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuTrigger, MenuPopover, MenuList, MenuDivider, MenuGroup, MenuGroupHeader, } from '@fluentui-react-native/menu';
import { Stack } from '@fluentui-react-native/stack';
import { Switch } from '@fluentui-react-native/switch';
import { TextV1 as Text } from '@fluentui-react-native/text';
import { E2EMenuTest } from './E2EMenuTest';
import { MenuComponentOutsideMenuList } from './MenuComponentOutsideMenuList';
import { MenuIcons } from './MenuIcons';
import { MenuTriggerChildRef } from './MenuRefs';
import { MenuScrollView } from './MenuScrollView';
import { MenuTooltips } from './MenuTooltips';
import { MenuTriggerHoverCallback, MenuTriggerOnClickCallback } from './MenuTriggerCallbacks';
import { stackStyle } from '../Common/styles';
import { Test } from '../Test';
const MenuDefault = () => {
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Menu, null,
            React.createElement(MenuTrigger, null,
                React.createElement(Button, null, "Test")),
            React.createElement(MenuPopover, null,
                React.createElement(MenuList, null,
                    React.createElement(MenuItem, null, "A plain MenuItem"),
                    React.createElement(MenuItem, { disabled: true }, "A disabled MenuItem"),
                    React.createElement(MenuItem, null, "A third plain MenuItem"))))));
};
const defaultCheckedTestCase = ['itemOne'];
const checkedTestCase = ['itemTwo'];
const MenuCheckmarks = () => {
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Menu, { defaultChecked: defaultCheckedTestCase },
            React.createElement(MenuTrigger, null,
                React.createElement(Button, null, "All checkmark items")),
            React.createElement(MenuPopover, null,
                React.createElement(MenuList, null,
                    React.createElement(MenuItemCheckbox, { name: "itemOne" }, "A MenuItem with checkmark"),
                    React.createElement(MenuDivider, null),
                    React.createElement(MenuItemCheckbox, { name: "itemTwo" }, "Another MenuItem with checkmark")))),
        React.createElement(Menu, { hasCheckmarks: true, checked: checkedTestCase },
            React.createElement(MenuTrigger, null,
                React.createElement(Button, null, "Some controlled checkmark items with alignment")),
            React.createElement(MenuPopover, null,
                React.createElement(MenuList, null,
                    React.createElement(MenuItem, null, "A plain MenuItem"),
                    React.createElement(MenuItemCheckbox, { name: "itemTwo" }, "A MenuItem with checkmark"),
                    React.createElement(MenuItemCheckbox, { disabled: true, name: "itemThree" }, "A disabled MenuItem with checkmark"),
                    React.createElement(MenuItemCheckbox, { name: "itemFour" }, "A MenuItem with checkmark")))),
        React.createElement(Menu, null,
            React.createElement(MenuTrigger, null,
                React.createElement(Button, null, "Some checkmark items without alignment")),
            React.createElement(MenuPopover, null,
                React.createElement(MenuList, null,
                    React.createElement(MenuItem, null, "A plain MenuItem"),
                    React.createElement(MenuItemCheckbox, { name: "itemTwo" }, "A MenuItem with checkmark without alignment"),
                    React.createElement(MenuItemCheckbox, { name: "itemThree" }, "A MenuItem with checkmark without alignment"))))));
};
const MenuRadioItem = () => {
    const [checked, setChecked] = React.useState(['itemOne']);
    const onCheckedChange = React.useCallback((_e, checkedChange) => {
        setChecked(checkedChange);
    }, [setChecked]);
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Text, null,
            "Current checked: ",
            checked.join(' ')),
        React.createElement(Menu, { defaultChecked: defaultCheckedTestCase, onCheckedChange: onCheckedChange },
            React.createElement(MenuTrigger, null,
                React.createElement(Button, null, "Items with radio selection")),
            React.createElement(MenuPopover, null,
                React.createElement(MenuList, null,
                    React.createElement(MenuItemRadio, { name: "itemOne" }, "A MenuItem with checkmark and radio selection"),
                    React.createElement(MenuItemRadio, { name: "itemTwo" }, "Another MenuItem with checkmark and radio selection"),
                    React.createElement(MenuItemRadio, { name: "itemThree" }, "A third MenuItem with checkmark and radio selection"),
                    React.createElement(MenuItemCheckbox, { name: "itemFour" }, "A MenuItem with checkmark and toggle selection"))))));
};
const Submenu = (props) => {
    return (React.createElement(Menu, { ...props },
        React.createElement(MenuTrigger, null,
            React.createElement(MenuItem, null, "A second MenuItem trigger")),
        React.createElement(MenuPopover, { minWidth: 230 },
            React.createElement(MenuList, null,
                React.createElement(MenuItemCheckbox, { name: 'a' }, "A nested MenuItemCheckbox"),
                React.createElement(MenuItem, null, "A nested MenuItem"),
                React.createElement(Submenu, null)))));
};
const MenuSubMenu = () => {
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Menu, null,
            React.createElement(MenuTrigger, null,
                React.createElement(Button, null, "Test")),
            React.createElement(MenuPopover, null,
                React.createElement(MenuList, null,
                    React.createElement(MenuItem, null, "A MenuItem"),
                    React.createElement(Submenu, null))))));
};
const SubmenuWithScrollView = (props) => {
    return (React.createElement(Menu, { ...props },
        React.createElement(MenuTrigger, null,
            React.createElement(MenuItem, null, "A second MenuItem trigger")),
        React.createElement(MenuPopover, { maxHeight: 200 },
            React.createElement(MenuList, null,
                React.createElement(MenuItem, null, "A nested MenuItem"),
                React.createElement(MenuItem, null, "A nested MenuItem"),
                React.createElement(MenuItem, null, "A nested MenuItem"),
                React.createElement(MenuItem, null, "A nested MenuItem"),
                React.createElement(MenuItem, null, "A nested MenuItem"),
                React.createElement(MenuItem, null, "A nested MenuItem"),
                React.createElement(MenuItem, null, "A nested MenuItem"),
                React.createElement(MenuItem, null, "A nested MenuItem"),
                React.createElement(MenuItem, null, "A nested MenuItem"),
                React.createElement(MenuItem, null, "A nested MenuItem"),
                React.createElement(MenuItem, null, "A nested MenuItem"),
                React.createElement(MenuItem, null, "A nested MenuItem"),
                React.createElement(MenuItem, null, "A nested MenuItem"),
                React.createElement(MenuItem, null, "A nested MenuItem"),
                React.createElement(MenuItem, null, "A nested MenuItem")))));
};
const MenuSubMenuWithScrollView = () => {
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Menu, null,
            React.createElement(MenuTrigger, null,
                React.createElement(Button, null, "Test")),
            React.createElement(MenuPopover, { doNotTakePointerCapture: true },
                React.createElement(MenuList, null,
                    React.createElement(MenuItem, null, "A MenuItem"),
                    React.createElement(SubmenuWithScrollView, null))))));
};
const MenuOpenOnHover = () => {
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Menu, { openOnHover: true },
            React.createElement(MenuTrigger, null,
                React.createElement(Button, null, "Test")),
            React.createElement(MenuPopover, null,
                React.createElement(MenuList, null,
                    React.createElement(MenuItem, null, "A MenuItem"),
                    React.createElement(Submenu, null))))));
};
const rootStackStyle = StyleSheet.create({ root: { ...stackStyle, flexDirection: 'row' } });
const MenuControlledOpen = () => {
    const [open, setOpen] = React.useState(false);
    const onOpenChange = () => {
        setOpen(false);
    };
    return (React.createElement(Stack, { style: rootStackStyle.root },
        React.createElement(Button, { onClick: () => setOpen(!open) }, "Toggle open"),
        React.createElement(Menu, { ...(Platform.OS === 'android' && { onOpenChange }), open: open },
            React.createElement(MenuTrigger, null,
                React.createElement(Button, null, "Test")),
            React.createElement(MenuPopover, null,
                React.createElement(MenuList, null,
                    React.createElement(MenuItem, null, "A MenuItem"),
                    Platform.OS !== 'android' && React.createElement(Submenu, null))))));
};
const CustomMenuPopover = MenuPopover.customize({ borderWidth: 4, borderColor: 'blue' });
const CustomMenuList = MenuList.customize({ gap: 5, padding: 6, backgroundColor: 'pink' });
const CustomMenuItem = MenuItem.customize({
    gap: 5,
    padding: 8,
    backgroundColor: 'red',
    color: 'white',
    borderRadius: 2,
    checkmarkSize: 10,
    submenuIndicatorPadding: 4,
    submenuIndicatorSize: 10,
    fontSize: 14,
});
const CustomMenuCheckmark = MenuItemCheckbox.customize({
    gap: 5,
    padding: 8,
    backgroundColor: 'red',
    color: 'white',
    borderRadius: 2,
    checkmarkSize: 10,
    fontSize: 14,
    checkmarkColor: 'blue',
});
const CustomMenuDivider = MenuDivider.customize({
    height: 8,
    margin: 4,
    marginVertical: 6,
    width: 100,
    backgroundColor: 'purple',
});
const MenuCustomized = () => {
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Menu, null,
            React.createElement(MenuTrigger, null,
                React.createElement(Button, null, "Test")),
            React.createElement(CustomMenuPopover, { directionalHint: "rightCenter" },
                React.createElement(CustomMenuList, null,
                    React.createElement(CustomMenuItem, null, "A MenuItem"),
                    React.createElement(CustomMenuItem, null, "A MenuItem"),
                    React.createElement(CustomMenuDivider, null),
                    React.createElement(CustomMenuCheckmark, { name: 'custom' }, "A MenuItem"))))));
};
const MenuNofM = () => {
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Menu, null,
            React.createElement(MenuTrigger, null,
                React.createElement(Button, null, "Test")),
            React.createElement(MenuPopover, null,
                React.createElement(MenuList, null,
                    React.createElement(MenuItem, null, "A plain MenuItem"),
                    React.createElement(MenuItem, { disabled: true }, "A disabled MenuItem"),
                    React.createElement(MenuItem, { accessibilityPositionInSet: 9 }, "A plain MenuItem"),
                    React.createElement(MenuDivider, null),
                    Platform.OS !== 'android' && React.createElement(Submenu, { accessibilityPositionInSet: 16, accessibilitySetSize: 7 }),
                    React.createElement(MenuItem, { disabled: true, accessibilitySetSize: 2 }, "A disabled MenuItem"),
                    React.createElement(MenuItem, null, "A plain MenuItem"))))));
};
const CustomMenuTrigger = () => {
    return (React.createElement(View, { style: { backgroundColor: 'purple', width: 80, flexDirection: 'row', justifyContent: 'center' } },
        React.createElement(MenuTrigger, null,
            React.createElement(Button, null, "Test"))));
};
const MenuWithCustomMenuTrigger = (props) => {
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Menu, { ...props },
            React.createElement(CustomMenuTrigger, null),
            React.createElement(MenuPopover, null,
                React.createElement(MenuList, null,
                    React.createElement(MenuItem, null, "A plain MenuItem"),
                    React.createElement(MenuItem, { disabled: true }, "A disabled MenuItem"),
                    React.createElement(MenuItem, { accessibilityPositionInSet: 9 }, "A plain MenuItem"),
                    React.createElement(MenuDivider, null),
                    Platform.OS !== 'android' && React.createElement(Submenu, null),
                    React.createElement(MenuItem, { disabled: true, accessibilitySetSize: 2 }, "A disabled MenuItem"),
                    React.createElement(MenuItem, null, "A plain MenuItem"))))));
};
const MenuWithGroups = () => {
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Menu, null,
            React.createElement(MenuTrigger, null,
                React.createElement(Button, null, "Test")),
            React.createElement(MenuPopover, null,
                React.createElement(MenuList, null,
                    React.createElement(MenuGroup, null,
                        React.createElement(MenuGroupHeader, null, "Section 1"),
                        React.createElement(MenuItem, null, "A plain MenuItem"),
                        React.createElement(MenuItem, null, "A plain MenuItem")),
                    React.createElement(MenuGroup, null,
                        React.createElement(MenuGroupHeader, null, "Section 2"),
                        React.createElement(MenuItem, null, "A plain MenuItem"),
                        React.createElement(MenuItem, null, "A plain MenuItem"),
                        React.createElement(MenuItem, null, "A plain MenuItem")),
                    React.createElement(MenuDivider, null),
                    React.createElement(MenuGroup, null,
                        React.createElement(MenuItem, null, "A plain MenuItem")))))));
};
const menuAsABlackboxStyles = StyleSheet.create({
    actionButton: { alignSelf: 'center', justifyContent: 'center' },
    switch: { marginHorizontal: 10 },
});
const MenuAsABlackbox = () => {
    const [open, setOpen] = React.useState(false);
    const [dnd, setDnD] = React.useState(false);
    const onOpenChange = React.useCallback(() => {
        setOpen(false);
    }, [setOpen]);
    const onSwitchChange = React.useCallback(() => {
        setDnD(!dnd);
    }, [dnd, setDnD]);
    const onMenuTriggerClicked = React.useCallback(() => {
        setOpen(!open);
    }, [open, setOpen]);
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Menu, { onOpenChange: onOpenChange, open: open },
            React.createElement(MenuTrigger, null,
                React.createElement(Button, { onClick: onMenuTriggerClicked }, "Blockbox Menu")),
            React.createElement(MenuPopover, { minWidth: 200 },
                React.createElement(MenuList, null,
                    React.createElement(Switch, { checked: dnd, onChange: onSwitchChange, style: menuAsABlackboxStyles.switch, label: "Don't disturb" }),
                    React.createElement(MenuItem, null, dnd ? 'DND is on' : 'DND is off'),
                    React.createElement(View, { style: menuAsABlackboxStyles.actionButton },
                        React.createElement(Button, { appearance: "subtle", onClick: onOpenChange }, "Action")))))));
};
const menuSections = [
    {
        name: 'Menu Default',
        testID: MENU_TESTPAGE,
        component: MenuDefault,
    },
    {
        name: 'Menu Checkmarks',
        component: MenuCheckmarks,
    },
    {
        name: 'Menu Radioitem',
        component: MenuRadioItem,
    },
    Platform.select({
        android: null,
        default: {
            name: 'Menu Submenu with ScrollView',
            component: MenuSubMenuWithScrollView,
        },
    }),
    Platform.select({
        android: null,
        default: {
            name: 'Menu open on hover',
            component: MenuOpenOnHover,
        },
    }),
    {
        name: 'Menu open controlled',
        component: MenuControlledOpen,
    },
    Platform.select({
        android: null,
        default: {
            name: 'Menu with tooltips on items',
            component: MenuTooltips,
        },
    }),
    {
        name: 'Menu with icons',
        component: MenuIcons,
    },
    Platform.select({
        android: null,
        default: {
            name: 'Menu Submenu',
            component: MenuSubMenu,
        },
    }),
    {
        name: 'Menu with ScrollView',
        component: MenuScrollView,
    },
    Platform.select({
        android: { name: 'Menu as a blackbox', component: MenuAsABlackbox },
        default: null,
    }),
    {
        name: 'Menu Trigger onClick Override',
        component: MenuTriggerOnClickCallback,
    },
    Platform.select({
        android: null,
        default: {
            name: 'Menu Trigger Hover Override',
            component: MenuTriggerHoverCallback,
        },
    }),
    {
        name: 'Menu Customized',
        component: MenuCustomized,
    },
    Platform.select({
        android: null,
        default: {
            name: 'Menu Refs',
            component: MenuTriggerChildRef,
        },
    }),
    {
        name: 'Menu N of M Override',
        component: MenuNofM,
    },
    {
        name: 'Menu with custom MenuTrigger',
        component: MenuWithCustomMenuTrigger,
    },
    {
        name: 'Menu with groups',
        component: MenuWithGroups,
    },
    Platform.select({
        android: null,
        default: {
            name: 'MenuList component outside menu list test',
            component: MenuComponentOutsideMenuList,
        },
    }),
];
const e2eSections = [
    {
        name: 'Menu E2E',
        component: E2EMenuTest,
    },
];
export const MenuTest = () => {
    const status = {
        win32Status: 'Production',
        uwpStatus: 'Backlog',
        iosStatus: 'Backlog',
        macosStatus: 'Production',
        androidStatus: 'Experimental',
    };
    const description = 'A Menu is an component that displays a list of options on a temporary surface. They are invoked when users interact with a button, action, or other control.';
    const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Menu/SPEC.md';
    return React.createElement(Test, { name: "Menu Test", description: description, spec: spec, sections: menuSections, status: status, e2eSections: e2eSections });
};
//# sourceMappingURL=MenuTest.js.map