import React, { useState } from 'react';
import { TextInput, StyleSheet, View } from 'react-native';
import { ButtonV1 as Button } from '@fluentui/react-native';
import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
import { Stack } from '@fluentui-react-native/stack';
import { stackStyle } from '../Common/styles';
import { commonTestStyles as commonStyles } from '../Common/styles';
const styles = StyleSheet.create({
    menuContainerRow: { flexDirection: 'row' },
    menuMargin: { marginRight: 20 },
});
export const MenuScrollView = () => {
    const [data, setData] = useState([
        React.createElement(MenuItem, { key: 1 }, "MenuItem 1"),
        React.createElement(MenuItem, { key: 2 }, "MenuItem 2"),
        React.createElement(MenuItem, { key: 3 }, "MenuItem 3"),
        React.createElement(MenuItem, { key: 4 }, "MenuItem 4"),
        React.createElement(MenuItem, { key: 5 }, "MenuItem 5"),
    ]);
    const insertOnClick = React.useCallback(() => {
        data.push(React.createElement(MenuItem, { key: Math.random() }, "MenuItem"));
        const newList = [...data];
        setData(newList);
    }, [data]);
    const popOnClick = React.useCallback(() => {
        if (data.length > 0) {
            data.pop();
            const newList = [...data];
            setData(newList);
        }
    }, [data]);
    const [maxHeight, setMaxHeight] = useState(800);
    const menuItems = [];
    for (let i = 0; i < 40; i++) {
        menuItems.push(React.createElement(MenuItem, { key: i },
            "MenuItem ",
            i));
    }
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(View, { style: styles.menuContainerRow },
            React.createElement(TextInput, { accessibilityLabel: "Max height for menu", style: [commonStyles.textBox, styles.menuMargin], placeholder: "Max height for menu", blurOnSubmit: true, onSubmitEditing: (e) => {
                    setMaxHeight(parseInt(e.nativeEvent.text));
                } }),
            React.createElement(Menu, null,
                React.createElement(MenuTrigger, null,
                    React.createElement(Button, null, "Custom height")),
                React.createElement(MenuPopover, { maxHeight: maxHeight },
                    React.createElement(MenuList, null, menuItems)))),
        React.createElement(View, { style: styles.menuContainerRow },
            React.createElement(Button, { appearance: "subtle", onClick: insertOnClick }, "Add new menu item"),
            React.createElement(Button, { appearance: "subtle", onClick: popOnClick }, "Remove last menu item"),
            React.createElement(Menu, null,
                React.createElement(MenuTrigger, null,
                    React.createElement(Button, null, "Mutable Menu: MaxHeight 250 ")),
                React.createElement(MenuPopover, { maxHeight: 250 },
                    React.createElement(MenuList, null, data)))),
        React.createElement(Menu, null,
            React.createElement(MenuTrigger, null,
                React.createElement(Button, null, "Height: 100 minWidth: 250")),
            React.createElement(MenuPopover, { maxHeight: 100, minWidth: 250 },
                React.createElement(MenuList, null,
                    React.createElement(MenuItem, null, "MenuItem 1"),
                    React.createElement(MenuItem, null, "MenuItem 2"),
                    React.createElement(MenuItem, null, "MenuItem 3"),
                    React.createElement(MenuItem, null, "MenuItem 4"),
                    React.createElement(MenuItem, null, "MenuItem 5"),
                    React.createElement(MenuItem, null, "MenuItem 6"))))));
};
//# sourceMappingURL=MenuScrollView.js.map