"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabsV1Test = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var experimental_button_1 = require("@fluentui-react-native/experimental-button");
var experimental_tabs_1 = require("@fluentui-react-native/experimental-tabs");
var text_1 = require("@fluentui-react-native/text");
var TabsV1E2ETest_1 = require("./TabsV1E2ETest");
var consts_1 = require("../../../../E2E/src/TabsV1/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(experimental_tabs_1.Tabs, { label: "Tabs" },
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "Home", itemKey: "A" },
                React.createElement(text_1.TextV1, null, "Tabs #1")),
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "Files", itemKey: "B" },
                React.createElement(text_1.TextV1, null, "Tabs #2")),
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "Settings", itemKey: "C" },
                React.createElement(text_1.TextV1, null, "Tabs #3")))));
};
var DisabledTabs = function () {
    return (React.createElement(react_native_1.View, { style: styles_1.stackStyle },
        React.createElement(experimental_tabs_1.Tabs, { label: "Tabs" },
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "Home", itemKey: "A" },
                React.createElement(text_1.TextV1, null, "Tabs #1")),
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "Files", itemKey: "B", disabled: true },
                React.createElement(text_1.TextV1, null, "Tabs #2")),
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "Settings", itemKey: "C" },
                React.createElement(text_1.TextV1, null, "Tabs #3")))));
};
var TabsCountIcon = function () {
    return (React.createElement(react_native_1.View, { style: styles_1.stackStyle },
        React.createElement(experimental_tabs_1.Tabs, { label: "Tabs" },
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "Home", itemKey: "A", icon: { svgSource: iconExamples_1.svgProps, width: 20, height: 20, style: { margin: 5 } }, itemCount: 23 },
                React.createElement(text_1.TextV1, null, "Tabs #1")),
            React.createElement(experimental_tabs_1.TabsItem, { itemKey: "B", icon: { svgSource: iconExamples_1.svgProps, width: 20, height: 20 }, itemCount: 0 },
                React.createElement(text_1.TextV1, null, "Tabs #2")),
            React.createElement(experimental_tabs_1.TabsItem, { itemKey: "C", icon: { svgSource: iconExamples_1.svgProps, width: 20, height: 20 } },
                React.createElement(text_1.TextV1, null, "Tabs #3")))));
};
var TabsClickEventTest = function () {
    var _a = React.useState('home_key'), selectedKey = _a[0], setSelectedKey = _a[1];
    var onTabsClick = React.useCallback(function (key) {
        setSelectedKey(key);
    }, [setSelectedKey]);
    return (React.createElement(react_native_1.View, { style: styles_1.stackStyle },
        React.createElement(text_1.TextV1, null, 'Last onTabsClick from: ' + selectedKey),
        React.createElement(experimental_tabs_1.Tabs, { label: "Tabs", onTabsClick: onTabsClick, selectedKey: selectedKey },
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "Home", itemKey: "home_key" },
                React.createElement(text_1.TextV1, null, "Tabs #1")),
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "Files", itemKey: "files_key" },
                React.createElement(text_1.TextV1, null, "Tabs #2")),
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "Settings", itemKey: "settings_key" },
                React.createElement(text_1.TextV1, null, "Tabs #3")))));
};
var TabsChangingViews = function () {
    // If User wants to control what gets rendered example
    var _a = React.useState('home'), selectedKey = _a[0], setSelectedKey = _a[1];
    var onTabsClick = React.useCallback(function (key) {
        setSelectedKey(key);
    }, [setSelectedKey]);
    return (React.createElement(react_native_1.View, { style: styles_1.stackStyle },
        React.createElement(experimental_tabs_1.Tabs, { label: "Tabs", onTabsClick: onTabsClick, headersOnly: true, selectedKey: selectedKey },
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "Home", itemKey: "home" }),
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "File", itemKey: "file" }),
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "Settings", itemKey: "settings" })),
        React.createElement(react_native_1.View, { style: { marginVertical: 1 } },
            selectedKey == 'home' && React.createElement(text_1.TextV1, null, "Tabs #1"),
            selectedKey == 'file' && React.createElement(text_1.TextV1, null, "Tabs #2"),
            selectedKey == 'settings' && React.createElement(text_1.TextV1, null, "Tabs #3"))));
};
var TabsRenderSeparately = function () {
    var _a = React.useState('rectangleRed'), selectedKey = _a[0], setSelectedKey = _a[1];
    var onTabsClick = React.useCallback(function (key) {
        setSelectedKey(key);
    }, [setSelectedKey]);
    var getTabId = function (key) {
        return "ShapeColorPivot_".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(experimental_tabs_1.Tabs, { label: "Tabs", onTabsClick: onTabsClick, getTabId: getTabId, headersOnly: true, selectedKey: selectedKey },
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "Rectangle Red", itemKey: "rectangleRed" }),
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "Square Red", itemKey: "squareRed" }),
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "Rectangle Green", itemKey: "rectangleGreen" }))));
};
var TabsSettingSelectedKey = function () {
    // If user wants to programmatically set the selectedKey to control the view
    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 = React.useCallback(function () {
        var newCurrTabItemIndex = (currTabItemIndex + 1) % 3;
        setCurrTabItemIndex(newCurrTabItemIndex);
        setSelectedKey(tabItems[newCurrTabItemIndex]);
    }, [currTabItemIndex]);
    return (React.createElement(react_native_1.View, { style: styles_1.stackStyle },
        React.createElement(experimental_tabs_1.Tabs, { label: "Tabs", selectedKey: selectedKey, isCircularNavigation: true },
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "Home", itemKey: "home" },
                React.createElement(text_1.TextV1, null, "Tabs #1")),
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "File", itemKey: "file" },
                React.createElement(text_1.TextV1, null, "Tabs #2")),
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "Setting", itemKey: "setting" },
                React.createElement(text_1.TextV1, null, "Tabs #3"))),
        React.createElement(experimental_button_1.Button, { onClick: goToNextTab }, "View Next Tab")));
};
var TabsWithFlexibility = function () {
    var _a = React.useState('home'), selectedKey = _a[0], setSelectedKey = _a[1];
    var goHomeTab = React.useCallback(function () {
        setSelectedKey('home');
    }, [setSelectedKey]);
    var onTabsClick = React.useCallback(function (key) {
        setSelectedKey(key);
    }, [setSelectedKey]);
    return (React.createElement(react_native_1.View, { style: styles_1.stackStyle },
        React.createElement(experimental_tabs_1.Tabs, { selectedKey: selectedKey, onTabsClick: onTabsClick, isCircularNavigation: true },
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "Home", itemKey: "home" },
                React.createElement(text_1.TextV1, null, "Tabs #1")),
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "File", itemKey: "file" },
                React.createElement(text_1.TextV1, null, "Tabs #2")),
            React.createElement(experimental_tabs_1.TabsItem, { headerText: "Setting", itemKey: "setting" },
                React.createElement(text_1.TextV1, null, "Tabs #3"))),
        React.createElement(experimental_button_1.Button, { onClick: goHomeTab }, "View Home Tab")));
};
var tabsSections = [
    {
        name: 'Default Tabs',
        testID: consts_1.TABSV1_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: 'More Flexibility',
        component: TabsWithFlexibility,
    },
];
if (react_native_1.Platform.OS !== 'windows') {
    tabsSections.push({
        name: 'Count and Icon',
        component: TabsCountIcon,
    });
}
var e2eSections = [
    {
        name: 'E2E Testing TabsV1',
        component: TabsV1E2ETest_1.TabsV1E2ETest,
    },
];
var TabsV1Test = function () {
    var status = {
        win32Status: 'Production',
        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: "TabsV1 Test", description: description, sections: tabsSections, status: status, e2eSections: e2eSections });
};
exports.TabsV1Test = TabsV1Test;
//# sourceMappingURL=TabsV1Test.js.map