var _a;
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, OverflowItem, useOverflowMenu } from '@fluentui-react-native/overflow';
import { RadioGroupV1 as RadioGroup, Radio } from '@fluentui-react-native/radio-group';
import { TextV1 as Text } from '@fluentui-react-native/text';
import { FIRST_OVERFLOW_ITEM, FIRST_OVERFLOW_ITEM_ID, SECOND_OVERFLOW_ITEM, SECOND_OVERFLOW_ITEM_ID, THIRD_OVERFLOW_ITEM, THIRD_OVERFLOW_ITEM_ID, OVERFLOW_MENU, READY_LABEL, READY_VALUE_FALSE, READY_VALUE_TRUE, UPDATED_LABEL, UPDATED_VALUE_FALSE, UPDATED_VALUE_TRUE, RADIO_175, RADIO_275, RADIO_375, } from '../../../../E2E/src/Overflow/consts';
var styles = StyleSheet.create({
    menu: {
        width: 50,
    },
    item: {
        width: 100,
    },
});
function OverflowMenu() {
    var _a = useOverflowMenu(), showMenu = _a.showMenu, visibleMenuItems = _a.visibleMenuItems, onMenuTriggerLayout = _a.onMenuTriggerLayout;
    var overflowCount = visibleMenuItems.length;
    if (showMenu) {
        return (React.createElement(Button, { testID: OVERFLOW_MENU, onLayout: onMenuTriggerLayout, style: styles.menu }, "".concat(overflowCount, " hidden")));
    }
    else {
        return null;
    }
}
var items = [FIRST_OVERFLOW_ITEM_ID, SECOND_OVERFLOW_ITEM_ID, THIRD_OVERFLOW_ITEM_ID];
var itemsToTestIDs = (_a = {},
    _a[FIRST_OVERFLOW_ITEM_ID] = FIRST_OVERFLOW_ITEM,
    _a[SECOND_OVERFLOW_ITEM_ID] = SECOND_OVERFLOW_ITEM,
    _a[THIRD_OVERFLOW_ITEM_ID] = THIRD_OVERFLOW_ITEM,
    _a);
export function E2EOverflowTest() {
    var _a = React.useState({}), overflowStyles = _a[0], setOverflowStyles = _a[1];
    var _b = React.useState(false), ready = _b[0], setReady = _b[1];
    var _c = React.useState(false), updated = _c[0], setUpdated = _c[1];
    var handleRadioGroupChange = React.useCallback(function (key) {
        setUpdated(false);
        var keyAsInt = parseInt(key);
        setOverflowStyles({ width: keyAsInt });
    }, []);
    var handleReady = React.useCallback(function () { return setReady(true); }, []);
    var handleOverflowUpdate = React.useCallback(function () { return setUpdated(true); }, []);
    return (React.createElement(View, null,
        React.createElement(Text, { testID: READY_LABEL }, ready ? READY_VALUE_TRUE : READY_VALUE_FALSE),
        React.createElement(Text, { testID: UPDATED_LABEL }, updated ? UPDATED_VALUE_TRUE : UPDATED_VALUE_FALSE),
        React.createElement(Divider, null),
        React.createElement(RadioGroup, { defaultValue: "375", label: "Width Options", onChange: handleRadioGroupChange },
            React.createElement(Radio, { testID: RADIO_175, label: "175", value: "175" }),
            React.createElement(Radio, { testID: RADIO_275, label: "275", value: "275" }),
            React.createElement(Radio, { testID: RADIO_375, label: "375", value: "375" })),
        React.createElement(Divider, null),
        React.createElement(Overflow, { onOverflowUpdate: handleOverflowUpdate, itemIDs: items, style: overflowStyles, onReady: handleReady },
            items.map(function (id, i) { return (React.createElement(OverflowItem, { testID: itemsToTestIDs[id], priority: items.length - i, overflowID: id, key: id },
                React.createElement(Button, { style: styles.item }, "Item '".concat(id, "'")))); }),
            React.createElement(OverflowMenu, null))));
}
//# sourceMappingURL=OverflowE2ETest.js.map