import * as React from 'react';
import { View } from 'react-native';
import { Text } from '@fluentui/react-native';
import { Shadow, getShadowTokenStyleSet } from '@fluentui-react-native/experimental-shadow';
import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework';
import { useTheme } from '@fluentui-react-native/theme-types';
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
import { shadowTestPageStyles } from './ShadowTestPageStyles';
const getThemedStyles = themedStyleSheet((t) => {
    return {
        shadowTestBox: {
            maxWidth: 732,
            minHeight: 64,
            borderRadius: 8,
            padding: 20,
            marginVertical: 16,
            marginHorizontal: 32,
        },
        defaultBackground: shadowTestPageStyles(t).backgroundColor,
        brandedBackground: {
            backgroundColor: t.colors.brandedBackground,
        },
    };
});
const ShadowTestBox = (props) => {
    const theme = useTheme();
    const themedStyles = getThemedStyles(theme);
    const backgroundColor = props.isBrand ? themedStyles.brandedBackground : themedStyles.defaultBackground;
    const textColor = props.isBrand ? theme.colors.primaryButtonText : theme.colors.bodyText;
    return (React.createElement(Shadow, { shadowToken: props.shadowToken },
        React.createElement(View, { style: mergeStyles(themedStyles.shadowTestBox, backgroundColor) },
            React.createElement(Text, { variant: "bodySemibold", color: textColor }, props.shadowDepthText),
            React.createElement(Text, { color: textColor }, getShadowDescription(props.shadowToken)))));
};
export const ShadowDepthTestSection = () => {
    const theme = useFluentTheme();
    const backgroundViewStyle = shadowTestPageStyles(theme).backgroundColor;
    return (React.createElement(View, { style: backgroundViewStyle },
        React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 2", shadowToken: theme.shadows.shadow2 }),
        React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 4", shadowToken: theme.shadows.shadow4 }),
        React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 8", shadowToken: theme.shadows.shadow8 }),
        React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 16", shadowToken: theme.shadows.shadow16 }),
        React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 28", shadowToken: theme.shadows.shadow28 }),
        React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 64", shadowToken: theme.shadows.shadow64 }),
        React.createElement(ShadowTestBox, { shadowDepthText: "Brand Shadow 2", shadowToken: theme.shadows.shadow2brand, isBrand: true }),
        React.createElement(ShadowTestBox, { shadowDepthText: "Brand Shadow 4", shadowToken: theme.shadows.shadow4brand, isBrand: true }),
        React.createElement(ShadowTestBox, { shadowDepthText: "Brand Shadow 8", shadowToken: theme.shadows.shadow8brand, isBrand: true }),
        React.createElement(ShadowTestBox, { shadowDepthText: "Brand Shadow 16", shadowToken: theme.shadows.shadow16brand, isBrand: true }),
        React.createElement(ShadowTestBox, { shadowDepthText: "Brand Shadow 28", shadowToken: theme.shadows.shadow28brand, isBrand: true }),
        React.createElement(ShadowTestBox, { shadowDepthText: "Brand Shadow 64", shadowToken: theme.shadows.shadow64brand, isBrand: true })));
};
function getShadowDescription(shadowToken) {
    const shadowStyle = getShadowTokenStyleSet(shadowToken);
    return ('\nAmbient: ' +
        JSON.stringify(shadowStyle.ambient, undefined, ' ').split('\n').join('').replace(/['"]+/g, '') +
        '\n\nKey: ' +
        JSON.stringify(shadowStyle.key, undefined, ' ').split('\n').join('').replace(/['"]+/g, ''));
}
//# sourceMappingURL=ShadowDepthTestSection.js.map