"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DividerTest = exports.CustomDividers = exports.DividersWithIcons = exports.DividersWithAppearance = exports.VerticalDividers = exports.HorizontalDividers = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_native_1 = require("react-native");
const divider_1 = require("@fluentui-react-native/divider");
const e2e_testing_1 = require("@fluentui-react-native/e2e-testing");
const stack_1 = require("@fluentui-react-native/stack");
const text_1 = require("@fluentui-react-native/text");
const MobileDividerTest_1 = require("./MobileDividerTest");
const test_svg_1 = tslib_1.__importDefault(require("../../../assets/test.svg"));
const styles_1 = require("../Common/styles");
const Test_1 = require("../Test");
const isMobile = react_native_1.Platform.OS === 'android' || react_native_1.Platform.OS === 'ios';
const PaddedDivider = divider_1.Divider.customize({ paddingVertical: 4, thickness: 2 });
const CustomText = text_1.TextV1.customize({ margin: 8 });
const ColoredDivider = divider_1.Divider.customize({ contentColor: '#bf5700', lineColor: '#bf5700' });
const ThickDivider = divider_1.Divider.customize({ thickness: 3 });
const TextVariantDivider = divider_1.Divider.customize({ variant: 'subtitle2Strong' });
const StyledTextDivider = divider_1.Divider.customize({ fontSize: 10, fontStyle: 'italic', textDecorationLine: 'underline' });
const dividerTestStyles = react_native_1.StyleSheet.create({
    verticalDividerContainer: {
        marginVertical: 8,
        flexDirection: 'row',
        justifyContent: 'space-evenly',
    },
    horizontalDividerContainer: {
        height: 120,
        flexDirection: 'column',
        justifyContent: 'space-evenly',
    },
});
const HorizontalDividers = () => (React.createElement(stack_1.Stack, { style: styles_1.commonTestStyles.stack },
    React.createElement(CustomText, null, "Regular divider with no content below."),
    React.createElement(divider_1.Divider, null),
    React.createElement(CustomText, null, "Regular divider with no content above."),
    React.createElement(divider_1.Divider, null, "Divider with text content."),
    React.createElement(divider_1.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")));
exports.HorizontalDividers = HorizontalDividers;
const VerticalDividers = () => (React.createElement(stack_1.Stack, { style: styles_1.commonTestStyles.stack },
    React.createElement(react_native_1.View, { style: dividerTestStyles.verticalDividerContainer },
        React.createElement(CustomText, null,
            "Regular divider ",
            '->'),
        React.createElement(divider_1.Divider, { vertical: true }),
        React.createElement(CustomText, null,
            "Divider with an inset ",
            '->'),
        React.createElement(divider_1.Divider, { vertical: true, insetSize: 16 }),
        React.createElement(PaddedDivider, { vertical: true }, "Divider with text"),
        React.createElement(divider_1.Divider, { vertical: true, alignContent: "start" }, "Start-aligned divider"),
        React.createElement(divider_1.Divider, { vertical: true, alignContent: "end" }, "End-aligned divider")),
    React.createElement(divider_1.Divider, null),
    React.createElement(react_native_1.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_1.Divider, { vertical: true }),
        React.createElement(CustomText, null, "The divider to the left of me should have a min height of 20px"))));
exports.VerticalDividers = VerticalDividers;
const DividersWithAppearance = () => (React.createElement(stack_1.Stack, { style: styles_1.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")));
exports.DividersWithAppearance = DividersWithAppearance;
const DividersWithIcons = () => (React.createElement(stack_1.Stack, { style: styles_1.commonTestStyles.stack },
    React.createElement(divider_1.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."),
    react_native_1.Platform.OS !== 'windows' && (React.createElement(divider_1.Divider, { appearance: "brand", icon: { svgSource: { viewBox: '0 0 500 500', src: test_svg_1.default, width: 32, height: 32 } } }))));
exports.DividersWithIcons = DividersWithIcons;
const CustomDividers = () => (React.createElement(stack_1.Stack, { style: styles_1.commonTestStyles.stack },
    React.createElement(react_native_1.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(react_native_1.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"))));
exports.CustomDividers = CustomDividers;
const dividerSections = [
    {
        name: 'Horizontal Dividers',
        testID: e2e_testing_1.DIVIDER_TESTPAGE,
        component: exports.HorizontalDividers,
    },
    {
        name: 'Vertical Dividers',
        component: exports.VerticalDividers,
    },
    {
        name: 'Divider Appearances',
        component: exports.DividersWithAppearance,
    },
    {
        name: 'Custom Dividers',
        component: exports.CustomDividers,
    },
    {
        name: 'Dividers with Icons',
        component: exports.DividersWithIcons,
    },
];
const mobileDividerSections = [
    {
        name: 'Mobile Dividers',
        testID: e2e_testing_1.DIVIDER_TESTPAGE,
        component: MobileDividerTest_1.MobileDividers,
    },
    {
        name: 'Customised Mobile Dividers',
        testID: e2e_testing_1.DIVIDER_TESTPAGE,
        component: MobileDividerTest_1.CustomisedMobileDividers,
    },
];
const DividerTest = () => {
    const status = {
        win32Status: 'Production',
        uwpStatus: 'Backlog',
        iosStatus: 'Production',
        macosStatus: 'Production',
        androidStatus: 'Production',
    };
    const description = 'A Divider is a visual separator that can contain content (text or an icon). Dividers can be horizontal or vertical';
    const mobileDescription = 'A Divider is a visual horizontal separator that seperates content/sections';
    const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Divider/SPEC.md';
    return (React.createElement(Test_1.Test, { name: "Divider Test", description: isMobile ? mobileDescription : description, sections: isMobile ? mobileDividerSections : dividerSections, spec: spec, status: status }));
};
exports.DividerTest = DividerTest;
//# sourceMappingURL=DividerTest.js.map