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 { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
import { HOMEPAGE_CORNERRADIUS_TESTPAGE } from '../../../../E2E/src/CornerRadiusTokens/consts';
import { stackStyle } from '../Common/styles';
import { Test } from '../Test';
var CornerRadiusTestComponent = function (props) {
    var theme = useFluentTheme();
    var isLightMode = getCurrentAppearance(theme.host.appearance, 'light') === 'light';
    var outerBoxProps = React.useMemo(function () { return ({
        height: 60,
        margin: 16,
        backgroundColor: isLightMode ? globalTokens.color.grey80 : globalTokens.color.grey10,
        borderRadius: props.cornerRadius,
    }); }, [props.cornerRadius, isLightMode]);
    var innerCircleIndicatorProps = React.useMemo(function () { return ({
        height: Math.min(props.cornerRadius * 2, 60),
        width: Math.min(props.cornerRadius * 2, 60),
        borderRadius: props.cornerRadius,
        backgroundColor: isLightMode ? globalTokens.color.grey10 : globalTokens.color.grey80,
    }); }, [props.cornerRadius, isLightMode]);
    return (React.createElement(View, null,
        React.createElement(Text, { variant: "bodySemibold" }, props.name + ': ' + props.cornerRadius + 'px'),
        React.createElement(View, { style: outerBoxProps },
            React.createElement(View, { style: innerCircleIndicatorProps }))));
};
var CornerRadiusTest = function () {
    return (React.createElement(View, null,
        React.createElement(Stack, { style: stackStyle, gap: 500 },
            React.createElement(CornerRadiusTestComponent, { name: "radiusNone", cornerRadius: globalTokens.corner.radiusNone }),
            React.createElement(CornerRadiusTestComponent, { name: "radius20", cornerRadius: globalTokens.corner.radius20 }),
            React.createElement(CornerRadiusTestComponent, { name: "radius40", cornerRadius: globalTokens.corner.radius40 }),
            React.createElement(CornerRadiusTestComponent, { name: "radius60", cornerRadius: globalTokens.corner.radius60 }),
            React.createElement(CornerRadiusTestComponent, { name: "radius80", cornerRadius: globalTokens.corner.radius80 }),
            React.createElement(CornerRadiusTestComponent, { name: "radius120", cornerRadius: globalTokens.corner.radius120 }),
            React.createElement(CornerRadiusTestComponent, { name: "radiusCircular", cornerRadius: globalTokens.corner.radiusCircular }))));
};
var cornerRadiusSections = [
    {
        name: 'Basic Usage',
        testID: HOMEPAGE_CORNERRADIUS_TESTPAGE,
        component: CornerRadiusTest,
    },
];
export var CornerRadiusTokensTest = function () {
    var status = {
        win32Status: 'Production',
        uwpStatus: 'Production',
        iosStatus: 'Production',
        macosStatus: 'Production',
        androidStatus: 'Production',
    };
    var description = 'The different global corner radius tokens available in Fluent UI.';
    return React.createElement(Test, { name: "Corner Radius Tokens Test", description: description, sections: cornerRadiusSections, status: status });
};
//# sourceMappingURL=CornerRadiusTest.js.map