"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.OverflowTest = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var button_1 = require("@fluentui-react-native/button");
var divider_1 = require("@fluentui-react-native/divider");
var menu_1 = require("@fluentui-react-native/menu");
var overflow_1 = require("@fluentui-react-native/overflow");
var tablist_1 = require("@fluentui-react-native/tablist");
var text_1 = require("@fluentui-react-native/text");
var MoreHorizontalFilled_svg_1 = tslib_1.__importDefault(require("./MoreHorizontalFilled.svg"));
var OverflowE2ETest_1 = require("./OverflowE2ETest");
var index_consts_1 = require("../../../../E2E/src/index.consts");
var Test_1 = require("../Test");
var items = ['a', 'b', 'c', 'd', 'e'];
var itemLabels = {
    a: 'Item A',
    b: 'Item B Item B Item B',
    c: 'Item C Item C',
    d: 'Item D',
    e: 'Item E Item E Item E Item E',
};
var overflowTestPageStyles = react_native_1.StyleSheet.create({
    containerStyle: {
        paddingVertical: 4,
    },
    width100: {
        width: 100,
    },
    width250: {
        width: 250,
    },
    width400: {
        width: 400,
    },
    menuTrigger: {
        alignSelf: 'center',
    },
    dynamicAddRemoval: {
        width: 400,
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: 'black',
    },
});
function OverflowMenu(props) {
    var _a = (0, overflow_1.useOverflowMenu)(), showMenu = _a.showMenu, visibleMenuItems = _a.visibleMenuItems, menuTriggerRef = _a.menuTriggerRef, onMenuTriggerLayout = _a.onMenuTriggerLayout;
    if (showMenu) {
        return (React.createElement(menu_1.Menu, null,
            React.createElement(menu_1.MenuTrigger, null,
                React.createElement(button_1.ButtonV1, { accessibilityLabel: "More options", onLayout: onMenuTriggerLayout, style: overflowTestPageStyles.menuTrigger, appearance: "subtle", iconOnly: true, icon: { svgSource: { src: MoreHorizontalFilled_svg_1.default, viewBox: '0 0 20 20' } }, componentRef: menuTriggerRef })),
            React.createElement(menu_1.MenuPopover, null,
                React.createElement(menu_1.MenuList, null, visibleMenuItems.map(function (id) {
                    var _a;
                    return (React.createElement(menu_1.MenuItem, { onClick: function () { return props.onItemPress(id); }, key: id }, (_a = itemLabels[id]) !== null && _a !== void 0 ? _a : 'Item ' + id));
                })))));
    }
    else {
        return null;
    }
}
function OverflowMainTest() {
    return (React.createElement(react_native_1.View, { style: overflowTestPageStyles.containerStyle },
        React.createElement(overflow_1.Overflow, { itemIDs: items },
            items.map(function (item) { return (React.createElement(overflow_1.OverflowItem, { key: item, overflowID: item },
                React.createElement(button_1.ButtonV1, { onClick: function () { return console.log(item); } }, itemLabels[item]))); }),
            React.createElement(OverflowMenu, { onItemPress: console.log }))));
}
function OverflowTabTest() {
    var _a = React.useState('a'), key = _a[0], setKey = _a[1];
    return (React.createElement(react_native_1.View, { style: overflowTestPageStyles.containerStyle },
        React.createElement(overflow_1.Overflow, { dontHideBeforeReady: true, itemIDs: items },
            React.createElement(tablist_1.TabList, { selectedKey: key, onTabSelect: setKey },
                items.map(function (item) { return (React.createElement(overflow_1.OverflowItem, { priority: key === item ? 2 : 1, key: item, overflowID: item },
                    React.createElement(tablist_1.Tab, { tabKey: item }, itemLabels[item]))); }),
                React.createElement(OverflowMenu, { onItemPress: setKey })))));
}
function OverflowWidthExample(props) {
    var style = React.useMemo(function () { return ({ width: props.width }); }, [props]);
    return (React.createElement(react_native_1.View, { style: overflowTestPageStyles.containerStyle },
        React.createElement(text_1.TextV1, { variant: "body1Strong" }, "Width: ".concat(props.width)),
        React.createElement(overflow_1.Overflow, { dontHideBeforeReady: props.dontHideBeforeReady, style: style, itemIDs: items },
            items.map(function (item) { return (React.createElement(overflow_1.OverflowItem, { overflowID: item, key: item },
                React.createElement(button_1.ButtonV1, null,
                    "Item ",
                    ' ' + item))); }),
            React.createElement(OverflowMenu, { onItemPress: console.log }))));
}
function OverflowDifferentWidthTest() {
    return (React.createElement(react_native_1.View, null,
        React.createElement(text_1.TextV1, { variant: "heroStandard" }, "Hidden Before Layout"),
        React.createElement(OverflowWidthExample, { width: 100 }),
        React.createElement(OverflowWidthExample, { width: 250 }),
        React.createElement(OverflowWidthExample, { width: 400 }),
        React.createElement(divider_1.Divider, null),
        React.createElement(text_1.TextV1, { variant: "heroStandard" }, "Visible Before Layout"),
        React.createElement(OverflowWidthExample, { dontHideBeforeReady: true, width: 100 }),
        React.createElement(OverflowWidthExample, { dontHideBeforeReady: true, width: 250 }),
        React.createElement(OverflowWidthExample, { dontHideBeforeReady: true, width: 400 })));
}
function OverflowDynamicAddRemovalTest() {
    var _a = React.useState(['1', '2', '3']), ids = _a[0], setIDs = _a[1];
    var addItem = React.useCallback(function () {
        return setIDs(function (prev) {
            var newItem = (parseInt(prev[prev.length - 1]) + 1).toString();
            return tslib_1.__spreadArray(tslib_1.__spreadArray([], prev, true), [newItem], false);
        });
    }, []);
    var removeItem = React.useCallback(function (item) { return setIDs(function (prev) { return prev.filter(function (x) { return x !== item; }); }); }, []);
    return (React.createElement(react_native_1.View, { style: overflowTestPageStyles.containerStyle },
        React.createElement(text_1.TextV1, null, "Add buttons using the button below. Remove by clicking on individual items in the Overflow container."),
        React.createElement(button_1.ButtonV1, { onClick: addItem }, "Add item"),
        React.createElement(text_1.TextV1, null,
            "Overflow Items (raw): ",
            ids.reduce(function (prev, curr) { return prev + ', ' + curr; })),
        React.createElement(divider_1.Divider, null),
        React.createElement(overflow_1.Overflow, { padding: 4, style: overflowTestPageStyles.dynamicAddRemoval, itemIDs: ids },
            ids.map(function (id) {
                return (React.createElement(overflow_1.OverflowItem, { key: id, overflowID: id },
                    React.createElement(button_1.ButtonV1, { onClick: function () { return removeItem(id); } }, 'Item ' + id)));
            }),
            React.createElement(OverflowMenu, { onItemPress: removeItem }))));
}
var OverflowTest = function () {
    var description = 'The `Overflow` and `OverflowItem` components, based off the same Fluent web v9 components of the same name, are low level utilities that enable users to create overflow experiences with any component. These components will detect and hide overflowing elements on screen and manage the overflow state.';
    return (React.createElement(Test_1.Test, { name: "Overflow Test", description: description, sections: [
            {
                name: 'Overflow',
                component: OverflowMainTest,
                testID: index_consts_1.OVERFLOW_TESTPAGE,
            },
            {
                name: 'Overflow TabList',
                component: OverflowTabTest,
            },
            {
                name: 'Overflow Dynamic Add/Removal of Items',
                component: OverflowDynamicAddRemovalTest,
            },
            {
                name: 'Overflow Variable Width',
                component: OverflowDifferentWidthTest,
            },
        ], e2eSections: [
            {
                name: 'Overflow E2E Section',
                component: OverflowE2ETest_1.E2EOverflowTest,
            },
        ], spec: "https://github.com/microsoft/fluentui-react-native/blob/main/packages/experimental/Overflow/SPEC.md", status: {
            win32Status: 'Experimental',
            uwpStatus: 'Backlog',
            iosStatus: 'Backlog',
            macosStatus: 'Experimental',
            androidStatus: 'Backlog',
        } }));
};
exports.OverflowTest = OverflowTest;
//# sourceMappingURL=OverflowTest.js.map