"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CornerRadiusTokensTest = 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 theming_utils_1 = require("@fluentui-react-native/theming-utils");
var consts_1 = require("../../../../E2E/src/CornerRadiusTokens/consts");
var styles_1 = require("../Common/styles");
var Test_1 = require("../Test");
var CornerRadiusTestComponent = function (props) {
    var theme = (0, framework_1.useFluentTheme)();
    var isLightMode = (0, theming_utils_1.getCurrentAppearance)(theme.host.appearance, 'light') === 'light';
    var outerBoxProps = React.useMemo(function () { return ({
        height: 60,
        margin: 16,
        backgroundColor: isLightMode ? theme_tokens_1.globalTokens.color.grey80 : theme_tokens_1.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 ? 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 }))));
};
var CornerRadiusTest = function () {
    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 }))));
};
var cornerRadiusSections = [
    {
        name: 'Basic Usage',
        testID: consts_1.HOMEPAGE_CORNERRADIUS_TESTPAGE,
        component: CornerRadiusTest,
    },
];
var CornerRadiusTokensTest = function () {
    var status = {
        win32Status: 'Beta',
        uwpStatus: 'Experimental',
        iosStatus: 'Experimental',
        macosStatus: 'Experimental',
        androidStatus: 'Experimental',
    };
    var 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