"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CornerRadiusTokensTest = 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 e2e_testing_1 = require("@fluentui-react-native/e2e-testing");
const framework_1 = require("@fluentui-react-native/framework");
const stack_1 = require("@fluentui-react-native/stack");
const theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
const theming_utils_1 = require("@fluentui-react-native/theming-utils");
const styles_1 = require("../Common/styles");
const Test_1 = require("../Test");
const CornerRadiusTestComponent = (props) => {
    const theme = (0, framework_1.useFluentTheme)();
    const isLightMode = (0, theming_utils_1.getCurrentAppearance)(theme.host.appearance, 'light') === 'light';
    const outerBoxProps = React.useMemo(() => ({
        height: 60,
        margin: 16,
        backgroundColor: isLightMode ? theme_tokens_1.globalTokens.color.grey80 : theme_tokens_1.globalTokens.color.grey10,
        borderRadius: props.cornerRadius,
    }), [props.cornerRadius, isLightMode]);
    const innerCircleIndicatorProps = React.useMemo(() => ({
        height: Math.min(props.cornerRadius * 2, 60),
        width: Math.min(props.cornerRadius * 2, 60),
        borderRadius: props.cornerRadius,
        backgroundColor: isLightMode ? theme_tokens_1.globalTokens.color.grey10 : theme_tokens_1.globalTokens.color.grey80,
    }), [props.cornerRadius, isLightMode]);
    return (React.createElement(react_native_1.View, null,
        React.createElement(react_native_2.Text, { variant: "bodySemibold" }, props.name + ': ' + props.cornerRadius + 'px'),
        React.createElement(react_native_1.View, { style: outerBoxProps },
            React.createElement(react_native_1.View, { style: innerCircleIndicatorProps }))));
};
const CornerRadiusTest = () => {
    return (React.createElement(react_native_1.View, null,
        React.createElement(stack_1.Stack, { style: styles_1.stackStyle, gap: 500 },
            React.createElement(CornerRadiusTestComponent, { name: "radiusNone", cornerRadius: theme_tokens_1.globalTokens.corner.radiusNone }),
            React.createElement(CornerRadiusTestComponent, { name: "radius20", cornerRadius: theme_tokens_1.globalTokens.corner.radius20 }),
            React.createElement(CornerRadiusTestComponent, { name: "radius40", cornerRadius: theme_tokens_1.globalTokens.corner.radius40 }),
            React.createElement(CornerRadiusTestComponent, { name: "radius60", cornerRadius: theme_tokens_1.globalTokens.corner.radius60 }),
            React.createElement(CornerRadiusTestComponent, { name: "radius80", cornerRadius: theme_tokens_1.globalTokens.corner.radius80 }),
            React.createElement(CornerRadiusTestComponent, { name: "radius120", cornerRadius: theme_tokens_1.globalTokens.corner.radius120 }),
            React.createElement(CornerRadiusTestComponent, { name: "radiusCircular", cornerRadius: theme_tokens_1.globalTokens.corner.radiusCircular }))));
};
const cornerRadiusSections = [
    {
        name: 'Basic Usage',
        testID: e2e_testing_1.HOMEPAGE_CORNERRADIUS_TESTPAGE,
        component: CornerRadiusTest,
    },
];
const CornerRadiusTokensTest = () => {
    const status = {
        win32Status: 'Production',
        uwpStatus: 'Production',
        iosStatus: 'Production',
        macosStatus: 'Production',
        androidStatus: 'Production',
    };
    const description = 'The different global corner radius tokens available in Fluent UI.';
    return React.createElement(Test_1.Test, { name: "Corner Radius Tokens Test", description: description, sections: cornerRadiusSections, status: status });
};
exports.CornerRadiusTokensTest = CornerRadiusTokensTest;
//# sourceMappingURL=CornerRadiusTest.js.map