import * as React from 'react';
import { View, Platform } from 'react-native';
import { Button } from '@fluentui-react-native/experimental-button';
import { Tabs, TabsItem } from '@fluentui-react-native/experimental-tabs';
import { TextV1 as Text } from '@fluentui-react-native/text';
import { TabsV1E2ETest } from './TabsV1E2ETest';
import { TABSV1_TESTPAGE } from '../../../../E2E/src/TabsV1/consts';
import { svgProps } from '../Common/iconExamples';
import { stackStyle } from '../Common/styles';
import { Test } from '../Test';
var TabsMainTest = function () {
    return (React.createElement(View, { style: stackStyle },
        React.createElement(Tabs, { label: "Tabs" },
            React.createElement(TabsItem, { headerText: "Home", itemKey: "A" },
                React.createElement(Text, null, "Tabs #1")),
            React.createElement(TabsItem, { headerText: "Files", itemKey: "B" },
                React.createElement(Text, null, "Tabs #2")),
            React.createElement(TabsItem, { headerText: "Settings", itemKey: "C" },
                React.createElement(Text, null, "Tabs #3")))));
};
var DisabledTabs = function () {
    return (React.createElement(View, { style: stackStyle },
        React.createElement(Tabs, { label: "Tabs" },
            React.createElement(TabsItem, { headerText: "Home", itemKey: "A" },
                React.createElement(Text, null, "Tabs #1")),
            React.createElement(TabsItem, { headerText: "Files", itemKey: "B", disabled: true },
                React.createElement(Text, null, "Tabs #2")),
            React.createElement(TabsItem, { headerText: "Settings", itemKey: "C" },
                React.createElement(Text, null, "Tabs #3")))));
};
var TabsCountIcon = function () {
    return (React.createElement(View, { style: stackStyle },
        React.createElement(Tabs, { label: "Tabs" },
            React.createElement(TabsItem, { headerText: "Home", itemKey: "A", icon: { svgSource: svgProps, width: 20, height: 20, style: { margin: 5 } }, itemCount: 23 },
                React.createElement(Text, null, "Tabs #1")),
            React.createElement(TabsItem, { itemKey: "B", icon: { svgSource: svgProps, width: 20, height: 20 }, itemCount: 0 },
                React.createElement(Text, null, "Tabs #2")),
            React.createElement(TabsItem, { itemKey: "C", icon: { svgSource: svgProps, width: 20, height: 20 } },
                React.createElement(Text, 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(View, { style: stackStyle },
        React.createElement(Text, null, 'Last onTabsClick from: ' + selectedKey),
        React.createElement(Tabs, { label: "Tabs", onTabsClick: onTabsClick, selectedKey: selectedKey },
            React.createElement(TabsItem, { headerText: "Home", itemKey: "home_key" },
                React.createElement(Text, null, "Tabs #1")),
            React.createElement(TabsItem, { headerText: "Files", itemKey: "files_key" },
                React.createElement(Text, null, "Tabs #2")),
            React.createElement(TabsItem, { headerText: "Settings", itemKey: "settings_key" },
                React.createElement(Text, 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(View, { style: stackStyle },
        React.createElement(Tabs, { label: "Tabs", onTabsClick: onTabsClick, headersOnly: true, selectedKey: selectedKey },
            React.createElement(TabsItem, { headerText: "Home", itemKey: "home" }),
            React.createElement(TabsItem, { headerText: "File", itemKey: "file" }),
            React.createElement(TabsItem, { headerText: "Settings", itemKey: "settings" })),
        React.createElement(View, { style: { marginVertical: 1 } },
            selectedKey == 'home' && React.createElement(Text, null, "Tabs #1"),
            selectedKey == 'file' && React.createElement(Text, null, "Tabs #2"),
            selectedKey == 'settings' && React.createElement(Text, 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(View, { style: stackStyle },
        React.createElement(View, { accessible: true, focusable: true, accessibilityLabel: getTabId(selectedKey), style: {
                width: 100,
                height: selectedKey === 'squareRed' ? 100 : 200,
                backgroundColor: selectedKey === 'rectangleGreen' ? 'green' : 'red',
            } }),
        React.createElement(Tabs, { label: "Tabs", onTabsClick: onTabsClick, getTabId: getTabId, headersOnly: true, selectedKey: selectedKey },
            React.createElement(TabsItem, { headerText: "Rectangle Red", itemKey: "rectangleRed" }),
            React.createElement(TabsItem, { headerText: "Square Red", itemKey: "squareRed" }),
            React.createElement(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(View, { style: stackStyle },
        React.createElement(Tabs, { label: "Tabs", selectedKey: selectedKey, isCircularNavigation: true },
            React.createElement(TabsItem, { headerText: "Home", itemKey: "home" },
                React.createElement(Text, null, "Tabs #1")),
            React.createElement(TabsItem, { headerText: "File", itemKey: "file" },
                React.createElement(Text, null, "Tabs #2")),
            React.createElement(TabsItem, { headerText: "Setting", itemKey: "setting" },
                React.createElement(Text, null, "Tabs #3"))),
        React.createElement(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(View, { style: stackStyle },
        React.createElement(Tabs, { selectedKey: selectedKey, onTabsClick: onTabsClick, isCircularNavigation: true },
            React.createElement(TabsItem, { headerText: "Home", itemKey: "home" },
                React.createElement(Text, null, "Tabs #1")),
            React.createElement(TabsItem, { headerText: "File", itemKey: "file" },
                React.createElement(Text, null, "Tabs #2")),
            React.createElement(TabsItem, { headerText: "Setting", itemKey: "setting" },
                React.createElement(Text, null, "Tabs #3"))),
        React.createElement(Button, { onClick: goHomeTab }, "View Home Tab")));
};
var tabsSections = [
    {
        name: 'Default Tabs',
        testID: 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 (Platform.OS !== 'windows') {
    tabsSections.push({
        name: 'Count and Icon',
        component: TabsCountIcon,
    });
}
var e2eSections = [
    {
        name: 'E2E Testing TabsV1',
        component: TabsV1E2ETest,
    },
];
export 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, { name: "TabsV1 Test", description: description, sections: tabsSections, status: status, e2eSections: e2eSections });
};
//# sourceMappingURL=TabsV1Test.js.map