"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ShadowWithDifferentPropsTestSection = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_native_1 = require("react-native");
const react_native_2 = require("@fluentui/react-native");
const experimental_shadow_1 = require("@fluentui-react-native/experimental-shadow");
const framework_1 = require("@fluentui-react-native/framework");
const framework_base_1 = require("@fluentui-react-native/framework-base");
const themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
const ShadowTestPageStyles_1 = require("./ShadowTestPageStyles");
const getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)((t) => {
    const defaultShadowTestBoxPropsWithoutSpacing = {
        maxWidth: 732,
        minHeight: 64,
        ...(0, ShadowTestPageStyles_1.shadowTestPageStyles)(t).backgroundColor,
    };
    const marginTestProps = {
        marginVertical: 16,
        marginHorizontal: 32,
    };
    const paddingTestProps = {
        padding: 20,
    };
    return {
        headerTextPadding: {
            padding: 16,
        },
        defaultShadowTestBoxPropsWithoutSpacing,
        defaultShadowTestBoxProps: {
            ...defaultShadowTestBoxPropsWithoutSpacing,
            ...marginTestProps,
            ...paddingTestProps,
        },
        marginTestProps,
        paddingTestProps,
        borderRadiusTestProps: {
            borderRadius: 8,
        },
        borderWidthTestProps: {
            borderWidth: 2,
            borderColor: 'black',
        },
        offsetTestProps: { start: 10 },
        alignItemsTestProps: { alignItems: 'flex-start' },
        flexDirectionTestProps: { flexDirection: 'row' },
        flexWrapTestProps: { flexWrap: 'wrap' },
    };
});
const ShadowWithDifferentPropsTestSection = () => {
    const theme = (0, framework_1.useFluentTheme)();
    const themedStyles = getThemedStyles(theme);
    return (React.createElement(react_native_1.View, { style: (0, ShadowTestPageStyles_1.shadowTestPageStyles)(theme).backgroundColor },
        React.createElement(react_native_2.Text, { style: themedStyles.headerTextPadding }, "The following tests have a Shadow16 set on a child view that has some specific props."),
        React.createElement(react_native_1.View, null,
            React.createElement(experimental_shadow_1.Shadow, { shadowToken: theme.shadows.shadow16 },
                React.createElement(react_native_1.View, { style: themedStyles.defaultShadowTestBoxProps },
                    React.createElement(react_native_2.Text, { variant: "bodySemibold" }, "padding: 20, marginVertical: 16, marginHorizontal: 32"))),
            React.createElement(experimental_shadow_1.Shadow, { shadowToken: theme.shadows.shadow16 },
                React.createElement(react_native_1.View, { style: (0, framework_base_1.mergeStyles)(themedStyles.defaultShadowTestBoxPropsWithoutSpacing, themedStyles.paddingTestProps) },
                    React.createElement(react_native_2.Text, { variant: "bodySemibold" }, "padding only"))),
            React.createElement(experimental_shadow_1.Shadow, { shadowToken: theme.shadows.shadow16 },
                React.createElement(react_native_1.View, { style: (0, framework_base_1.mergeStyles)(themedStyles.defaultShadowTestBoxPropsWithoutSpacing, themedStyles.marginTestProps) },
                    React.createElement(react_native_2.Text, { variant: "bodySemibold" }, "margins only"))),
            React.createElement(experimental_shadow_1.Shadow, { shadowToken: theme.shadows.shadow16 },
                React.createElement(react_native_1.View, { style: (0, framework_base_1.mergeStyles)(themedStyles.defaultShadowTestBoxProps, themedStyles.borderRadiusTestProps) },
                    React.createElement(react_native_2.Text, { variant: "bodySemibold" }, "borderRadius: 8"))),
            React.createElement(experimental_shadow_1.Shadow, { shadowToken: theme.shadows.shadow16 },
                React.createElement(react_native_1.View, { style: (0, framework_base_1.mergeStyles)(themedStyles.defaultShadowTestBoxProps, themedStyles.borderRadiusTestProps, themedStyles.borderWidthTestProps) },
                    React.createElement(react_native_2.Text, { variant: "bodySemibold" }, "borderWidth: 2"))),
            React.createElement(experimental_shadow_1.Shadow, { shadowToken: theme.shadows.shadow16 },
                React.createElement(react_native_1.View, { style: (0, framework_base_1.mergeStyles)(themedStyles.defaultShadowTestBoxProps, themedStyles.offsetTestProps) },
                    React.createElement(react_native_2.Text, { variant: "bodySemibold" }, "start: 10"))),
            React.createElement(experimental_shadow_1.Shadow, { shadowToken: theme.shadows.shadow16 },
                React.createElement(react_native_1.View, { style: (0, framework_base_1.mergeStyles)(themedStyles.defaultShadowTestBoxProps, themedStyles.alignItemsTestProps) },
                    React.createElement(react_native_2.Text, { variant: "bodySemibold" }, "alignItems: flex-start"))),
            React.createElement(experimental_shadow_1.Shadow, { shadowToken: theme.shadows.shadow16 },
                React.createElement(react_native_1.View, { style: (0, framework_base_1.mergeStyles)(themedStyles.defaultShadowTestBoxProps, themedStyles.flexDirectionTestProps) },
                    React.createElement(react_native_2.Text, { variant: "bodySemibold" }, "flexDirection: row"))),
            React.createElement(experimental_shadow_1.Shadow, { shadowToken: theme.shadows.shadow16 },
                React.createElement(react_native_1.View, { style: (0, framework_base_1.mergeStyles)(themedStyles.defaultShadowTestBoxProps, themedStyles.flexWrapTestProps) },
                    React.createElement(react_native_2.Text, { variant: "bodySemibold" }, "flexWrap: wrap"))))));
};
exports.ShadowWithDifferentPropsTestSection = ShadowWithDifferentPropsTestSection;
//# sourceMappingURL=ShadowWithDifferentPropsTestSection.js.map