"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ShadowDepthTestSection = 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 theme_types_1 = require("@fluentui-react-native/theme-types");
const themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
const ShadowTestPageStyles_1 = require("./ShadowTestPageStyles");
const getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)((t) => {
    return {
        shadowTestBox: {
            maxWidth: 732,
            minHeight: 64,
            borderRadius: 8,
            padding: 20,
            marginVertical: 16,
            marginHorizontal: 32,
        },
        defaultBackground: (0, ShadowTestPageStyles_1.shadowTestPageStyles)(t).backgroundColor,
        brandedBackground: {
            backgroundColor: t.colors.brandedBackground,
        },
    };
});
const ShadowTestBox = (props) => {
    const theme = (0, theme_types_1.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(experimental_shadow_1.Shadow, { shadowToken: props.shadowToken },
        React.createElement(react_native_1.View, { style: (0, framework_1.mergeStyles)(themedStyles.shadowTestBox, backgroundColor) },
            React.createElement(react_native_2.Text, { variant: "bodySemibold", color: textColor }, props.shadowDepthText),
            React.createElement(react_native_2.Text, { color: textColor }, getShadowDescription(props.shadowToken)))));
};
const ShadowDepthTestSection = () => {
    const theme = (0, framework_1.useFluentTheme)();
    const backgroundViewStyle = (0, ShadowTestPageStyles_1.shadowTestPageStyles)(theme).backgroundColor;
    return (React.createElement(react_native_1.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 })));
};
exports.ShadowDepthTestSection = ShadowDepthTestSection;
function getShadowDescription(shadowToken) {
    const shadowStyle = (0, experimental_shadow_1.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