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