import * as React from 'react';
import { Platform, StyleSheet, View } from 'react-native';
import { Divider } from '@fluentui-react-native/divider';
import { Stack } from '@fluentui-react-native/stack';
import { TextV1 as Text } from '@fluentui-react-native/text';
import { CustomisedMobileDividers, MobileDividers } from './MobileDividerTest';
import { DIVIDER_TESTPAGE } from '../../../../E2E/src/Divider/consts';
import TestSvg from '../../../assets/test.svg';
import { commonTestStyles } from '../Common/styles';
import { Test } from '../Test';
var isMobile = Platform.OS === 'android' || Platform.OS === 'ios';
var PaddedDivider = Divider.customize({ paddingVertical: 4, thickness: 2 });
var CustomText = Text.customize({ margin: 8 });
var ColoredDivider = Divider.customize({ contentColor: '#bf5700', lineColor: '#bf5700' });
var ThickDivider = Divider.customize({ thickness: 3 });
var TextVariantDivider = Divider.customize({ variant: 'subtitle2Strong' });
var StyledTextDivider = Divider.customize({ fontSize: 10, fontStyle: 'italic', textDecorationLine: 'underline' });
var dividerTestStyles = StyleSheet.create({
    verticalDividerContainer: {
        marginVertical: 8,
        flexDirection: 'row',
        justifyContent: 'space-evenly',
    },
    horizontalDividerContainer: {
        height: 120,
        flexDirection: 'column',
        justifyContent: 'space-evenly',
    },
});
export var HorizontalDividers = function () { return (React.createElement(Stack, { style: commonTestStyles.stack },
    React.createElement(CustomText, null, "Regular divider with no content below."),
    React.createElement(Divider, null),
    React.createElement(CustomText, null, "Regular divider with no content above."),
    React.createElement(Divider, null, "Divider with text content."),
    React.createElement(Divider, { insetSize: 16 }, "Divider with text + inset."),
    React.createElement(PaddedDivider, { alignContent: "start" }, "I am a start-aligned divider"),
    React.createElement(PaddedDivider, { alignContent: "end" }, "I am a end-aligned divider"))); };
export var VerticalDividers = function () { return (React.createElement(Stack, { style: commonTestStyles.stack },
    React.createElement(View, { style: dividerTestStyles.verticalDividerContainer },
        React.createElement(CustomText, null,
            "Regular divider ",
            '->'),
        React.createElement(Divider, { vertical: true }),
        React.createElement(CustomText, null,
            "Divider with an inset ",
            '->'),
        React.createElement(Divider, { vertical: true, insetSize: 16 }),
        React.createElement(PaddedDivider, { vertical: true }, "Divider with text"),
        React.createElement(Divider, { vertical: true, alignContent: "start" }, "Start-aligned divider"),
        React.createElement(Divider, { vertical: true, alignContent: "end" }, "End-aligned divider")),
    React.createElement(Divider, null),
    React.createElement(View, { style: dividerTestStyles.verticalDividerContainer },
        React.createElement(CustomText, null, "The divider to the right of me should have a min height of 20px"),
        React.createElement(Divider, { vertical: true }),
        React.createElement(CustomText, null, "The divider to the left of me should have a min height of 20px")))); };
export var DividersWithAppearance = function () { return (React.createElement(Stack, { style: commonTestStyles.stack },
    React.createElement(PaddedDivider, { appearance: "default" }, "Default divider"),
    React.createElement(PaddedDivider, { appearance: "subtle" }, "Subtle divider"),
    React.createElement(PaddedDivider, { appearance: "brand" }, "Branded divider"),
    React.createElement(PaddedDivider, { appearance: "strong" }, "Strong divider"))); };
export var DividersWithIcons = function () { return (React.createElement(Stack, { style: commonTestStyles.stack },
    React.createElement(Divider, { appearance: "brand", icon: { fontSource: { fontFamily: 'Arial', codepoint: 0x2663, fontSize: 32 } } }),
    React.createElement(CustomText, { align: "center" }, "Above is a branded Divider with a font icon as content. Below me is a branded divider with an svg icon as content - this will not show on UWP."),
    Platform.OS !== 'windows' && (React.createElement(Divider, { appearance: "brand", icon: { svgSource: { viewBox: '0 0 500 500', src: TestSvg, width: 32, height: 32 } } })))); };
export var CustomDividers = function () { return (React.createElement(Stack, { style: commonTestStyles.stack },
    React.createElement(View, { style: dividerTestStyles.horizontalDividerContainer },
        React.createElement(ColoredDivider, null, "Divider with color"),
        React.createElement(ThickDivider, null, "Divider with thickness"),
        React.createElement(TextVariantDivider, null, "Divider with text variant"),
        React.createElement(StyledTextDivider, null, "Divider with text styling")),
    React.createElement(View, { style: dividerTestStyles.verticalDividerContainer },
        React.createElement(ColoredDivider, { vertical: true }, "Divider with color"),
        React.createElement(ThickDivider, { vertical: true }, "Divider with thickness"),
        React.createElement(TextVariantDivider, { vertical: true }, "Divider with text variant"),
        React.createElement(StyledTextDivider, { vertical: true }, "Divider with text styling")))); };
var dividerSections = [
    {
        name: 'Horizontal Dividers',
        testID: DIVIDER_TESTPAGE,
        component: HorizontalDividers,
    },
    {
        name: 'Vertical Dividers',
        component: VerticalDividers,
    },
    {
        name: 'Divider Appearances',
        component: DividersWithAppearance,
    },
    {
        name: 'Custom Dividers',
        component: CustomDividers,
    },
    {
        name: 'Dividers with Icons',
        component: DividersWithIcons,
    },
];
var mobileDividerSections = [
    {
        name: 'Mobile Dividers',
        testID: DIVIDER_TESTPAGE,
        component: MobileDividers,
    },
    {
        name: 'Customised Mobile Dividers',
        testID: DIVIDER_TESTPAGE,
        component: CustomisedMobileDividers,
    },
];
export var DividerTest = function () {
    var status = {
        win32Status: 'Experimental',
        uwpStatus: 'Backlog',
        iosStatus: 'Experimental',
        macosStatus: 'Backlog',
        androidStatus: 'Experimental',
    };
    var description = 'A Divider is a visual separator that can contain content (text or an icon). Dividers can be horizontal or vertical';
    var mobileDescription = 'A Divider is a visual horizontal separator that seperates content/sections';
    var spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Divider/SPEC.md';
    return (React.createElement(Test, { name: "Divider Test", description: isMobile ? mobileDescription : description, sections: isMobile ? mobileDividerSections : dividerSections, spec: spec, status: status }));
};
//# sourceMappingURL=DividerTest.js.map