"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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.E2EOverflowTest = 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 overflow_1 = require("@fluentui-react-native/overflow");
const radio_group_1 = require("@fluentui-react-native/radio-group");
const text_1 = require("@fluentui-react-native/text");
const styles = react_native_1.StyleSheet.create({
    menu: {
        width: 50,
    },
    item: {
        width: 100,
    },
});
function OverflowMenu() {
    const { showMenu, visibleMenuItems, onMenuTriggerLayout } = (0, overflow_1.useOverflowMenu)();
    const overflowCount = visibleMenuItems.length;
    if (showMenu) {
        return (React.createElement(button_1.ButtonV1, { testID: e2e_testing_1.OVERFLOW_MENU, onLayout: onMenuTriggerLayout, style: styles.menu }, `${overflowCount} hidden`));
    }
    else {
        return null;
    }
}
const items = [e2e_testing_1.FIRST_OVERFLOW_ITEM_ID, e2e_testing_1.SECOND_OVERFLOW_ITEM_ID, e2e_testing_1.THIRD_OVERFLOW_ITEM_ID];
const itemsToTestIDs = {
    [e2e_testing_1.FIRST_OVERFLOW_ITEM_ID]: e2e_testing_1.FIRST_OVERFLOW_ITEM,
    [e2e_testing_1.SECOND_OVERFLOW_ITEM_ID]: e2e_testing_1.SECOND_OVERFLOW_ITEM,
    [e2e_testing_1.THIRD_OVERFLOW_ITEM_ID]: e2e_testing_1.THIRD_OVERFLOW_ITEM,
};
function E2EOverflowTest() {
    const [overflowStyles, setOverflowStyles] = React.useState({});
    const [ready, setReady] = React.useState(false);
    const [updated, setUpdated] = React.useState(false);
    const handleRadioGroupChange = React.useCallback((key) => {
        setUpdated(false);
        const keyAsInt = parseInt(key);
        setOverflowStyles({ width: keyAsInt });
    }, []);
    const handleReady = React.useCallback(() => setReady(true), []);
    const handleOverflowUpdate = React.useCallback(() => setUpdated(true), []);
    return (React.createElement(react_native_1.View, null,
        React.createElement(text_1.TextV1, { testID: e2e_testing_1.READY_LABEL }, ready ? e2e_testing_1.READY_VALUE_TRUE : e2e_testing_1.READY_VALUE_FALSE),
        React.createElement(text_1.TextV1, { testID: e2e_testing_1.UPDATED_LABEL }, updated ? e2e_testing_1.UPDATED_VALUE_TRUE : e2e_testing_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: e2e_testing_1.RADIO_175, label: "175", value: "175" }),
            React.createElement(radio_group_1.Radio, { testID: e2e_testing_1.RADIO_275, label: "275", value: "275" }),
            React.createElement(radio_group_1.Radio, { testID: e2e_testing_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((id, i) => (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 '${id}'`)))),
            React.createElement(OverflowMenu, null))));
}
exports.E2EOverflowTest = E2EOverflowTest;
//# sourceMappingURL=OverflowE2ETest.js.map