import { __assign } from "tslib";
import * as React from 'react';
import { View } from 'react-native';
import { Text } from '@fluentui/react-native';
import { Shadow } from '@fluentui-react-native/experimental-shadow';
import { useFluentTheme } from '@fluentui-react-native/framework';
import { mergeStyles } from '@fluentui-react-native/merge-props';
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
import { shadowTestPageStyles } from './ShadowTestPageStyles';
var getThemedStyles = themedStyleSheet(function (t) {
    var defaultShadowTestBoxPropsWithoutSpacing = __assign({ maxWidth: 732, minHeight: 64 }, shadowTestPageStyles(t).backgroundColor);
    var marginTestProps = {
        marginVertical: 16,
        marginHorizontal: 32,
    };
    var paddingTestProps = {
        padding: 20,
    };
    return {
        headerTextPadding: {
            padding: 16,
        },
        defaultShadowTestBoxPropsWithoutSpacing: defaultShadowTestBoxPropsWithoutSpacing,
        defaultShadowTestBoxProps: __assign(__assign(__assign({}, defaultShadowTestBoxPropsWithoutSpacing), marginTestProps), paddingTestProps),
        marginTestProps: marginTestProps,
        paddingTestProps: paddingTestProps,
        borderRadiusTestProps: {
            borderRadius: 8,
        },
        borderWidthTestProps: {
            borderWidth: 2,
            borderColor: 'black',
        },
        offsetTestProps: { start: 10 },
        alignItemsTestProps: { alignItems: 'flex-start' },
        flexDirectionTestProps: { flexDirection: 'row' },
        flexWrapTestProps: { flexWrap: 'wrap' },
    };
});
export var ShadowWithDifferentPropsTestSection = function () {
    var theme = useFluentTheme();
    var themedStyles = getThemedStyles(theme);
    return (React.createElement(View, { style: shadowTestPageStyles(theme).backgroundColor },
        React.createElement(Text, { style: themedStyles.headerTextPadding }, "The following tests have a Shadow16 set on a child view that has some specific props."),
        React.createElement(View, null,
            React.createElement(Shadow, { shadowToken: theme.shadows.shadow16 },
                React.createElement(View, { style: themedStyles.defaultShadowTestBoxProps },
                    React.createElement(Text, { variant: "bodySemibold" }, "padding: 20, marginVertical: 16, marginHorizontal: 32"))),
            React.createElement(Shadow, { shadowToken: theme.shadows.shadow16 },
                React.createElement(View, { style: mergeStyles(themedStyles.defaultShadowTestBoxPropsWithoutSpacing, themedStyles.paddingTestProps) },
                    React.createElement(Text, { variant: "bodySemibold" }, "padding only"))),
            React.createElement(Shadow, { shadowToken: theme.shadows.shadow16 },
                React.createElement(View, { style: mergeStyles(themedStyles.defaultShadowTestBoxPropsWithoutSpacing, themedStyles.marginTestProps) },
                    React.createElement(Text, { variant: "bodySemibold" }, "margins only"))),
            React.createElement(Shadow, { shadowToken: theme.shadows.shadow16 },
                React.createElement(View, { style: mergeStyles(themedStyles.defaultShadowTestBoxProps, themedStyles.borderRadiusTestProps) },
                    React.createElement(Text, { variant: "bodySemibold" }, "borderRadius: 8"))),
            React.createElement(Shadow, { shadowToken: theme.shadows.shadow16 },
                React.createElement(View, { style: mergeStyles(themedStyles.defaultShadowTestBoxProps, themedStyles.borderRadiusTestProps, themedStyles.borderWidthTestProps) },
                    React.createElement(Text, { variant: "bodySemibold" }, "borderWidth: 2"))),
            React.createElement(Shadow, { shadowToken: theme.shadows.shadow16 },
                React.createElement(View, { style: mergeStyles(themedStyles.defaultShadowTestBoxProps, themedStyles.offsetTestProps) },
                    React.createElement(Text, { variant: "bodySemibold" }, "start: 10"))),
            React.createElement(Shadow, { shadowToken: theme.shadows.shadow16 },
                React.createElement(View, { style: mergeStyles(themedStyles.defaultShadowTestBoxProps, themedStyles.alignItemsTestProps) },
                    React.createElement(Text, { variant: "bodySemibold" }, "alignItems: flex-start"))),
            React.createElement(Shadow, { shadowToken: theme.shadows.shadow16 },
                React.createElement(View, { style: mergeStyles(themedStyles.defaultShadowTestBoxProps, themedStyles.flexDirectionTestProps) },
                    React.createElement(Text, { variant: "bodySemibold" }, "flexDirection: row"))),
            React.createElement(Shadow, { shadowToken: theme.shadows.shadow16 },
                React.createElement(View, { style: mergeStyles(themedStyles.defaultShadowTestBoxProps, themedStyles.flexWrapTestProps) },
                    React.createElement(Text, { variant: "bodySemibold" }, "flexWrap: wrap"))))));
};
//# sourceMappingURL=ShadowWithDifferentPropsTestSection.js.map