import * as React from 'react';
import { View } from 'react-native';
import { Text } from '@fluentui/react-native';
import { useFluentTheme } from '@fluentui-react-native/framework';
import { Stack } from '@fluentui-react-native/stack';
import { globalTokens } from '@fluentui-react-native/theme-tokens';
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
import { STROKEWIDTH_TESTPAGE } from '../../../../E2E/src/StrokeWidthTokens/consts';
import { stackStyle } from '../Common/styles';
import { Test } from '../Test';
var getThemedStyles = themedStyleSheet(function (t) {
    var isLightMode = getCurrentAppearance(t.host.appearance, 'light') === 'light';
    return {
        root: {
            paddingBottom: 16,
        },
        exampleStrokeBackground: {
            height: 100,
            backgroundColor: isLightMode ? globalTokens.color.grey80 : globalTokens.color.grey10,
            display: 'flex',
            justifyContent: 'center',
            marginTop: 8,
        },
    };
});
var StrokeWidthTestComponent = function (props) {
    var theme = useFluentTheme();
    var styles = getThemedStyles(theme);
    var isLightMode = getCurrentAppearance(theme.host.appearance, 'light') === 'light';
    var exampleStrokeStyle = React.useMemo(function () { return ({
        height: props.strokeWidth,
        backgroundColor: isLightMode ? globalTokens.color.grey10 : globalTokens.color.grey80,
    }); }, [props.strokeWidth]);
    return (React.createElement(View, { style: styles.root },
        React.createElement(Text, { variant: "bodySemibold" }, props.name + ': ' + props.strokeWidth + 'pt'),
        React.createElement(View, { style: styles.exampleStrokeBackground },
            React.createElement(View, { style: exampleStrokeStyle }))));
};
var StrokeWidthTestRamp = function () {
    return (React.createElement(View, null,
        React.createElement(Stack, { style: stackStyle },
            React.createElement(StrokeWidthTestComponent, { name: "widthNone", strokeWidth: globalTokens.stroke.widthNone }),
            React.createElement(StrokeWidthTestComponent, { name: "width05", strokeWidth: globalTokens.stroke.width05 }),
            React.createElement(StrokeWidthTestComponent, { name: "width10", strokeWidth: globalTokens.stroke.width10 }),
            React.createElement(StrokeWidthTestComponent, { name: "width15", strokeWidth: globalTokens.stroke.width15 }),
            React.createElement(StrokeWidthTestComponent, { name: "width20", strokeWidth: globalTokens.stroke.width20 }),
            React.createElement(StrokeWidthTestComponent, { name: "width30", strokeWidth: globalTokens.stroke.width30 }),
            React.createElement(StrokeWidthTestComponent, { name: "width40", strokeWidth: globalTokens.stroke.width40 }),
            React.createElement(StrokeWidthTestComponent, { name: "width60", strokeWidth: globalTokens.stroke.width60 }))));
};
var strokeWidthSections = [
    {
        name: 'Basic Usage',
        testID: STROKEWIDTH_TESTPAGE,
        component: StrokeWidthTestRamp,
    },
];
export 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, { name: "Stroke Width Tokens Test", description: description, sections: strokeWidthSections, status: status });
};
//# sourceMappingURL=StrokeWidthTest.js.map