"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabListTest = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(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 menu_1 = require("@fluentui-react-native/menu");
var tablist_1 = require("@fluentui-react-native/tablist");
var text_1 = require("@fluentui-react-native/text");
var TabListE2ETest_1 = require("./TabListE2ETest");
var index_consts_1 = require("../../../../E2E/src/index.consts");
var iconExamples_1 = require("../Common/iconExamples");
var styles_1 = require("../Common/styles");
var Test_1 = require("../Test");
var SubHeader = text_1.TextV1.customize({ variant: 'subheaderStandard' });
var Header = text_1.TextV1.customize({ variant: 'headerStandard' });
var Line = divider_1.Divider.customize({ paddingVertical: 4 });
var PaddedTabList = tablist_1.TabList.customize({
    paddingVertical: 4,
});
var TabListDefaultTest = function () {
    var _a = react_1.default.useState('tab1'), key = _a[0], setKey = _a[1];
    return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
        react_1.default.createElement(Header, null, "Uncontrolled Component"),
        react_1.default.createElement(Line, null),
        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: 'tab1' },
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3")),
        react_1.default.createElement(Header, null, "Controlled Component"),
        react_1.default.createElement(Line, null),
        react_1.default.createElement(text_1.TextV1, null,
            "Selected Key: ",
            key),
        react_1.default.createElement(PaddedTabList, { selectedKey: key, onTabSelect: function (val) {
                console.log('New key:', val);
                setKey(val);
            } },
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3"))));
};
var TabListDisabledTest = function () {
    return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "tab2" },
            react_1.default.createElement(tablist_1.Tab, { disabled: true, tabKey: "tab1" }, "Tab 1"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
            react_1.default.createElement(tablist_1.Tab, { disabled: true, tabKey: "tab3" }, "Tab 3"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab4" }, "Tab 4")),
        react_1.default.createElement(PaddedTabList, { disabled: true },
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3"))));
};
var TabListVariantsTest = function () {
    return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
        react_1.default.createElement(Header, null, "Size Variants"),
        react_1.default.createElement(Line, null),
        react_1.default.createElement(SubHeader, null, "Small"),
        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "sm1", size: "small" },
            react_1.default.createElement(tablist_1.Tab, { tabKey: "sm1" }, "Small Tab 1"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "sm2" }, "Small Tab 2"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "sm3" }, "Small Tab 3")),
        react_1.default.createElement(SubHeader, null, "Medium (default)"),
        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "m1", size: "medium" },
            react_1.default.createElement(tablist_1.Tab, { tabKey: "m1" }, "Medium Tab 1"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "m2" }, "Medium Tab 2"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "m3" }, "Medium Tab 3")),
        react_1.default.createElement(SubHeader, null, "Large"),
        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "lg1", size: "large" },
            react_1.default.createElement(tablist_1.Tab, { tabKey: "lg1" }, "Large Tab 1"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "lg2" }, "Large Tab 2"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "lg3" }, "Large Tab 3")),
        react_1.default.createElement(Header, null, "Appearance"),
        react_1.default.createElement(Line, null),
        react_1.default.createElement(SubHeader, null, "Transparent Appearance"),
        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "tab1", appearance: "transparent" },
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3")),
        react_1.default.createElement(SubHeader, null, "Subtle Appearance"),
        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "tab1", appearance: "subtle" },
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3")),
        react_1.default.createElement(Header, null, "Vertical Orientation"),
        react_1.default.createElement(Line, null),
        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "tab1", vertical: true },
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3"))));
};
var TabListIconTest = function () {
    return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
        react_1.default.createElement(tablist_1.TabList, { defaultSelectedKey: "fontIcon" },
            react_1.default.createElement(tablist_1.Tab, { icon: { fontSource: iconExamples_1.fontProps }, tabKey: "fontIcon" }, "Font Icon"),
            react_1.default.createElement(tablist_1.Tab, { icon: { fontSource: iconExamples_1.fontProps }, tabKey: "fontIconOnly" }),
            react_1.default.createElement(tablist_1.Tab, { icon: { svgSource: iconExamples_1.svgProps }, tabKey: "svgIcon" }, "SVG Icon"),
            react_1.default.createElement(tablist_1.Tab, { icon: { svgSource: iconExamples_1.svgProps }, tabKey: "svgIconOnly" }))));
};
var TabListViewTest = function () {
    var _a = react_1.default.useState('a'), key = _a[0], setKey = _a[1];
    var views = react_1.default.useMemo(function () { return ({
        a: (react_1.default.createElement(react_native_1.View, null,
            react_1.default.createElement(SubHeader, null, "This is View 1"),
            react_1.default.createElement(text_1.TextV1, { variant: "body1" }, "Here is some text."))),
        b: (react_1.default.createElement(react_native_1.View, null,
            react_1.default.createElement(SubHeader, null, "This is View 2"),
            react_1.default.createElement(button_1.ButtonV1, null, "Button 1"))),
        c: (react_1.default.createElement(react_native_1.View, null,
            react_1.default.createElement(SubHeader, null, "This is View 3"),
            react_1.default.createElement(menu_1.Menu, null,
                react_1.default.createElement(menu_1.MenuTrigger, null,
                    react_1.default.createElement(button_1.ButtonV1, null, "Menu")),
                react_1.default.createElement(menu_1.MenuPopover, null,
                    react_1.default.createElement(menu_1.MenuList, null,
                        react_1.default.createElement(menu_1.MenuItem, null, "Item 1"),
                        react_1.default.createElement(menu_1.MenuItem, null, "Item 2"),
                        react_1.default.createElement(menu_1.MenuItem, null, "Item 3")))))),
    }); }, []);
    return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
        react_1.default.createElement(tablist_1.TabList, { selectedKey: key, onTabSelect: setKey },
            react_1.default.createElement(tablist_1.Tab, { tabKey: "a" }, "View 1"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "b" }, "View 2"),
            react_1.default.createElement(tablist_1.Tab, { tabKey: "c" }, "View 3")),
        views[key]));
};
var sections = [
    {
        name: 'TabList Controlled vs Uncontrolled',
        component: TabListDefaultTest,
        testID: index_consts_1.TABLIST_TESTPAGE,
    },
    {
        name: 'Disabled',
        component: TabListDisabledTest,
    },
    {
        name: 'Variants',
        component: TabListVariantsTest,
    },
    {
        name: 'Icon',
        component: TabListIconTest,
    },
    {
        name: 'Rendering Content Separately',
        component: TabListViewTest,
    },
];
var e2eSections = [
    {
        name: 'E2E Tests',
        component: TabListE2ETest_1.TabListE2ETest,
    },
];
var TabListTest = function () {
    var status = {
        win32Status: 'Experimental',
        uwpStatus: 'Experimental',
        iosStatus: 'Backlog',
        macosStatus: 'Experimental',
        androidStatus: 'Backlog',
    };
    var description = 'With Tabs, users can navigate to another view.';
    return react_1.default.createElement(Test_1.Test, { name: "TabList Test", description: description, sections: sections, status: status, e2eSections: e2eSections });
};
exports.TabListTest = TabListTest;
//# sourceMappingURL=TabListTest.js.map