"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.OverflowTest = void 0;
const React = __importStar(require("react"));
const react_native_1 = require("react-native");
const button_1 = require("@fluentui-react-native/button");
const divider_1 = require("@fluentui-react-native/divider");
const e2e_testing_1 = require("@fluentui-react-native/e2e-testing");
const menu_1 = require("@fluentui-react-native/menu");
const overflow_1 = require("@fluentui-react-native/overflow");
const tablist_1 = require("@fluentui-react-native/tablist");
const text_1 = require("@fluentui-react-native/text");
const OverflowE2ETest_1 = require("./OverflowE2ETest");
const MoreHorizontalFilled_svg_1 = __importDefault(require("../../../assets/MoreHorizontalFilled.svg"));
const Test_1 = require("../Test");
const items = ['a', 'b', 'c', 'd', 'e'];
const 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',
};
const 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) {
    const { showMenu, visibleMenuItems, menuTriggerRef, onMenuTriggerLayout } = (0, overflow_1.useOverflowMenu)();
    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((id) => (React.createElement(menu_1.MenuItem, { onClick: () => props.onItemPress(id), key: id }, itemLabels[id] ?? '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((item) => (React.createElement(overflow_1.OverflowItem, { key: item, overflowID: item },
                React.createElement(button_1.ButtonV1, { onClick: () => console.log(item) }, itemLabels[item])))),
            React.createElement(OverflowMenu, { onItemPress: console.log }))));
}
function OverflowTabTest() {
    const [key, setKey] = React.useState('a');
    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((item) => (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) {
    const style = React.useMemo(() => ({ width: props.width }), [props]);
    return (React.createElement(react_native_1.View, { style: overflowTestPageStyles.containerStyle },
        React.createElement(text_1.TextV1, { variant: "body1Strong" }, `Width: ${props.width}`),
        React.createElement(overflow_1.Overflow, { dontHideBeforeReady: props.dontHideBeforeReady, style: style, itemIDs: items },
            items.map((item) => (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() {
    const [ids, setIDs] = React.useState(['1', '2', '3']);
    const addItem = React.useCallback(() => setIDs((prev) => {
        const newItem = (parseInt(prev[prev.length - 1]) + 1).toString();
        return [...prev, newItem];
    }), []);
    const removeItem = React.useCallback((item) => setIDs((prev) => prev.filter((x) => 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((prev, curr) => prev + ', ' + curr)),
        React.createElement(divider_1.Divider, null),
        React.createElement(overflow_1.Overflow, { padding: 4, style: overflowTestPageStyles.dynamicAddRemoval, itemIDs: ids },
            ids.map((id) => {
                return (React.createElement(overflow_1.OverflowItem, { key: id, overflowID: id },
                    React.createElement(button_1.ButtonV1, { onClick: () => removeItem(id) }, 'Item ' + id)));
            }),
            React.createElement(OverflowMenu, { onItemPress: removeItem }))));
}
const OverflowTest = () => {
    const 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: e2e_testing_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