import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { ButtonV1 as Button } from '@fluentui-react-native/button';
import { Divider } from '@fluentui-react-native/divider';
import { OVERFLOW_TESTPAGE } from '@fluentui-react-native/e2e-testing';
import { Menu, MenuTrigger, MenuList, MenuPopover, MenuItem } from '@fluentui-react-native/menu';
import { Overflow, OverflowItem, useOverflowMenu } from '@fluentui-react-native/overflow';
import { TabList, Tab } from '@fluentui-react-native/tablist';
import { TextV1 as Text } from '@fluentui-react-native/text';
import { E2EOverflowTest } from './OverflowE2ETest';
import MoreHorizontalIcon from '../../../assets/MoreHorizontalFilled.svg';
import { Test } from '../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 = 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 } = useOverflowMenu();
    if (showMenu) {
        return (React.createElement(Menu, null,
            React.createElement(MenuTrigger, null,
                React.createElement(Button, { accessibilityLabel: "More options", onLayout: onMenuTriggerLayout, style: overflowTestPageStyles.menuTrigger, appearance: "subtle", iconOnly: true, icon: { svgSource: { src: MoreHorizontalIcon, viewBox: '0 0 20 20' } }, componentRef: menuTriggerRef })),
            React.createElement(MenuPopover, null,
                React.createElement(MenuList, null, visibleMenuItems.map((id) => (React.createElement(MenuItem, { onClick: () => props.onItemPress(id), key: id }, itemLabels[id] ?? 'Item ' + id)))))));
    }
    else {
        return null;
    }
}
function OverflowMainTest() {
    return (React.createElement(View, { style: overflowTestPageStyles.containerStyle },
        React.createElement(Overflow, { itemIDs: items },
            items.map((item) => (React.createElement(OverflowItem, { key: item, overflowID: item },
                React.createElement(Button, { onClick: () => console.log(item) }, itemLabels[item])))),
            React.createElement(OverflowMenu, { onItemPress: console.log }))));
}
function OverflowTabTest() {
    const [key, setKey] = React.useState('a');
    return (React.createElement(View, { style: overflowTestPageStyles.containerStyle },
        React.createElement(Overflow, { dontHideBeforeReady: true, itemIDs: items },
            React.createElement(TabList, { selectedKey: key, onTabSelect: setKey },
                items.map((item) => (React.createElement(OverflowItem, { priority: key === item ? 2 : 1, key: item, overflowID: item },
                    React.createElement(Tab, { tabKey: item }, itemLabels[item])))),
                React.createElement(OverflowMenu, { onItemPress: setKey })))));
}
function OverflowWidthExample(props) {
    const style = React.useMemo(() => ({ width: props.width }), [props]);
    return (React.createElement(View, { style: overflowTestPageStyles.containerStyle },
        React.createElement(Text, { variant: "body1Strong" }, `Width: ${props.width}`),
        React.createElement(Overflow, { dontHideBeforeReady: props.dontHideBeforeReady, style: style, itemIDs: items },
            items.map((item) => (React.createElement(OverflowItem, { overflowID: item, key: item },
                React.createElement(Button, null,
                    "Item ",
                    ' ' + item)))),
            React.createElement(OverflowMenu, { onItemPress: console.log }))));
}
function OverflowDifferentWidthTest() {
    return (React.createElement(View, null,
        React.createElement(Text, { variant: "heroStandard" }, "Hidden Before Layout"),
        React.createElement(OverflowWidthExample, { width: 100 }),
        React.createElement(OverflowWidthExample, { width: 250 }),
        React.createElement(OverflowWidthExample, { width: 400 }),
        React.createElement(Divider, null),
        React.createElement(Text, { 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(View, { style: overflowTestPageStyles.containerStyle },
        React.createElement(Text, null, "Add buttons using the button below. Remove by clicking on individual items in the Overflow container."),
        React.createElement(Button, { onClick: addItem }, "Add item"),
        React.createElement(Text, null,
            "Overflow Items (raw): ",
            ids.reduce((prev, curr) => prev + ', ' + curr)),
        React.createElement(Divider, null),
        React.createElement(Overflow, { padding: 4, style: overflowTestPageStyles.dynamicAddRemoval, itemIDs: ids },
            ids.map((id) => {
                return (React.createElement(OverflowItem, { key: id, overflowID: id },
                    React.createElement(Button, { onClick: () => removeItem(id) }, 'Item ' + id)));
            }),
            React.createElement(OverflowMenu, { onItemPress: removeItem }))));
}
export 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, { name: "Overflow Test", description: description, sections: [
            {
                name: 'Overflow',
                component: OverflowMainTest,
                testID: 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: 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',
        } }));
};
//# sourceMappingURL=OverflowTest.js.map