"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StrokeWidthTest = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var react_native_2 = require("@fluentui/react-native");
var framework_1 = require("@fluentui-react-native/framework");
var stack_1 = require("@fluentui-react-native/stack");
var theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
var themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
var theming_utils_1 = require("@fluentui-react-native/theming-utils");
var consts_1 = require("../../../../E2E/src/StrokeWidthTokens/consts");
var styles_1 = require("../Common/styles");
var Test_1 = require("../Test");
var getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)(function (t) {
    var isLightMode = (0, theming_utils_1.getCurrentAppearance)(t.host.appearance, 'light') === 'light';
    return {
        root: {
            paddingBottom: 16,
        },
        exampleStrokeBackground: {
            height: 100,
            backgroundColor: isLightMode ? theme_tokens_1.globalTokens.color.grey80 : theme_tokens_1.globalTokens.color.grey10,
            display: 'flex',
            marginTop: 8,
        },
    };
});
var StrokeWidthTestComponent = function (props) {
    var theme = (0, framework_1.useFluentTheme)();
    var styles = getThemedStyles(theme);
    var isLightMode = (0, theming_utils_1.getCurrentAppearance)(theme.host.appearance, 'light') === 'light';
    var exampleStrokeStyle = React.useMemo(function () { return ({
        height: 50,
        borderBottomWidth: props.strokeWidth,
        borderColor: isLightMode ? theme_tokens_1.globalTokens.color.grey10 : theme_tokens_1.globalTokens.color.grey80,
    }); }, [props.strokeWidth, isLightMode]);
    return (React.createElement(react_native_1.View, { style: styles.root },
        React.createElement(react_native_2.Text, { variant: "bodySemibold" }, props.name + ': ' + props.strokeWidth + 'pt'),
        React.createElement(react_native_1.View, { style: styles.exampleStrokeBackground },
            React.createElement(react_native_1.View, { style: exampleStrokeStyle }))));
};
var StrokeWidthTestRamp = function () {
    return (React.createElement(react_native_1.View, null,
        React.createElement(stack_1.Stack, { style: styles_1.stackStyle },
            React.createElement(StrokeWidthTestComponent, { name: "widthNone", strokeWidth: theme_tokens_1.globalTokens.stroke.widthNone }),
            React.createElement(StrokeWidthTestComponent, { name: "width05", strokeWidth: theme_tokens_1.globalTokens.stroke.width05 }),
            React.createElement(StrokeWidthTestComponent, { name: "width10", strokeWidth: theme_tokens_1.globalTokens.stroke.width10 }),
            React.createElement(StrokeWidthTestComponent, { name: "width15", strokeWidth: theme_tokens_1.globalTokens.stroke.width15 }),
            React.createElement(StrokeWidthTestComponent, { name: "width20", strokeWidth: theme_tokens_1.globalTokens.stroke.width20 }),
            React.createElement(StrokeWidthTestComponent, { name: "width30", strokeWidth: theme_tokens_1.globalTokens.stroke.width30 }),
            React.createElement(StrokeWidthTestComponent, { name: "width40", strokeWidth: theme_tokens_1.globalTokens.stroke.width40 }),
            React.createElement(StrokeWidthTestComponent, { name: "width60", strokeWidth: theme_tokens_1.globalTokens.stroke.width60 }))));
};
var strokeWidthSections = [
    {
        name: 'Basic Usage',
        testID: consts_1.STROKEWIDTH_TESTPAGE,
        component: StrokeWidthTestRamp,
    },
];
var StrokeWidthTest = function () {
    var status = {
        win32Status: 'Beta',
        uwpStatus: 'Experimental',
        iosStatus: 'Experimental',
        macosStatus: 'Experimental',
        androidStatus: 'Experimental',
    };
    var description = 'This showcases the different global stroke width tokens available in Fluent UI.';
    return React.createElement(Test_1.Test, { name: "Stroke Width Tokens Test", description: description, sections: strokeWidthSections, status: status });
};
exports.StrokeWidthTest = StrokeWidthTest;
//# sourceMappingURL=StrokeWidthTest.js.map