import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Divider } from '@fluentui-react-native/divider';
import { TabList, Tab } from '@fluentui-react-native/tablist';
import { TextV1 as Text } from '@fluentui-react-native/text';
import { Test } from '../Test';
var Header = Text.customize({ variant: 'subheaderStandard' });
var Line = Divider.customize({ paddingVertical: 4 });
var PaddedTabList = TabList.customize({
    paddingVertical: 4,
});
var styles = StyleSheet.create({
    container: {
        paddingVertical: 8,
    },
});
var TabListSizeTest = function () {
    return (React.createElement(View, { style: styles.container },
        React.createElement(Header, null, "Small"),
        React.createElement(PaddedTabList, { size: "small" },
            React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
            React.createElement(Tab, { tabKey: "world" }, "Tab 2")),
        React.createElement(Line, null),
        React.createElement(Header, null, "Medium (default)"),
        React.createElement(PaddedTabList, { size: "medium" },
            React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
            React.createElement(Tab, { tabKey: "world" }, "Tab 2")),
        React.createElement(Line, null),
        React.createElement(Header, null, "Large"),
        React.createElement(PaddedTabList, { size: "large" },
            React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
            React.createElement(Tab, { tabKey: "world" }, "Tab 2"))));
};
var TabListVerticalTest = function () {
    return (React.createElement(TabList, { vertical: true },
        React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
        React.createElement(Tab, { tabKey: "world" }, "Tab 2")));
};
var TabListAppearanceTest = function () {
    return (React.createElement(View, { style: styles.container },
        React.createElement(Header, null, "Transparent Appearance"),
        React.createElement(PaddedTabList, { appearance: "transparent" },
            React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
            React.createElement(Tab, { tabKey: "world" }, "Tab 2")),
        React.createElement(Header, null, "Subtle Appearance"),
        React.createElement(PaddedTabList, { appearance: "subtle" },
            React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
            React.createElement(Tab, { tabKey: "world" }, "Tab 2"))));
};
var TabListDisabledTest = function () {
    return (React.createElement(View, null,
        React.createElement(PaddedTabList, null,
            React.createElement(Tab, { disabled: true, tabKey: "hello" }, "Tab 1"),
            React.createElement(Tab, { tabKey: "world" }, "Tab 2")),
        React.createElement(PaddedTabList, { disabled: true },
            React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
            React.createElement(Tab, { tabKey: "world" }, "Tab 2"))));
};
var TabListIconTest = function () {
    var iconProp = {
        fontSource: {
            fontFamily: 'Arial',
            codepoint: 0x2663,
        },
    };
    return (React.createElement(TabList, null,
        React.createElement(Tab, { icon: iconProp, tabKey: "withIcon" }, "Tab Item"),
        React.createElement(Tab, { icon: iconProp, tabKey: "iconOnly" })));
};
var sections = [
    {
        name: 'Size',
        component: TabListSizeTest,
    },
    {
        name: 'Vertical',
        component: TabListVerticalTest,
    },
    {
        name: 'Appearance',
        component: TabListAppearanceTest,
    },
    {
        name: 'Disabled',
        component: TabListDisabledTest,
    },
    {
        name: 'Icon',
        component: TabListIconTest,
    },
];
export 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.createElement(Test, { name: "TabsV1 Test", description: description, sections: sections, status: status });
};
//# sourceMappingURL=TabListTest.js.map