"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuScrollView = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var react_native_2 = require("@fluentui/react-native");
var menu_1 = require("@fluentui-react-native/menu");
var stack_1 = require("@fluentui-react-native/stack");
var styles_1 = require("../Common/styles");
var styles_2 = require("../Common/styles");
var styles = react_native_1.StyleSheet.create({
    menuContainerRow: { flexDirection: 'row' },
    menuMargin: { marginRight: 20 },
});
var MenuScrollView = function () {
    var _a = (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"),
    ]), data = _a[0], setData = _a[1];
    var insertOnClick = react_1.default.useCallback(function () {
        data.push(react_1.default.createElement(menu_1.MenuItem, { key: Math.random() }, "MenuItem"));
        var newList = tslib_1.__spreadArray([], data, true);
        setData(newList);
    }, [data]);
    var popOnClick = react_1.default.useCallback(function () {
        if (data.length > 0) {
            data.pop();
            var newList = tslib_1.__spreadArray([], data, true);
            setData(newList);
        }
    }, [data]);
    var _b = (0, react_1.useState)(800), maxHeight = _b[0], setMaxHeight = _b[1];
    var menuItems = [];
    for (var 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: function (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