import * as React from 'react';
import { View } from 'react-native';
import { Text } from '@fluentui/react-native';
import { STROKEWIDTH_TESTPAGE } from '@fluentui-react-native/e2e-testing';
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 { stackStyle } from '../Common/styles';
import { Test } from '../Test';
const getThemedStyles = themedStyleSheet((t) => {
    const isLightMode = getCurrentAppearance(t.host.appearance, 'light') === 'light';
    return {
        root: {
            paddingBottom: 16,
        },
        exampleStrokeBackground: {
            height: 100,
            backgroundColor: isLightMode ? globalTokens.color.grey80 : globalTokens.color.grey10,
            display: 'flex',
            marginTop: 8,
        },
    };
});
const StrokeWidthTestComponent = (props) => {
    const theme = useFluentTheme();
    const styles = getThemedStyles(theme);
    const isLightMode = getCurrentAppearance(theme.host.appearance, 'light') === 'light';
    const exampleStrokeStyle = React.useMemo(() => ({
        height: 50,
        borderBottomWidth: props.strokeWidth,
        borderColor: isLightMode ? globalTokens.color.grey10 : globalTokens.color.grey80,
    }), [props.strokeWidth, isLightMode]);
    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 }))));
};
const StrokeWidthTestRamp = () => {
    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 }))));
};
const strokeWidthSections = [
    {
        name: 'Basic Usage',
        testID: STROKEWIDTH_TESTPAGE,
        component: StrokeWidthTestRamp,
    },
];
export const StrokeWidthTest = () => {
    const status = {
        win32Status: 'Production',
        uwpStatus: 'Production',
        iosStatus: 'Production',
        macosStatus: 'Production',
        androidStatus: 'Production',
    };
    const 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