"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabsLegacyTest = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var react_native_2 = require("@fluentui/react-native");
var TabsLegacyE2ETest_1 = require("./TabsLegacyE2ETest");
var consts_1 = require("../../../../E2E/src/TabsLegacy/consts");
var iconExamples_1 = require("../Common/iconExamples");
var styles_1 = require("../Common/styles");
var Test_1 = require("../Test");
var TabsMainTest = function () {
    return (React.createElement(react_native_1.View, { style: styles_1.stackStyle },
        React.createElement(react_native_2.Tabs, { label: "Tabs" },
            React.createElement(react_native_2.TabsItem, { headerText: "Home", itemKey: "A" },
                React.createElement(react_native_2.Text, null, "Tabs #1")),
            React.createElement(react_native_2.TabsItem, { headerText: "Files", itemKey: "B" },
                React.createElement(react_native_2.Text, null, "Tabs #2")),
            React.createElement(react_native_2.TabsItem, { headerText: "Settings", itemKey: "C" },
                React.createElement(react_native_2.Text, null, "Tabs #3")))));
};
var DisabledTabs = function () {
    return (React.createElement(react_native_1.View, { style: styles_1.stackStyle },
        React.createElement(react_native_2.Tabs, { label: "Tabs" },
            React.createElement(react_native_2.TabsItem, { headerText: "Home", itemKey: "A" },
                React.createElement(react_native_2.Text, null, "Tabs #1")),
            React.createElement(react_native_2.TabsItem, { headerText: "Files", itemKey: "B", disabled: true },
                React.createElement(react_native_2.Text, null, "Tabs #2")),
            React.createElement(react_native_2.TabsItem, { headerText: "Settings", itemKey: "C" },
                React.createElement(react_native_2.Text, null, "Tabs #3")))));
};
var TabsCountIcon = function () {
    var svgExample = {
        svgSource: iconExamples_1.svgProps,
        width: 20,
        height: 20,
    };
    return (React.createElement(react_native_1.View, { style: styles_1.stackStyle },
        React.createElement(react_native_2.Tabs, { label: "Tabs" },
            React.createElement(react_native_2.TabsItem, { headerText: "Home", itemKey: "A", icon: svgExample, itemCount: 23 },
                React.createElement(react_native_2.Text, null, "Tabs #1")),
            React.createElement(react_native_2.TabsItem, { itemKey: "B", icon: svgExample, itemCount: 0 },
                React.createElement(react_native_2.Text, null, "Tabs #2")),
            React.createElement(react_native_2.TabsItem, { itemKey: "C", icon: svgExample },
                React.createElement(react_native_2.Text, null, "Tabs #3")))));
};
var TabsClickEventTest = function () {
    var _a = React.useState('home_key'), selectedKey = _a[0], setSelectedKey = _a[1];
    var onTabsClick = function (key) {
        setSelectedKey(key);
    };
    return (React.createElement(react_native_1.View, { style: styles_1.stackStyle },
        React.createElement(react_native_2.Text, null,
            "Last onTabsClick from: ",
            selectedKey),
        React.createElement(react_native_2.Tabs, { label: "Tabs", onTabsClick: onTabsClick, selectedKey: selectedKey },
            React.createElement(react_native_2.TabsItem, { headerText: "Home", itemKey: "home_key" },
                React.createElement(react_native_2.Text, null, "Tabs #1")),
            React.createElement(react_native_2.TabsItem, { headerText: "Files", itemKey: "files_key" },
                React.createElement(react_native_2.Text, null, "Tabs #2")),
            React.createElement(react_native_2.TabsItem, { headerText: "Settings", itemKey: "settings_key" },
                React.createElement(react_native_2.Text, null, "Tabs #3")))));
};
var TabsChangingViews = function () {
    // If user wants to control what gets rendered example.
    var _a = React.useState('Tabs #1'), selectedKey = _a[0], setSelectedKey = _a[1];
    var onTabsClick = function (key) {
        setSelectedKey(key);
    };
    return (React.createElement(react_native_1.View, { style: styles_1.stackStyle },
        React.createElement(react_native_2.Tabs, { label: "Tabs", onTabsClick: onTabsClick, headersOnly: true, selectedKey: selectedKey },
            React.createElement(react_native_2.TabsItem, { headerText: "Home", itemKey: "Tabs #1" }),
            React.createElement(react_native_2.TabsItem, { headerText: "File", itemKey: "Tabs #2" }),
            React.createElement(react_native_2.TabsItem, { headerText: "Settings", itemKey: "Tabs #3" })),
        React.createElement(react_native_1.View, { style: { marginVertical: 1 } },
            React.createElement(react_native_2.Text, null, selectedKey))));
};
var TabsRenderSeparately = function () {
    var _a = React.useState('rectangleRed'), selectedKey = _a[0], setSelectedKey = _a[1];
    var onTabsClick = function (key) {
        setSelectedKey(key);
    };
    var getTabId = function (key) {
        return "ShapeColorTabs_".concat(key);
    };
    return (React.createElement(react_native_1.View, { style: styles_1.stackStyle },
        React.createElement(react_native_1.View, { accessible: true, focusable: true, accessibilityLabel: getTabId(selectedKey), style: {
                width: 100,
                height: selectedKey === 'squareRed' ? 100 : 200,
                backgroundColor: selectedKey === 'rectangleGreen' ? 'green' : 'red',
            } }),
        React.createElement(react_native_2.Tabs, { label: "Tabs", onTabsClick: onTabsClick, getTabId: getTabId, headersOnly: true, selectedKey: selectedKey },
            React.createElement(react_native_2.TabsItem, { headerText: "Rectangle Red", itemKey: "rectangleRed" }),
            React.createElement(react_native_2.TabsItem, { headerText: "Square Red", itemKey: "squareRed" }),
            React.createElement(react_native_2.TabsItem, { headerText: "Rectangle Green", itemKey: "rectangleGreen" }))));
};
var TabsSettingSelectedKey = function () {
    // If user wants to programmatically set the tab's selectedKey with a button example.
    var _a = React.useState('home'), selectedKey = _a[0], setSelectedKey = _a[1];
    var _b = React.useState(0), currTabItemIndex = _b[0], setCurrTabItemIndex = _b[1];
    var tabItems = ['home', 'file', 'setting'];
    var goToNextTab = function () {
        var newCurrTabItemIndex = (currTabItemIndex + 1) % 3;
        setCurrTabItemIndex(newCurrTabItemIndex);
        setSelectedKey(tabItems[newCurrTabItemIndex]);
    };
    return (React.createElement(react_native_1.View, { style: styles_1.stackStyle },
        React.createElement(react_native_2.Tabs, { label: "Tabs", selectedKey: selectedKey, isCircularNavigation: true },
            React.createElement(react_native_2.TabsItem, { headerText: "Home", itemKey: "home" },
                React.createElement(react_native_2.Text, null, "Tabs #1")),
            React.createElement(react_native_2.TabsItem, { headerText: "File", itemKey: "file" },
                React.createElement(react_native_2.Text, null, "Tabs #2")),
            React.createElement(react_native_2.TabsItem, { headerText: "Setting", itemKey: "setting" },
                React.createElement(react_native_2.Text, null, "Tabs #3"))),
        React.createElement(react_native_2.Button, { content: "View Next Tab", onClick: goToNextTab })));
};
var TabsShowHideItem = function () {
    var _a = React.useState(true), showFirstItem = _a[0], setshowFirstItem = _a[1];
    var toggleShowFirstItem = React.useCallback(function () {
        setshowFirstItem(!showFirstItem);
    }, [showFirstItem]);
    return (React.createElement(react_native_1.View, { style: styles_1.stackStyle },
        React.createElement(react_native_2.Tabs, { label: "Tabs" },
            showFirstItem && (React.createElement(react_native_2.TabsItem, { headerText: "Home", itemKey: "home" },
                React.createElement(react_native_2.Text, null, "Click the button below to show/hide this tabs item."),
                React.createElement(react_native_2.Text, null, "The selected item will not change when the number of tabs items changes."),
                React.createElement(react_native_2.Text, null, "If the selected item was removed, the new first item will be selected."))),
            React.createElement(react_native_2.TabsItem, { headerText: "File", itemKey: "file" },
                React.createElement(react_native_2.Text, null, "Tabs #2")),
            React.createElement(react_native_2.TabsItem, { headerText: "Setting", itemKey: "setting" },
                React.createElement(react_native_2.Text, null, "Tabs #3"))),
        React.createElement(react_native_2.Button, { content: "".concat(showFirstItem ? 'Hide' : 'Show', " First Tabs Item"), onClick: toggleShowFirstItem })));
};
var TabsWithFlexibility = function () {
    var _a = React.useState('home'), selectedKey = _a[0], setSelectedKey = _a[1];
    var goHomeTab = function () {
        setSelectedKey('home');
    };
    var onTabsClick = function (key) {
        setSelectedKey(key);
    };
    return (React.createElement(react_native_1.View, { style: styles_1.stackStyle },
        React.createElement(react_native_2.Tabs, { selectedKey: selectedKey, onTabsClick: onTabsClick, isCircularNavigation: true },
            React.createElement(react_native_2.TabsItem, { headerText: "Home", itemKey: "home" },
                React.createElement(react_native_2.Text, null, "Tabs #1")),
            React.createElement(react_native_2.TabsItem, { headerText: "File", itemKey: "file" },
                React.createElement(react_native_2.Text, null, "Tabs #2")),
            React.createElement(react_native_2.TabsItem, { headerText: "Setting", itemKey: "setting" },
                React.createElement(react_native_2.Text, null, "Tabs #3"))),
        React.createElement(react_native_2.Button, { content: "View Home Tab", onClick: goHomeTab })));
};
var tabsSections = [
    {
        name: 'Default Tabs',
        testID: consts_1.TABS_TESTPAGE,
        component: TabsMainTest,
    },
    {
        name: 'Tabs with disabled',
        component: DisabledTabs,
    },
    {
        name: 'Trigger onTabsClick event',
        component: TabsClickEventTest,
    },
    {
        name: 'User Custom Render',
        component: TabsChangingViews,
    },
    {
        name: 'Render Content Separately',
        component: TabsRenderSeparately,
    },
    {
        name: 'Override Selected Key',
        component: TabsSettingSelectedKey,
    },
    {
        name: 'Show/Hide Tabs item',
        component: TabsShowHideItem,
    },
    {
        name: 'More Flexibility',
        component: TabsWithFlexibility,
    },
];
var e2eSections = [
    {
        name: 'E2E Tabs Test',
        component: TabsLegacyE2ETest_1.TabsLegacyE2ETest,
    },
];
if (react_native_1.Platform.OS !== 'windows') {
    tabsSections.push({
        name: 'Count and Icon',
        component: TabsCountIcon,
    });
}
var TabsLegacyTest = 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.createElement(Test_1.Test, { name: "Tabs Legacy Test", description: description, sections: tabsSections, status: status, e2eSections: e2eSections });
};
exports.TabsLegacyTest = TabsLegacyTest;
//# sourceMappingURL=TabsLegacyTest.js.map