"use strict";
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
exports.E2EOverflowTest = 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 overflow_1 = require("@fluentui-react-native/overflow");
var radio_group_1 = require("@fluentui-react-native/radio-group");
var text_1 = require("@fluentui-react-native/text");
var consts_1 = require("../../../../E2E/src/Overflow/consts");
var styles = react_native_1.StyleSheet.create({
    menu: {
        width: 50,
    },
    item: {
        width: 100,
    },
});
function OverflowMenu() {
    var _a = (0, overflow_1.useOverflowMenu)(), showMenu = _a.showMenu, visibleMenuItems = _a.visibleMenuItems, onMenuTriggerLayout = _a.onMenuTriggerLayout;
    var overflowCount = visibleMenuItems.length;
    if (showMenu) {
        return (React.createElement(button_1.ButtonV1, { testID: consts_1.OVERFLOW_MENU, onLayout: onMenuTriggerLayout, style: styles.menu }, "".concat(overflowCount, " hidden")));
    }
    else {
        return null;
    }
}
var items = [consts_1.FIRST_OVERFLOW_ITEM_ID, consts_1.SECOND_OVERFLOW_ITEM_ID, consts_1.THIRD_OVERFLOW_ITEM_ID];
var itemsToTestIDs = (_a = {},
    _a[consts_1.FIRST_OVERFLOW_ITEM_ID] = consts_1.FIRST_OVERFLOW_ITEM,
    _a[consts_1.SECOND_OVERFLOW_ITEM_ID] = consts_1.SECOND_OVERFLOW_ITEM,
    _a[consts_1.THIRD_OVERFLOW_ITEM_ID] = consts_1.THIRD_OVERFLOW_ITEM,
    _a);
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(react_native_1.View, null,
        React.createElement(text_1.TextV1, { testID: consts_1.READY_LABEL }, ready ? consts_1.READY_VALUE_TRUE : consts_1.READY_VALUE_FALSE),
        React.createElement(text_1.TextV1, { testID: consts_1.UPDATED_LABEL }, updated ? consts_1.UPDATED_VALUE_TRUE : consts_1.UPDATED_VALUE_FALSE),
        React.createElement(divider_1.Divider, null),
        React.createElement(radio_group_1.RadioGroupV1, { defaultValue: "375", label: "Width Options", onChange: handleRadioGroupChange },
            React.createElement(radio_group_1.Radio, { testID: consts_1.RADIO_175, label: "175", value: "175" }),
            React.createElement(radio_group_1.Radio, { testID: consts_1.RADIO_275, label: "275", value: "275" }),
            React.createElement(radio_group_1.Radio, { testID: consts_1.RADIO_375, label: "375", value: "375" })),
        React.createElement(divider_1.Divider, null),
        React.createElement(overflow_1.Overflow, { onOverflowUpdate: handleOverflowUpdate, itemIDs: items, style: overflowStyles, onReady: handleReady },
            items.map(function (id, i) { return (React.createElement(overflow_1.OverflowItem, { testID: itemsToTestIDs[id], priority: items.length - i, overflowID: id, key: id },
                React.createElement(button_1.ButtonV1, { style: styles.item }, "Item '".concat(id, "'")))); }),
            React.createElement(OverflowMenu, null))));
}
exports.E2EOverflowTest = E2EOverflowTest;
//# sourceMappingURL=OverflowE2ETest.js.map