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 { 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 MoreHorizontalIcon from './MoreHorizontalFilled.svg';
import { E2EOverflowTest } from './OverflowE2ETest';
import { OVERFLOW_TESTPAGE } from '../../../../E2E/src/index.consts';
import { Test } from '../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 = StyleSheet.create({
    containerStyle: {
        paddingVertical: 4,
    },
    width100: {
        width: 100,
    },
    width250: {
        width: 250,
    },
    width400: {
        width: 400,
    },
    menuTrigger: {
        alignSelf: 'center',
    },
});
function OverflowMenu(props) {
    var _a = useOverflowMenu(), showMenu = _a.showMenu, visibleMenuItems = _a.visibleMenuItems, menuTriggerRef = _a.menuTriggerRef, onMenuTriggerLayout = _a.onMenuTriggerLayout;
    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(function (id) { return (React.createElement(MenuItem, { onClick: function () { return props.onItemPress(id); }, key: id }, itemLabels[id])); })))));
    }
    else {
        return null;
    }
}
function OverflowMainTest() {
    return (React.createElement(View, { style: overflowTestPageStyles.containerStyle },
        React.createElement(Overflow, { itemIDs: items },
            items.map(function (item) { return (React.createElement(OverflowItem, { key: item, overflowID: item },
                React.createElement(Button, { 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(View, { style: overflowTestPageStyles.containerStyle },
        React.createElement(Overflow, { dontHideBeforeReady: true, itemIDs: items },
            React.createElement(TabList, { selectedKey: key, onTabSelect: setKey },
                items.map(function (item) { return (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) {
    var style = React.useMemo(function () { return ({ width: props.width }); }, [props]);
    return (React.createElement(View, { style: overflowTestPageStyles.containerStyle },
        React.createElement(Text, { variant: "body1Strong" }, "Width: ".concat(props.width)),
        React.createElement(Overflow, { dontHideBeforeReady: props.dontHideBeforeReady, style: style, itemIDs: items },
            items.map(function (item) { return (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 })));
}
export 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, { name: "Overflow Test", description: description, sections: [
            {
                name: 'Overflow',
                component: OverflowMainTest,
                testID: OVERFLOW_TESTPAGE,
            },
            {
                name: 'Overflow TabList',
                component: OverflowTabTest,
            },
            {
                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