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