"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Test = 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 button_1 = require("@fluentui-react-native/button");
var stack_1 = require("@fluentui-react-native/stack");
var theme_types_1 = require("@fluentui-react-native/theme-types");
var react_native_svg_1 = tslib_1.__importStar(require("react-native-svg"));
var styles_1 = require("./Common/styles");
var TestProps_1 = require("./Common/TestProps");
var index_consts_1 = require("../../../E2E/src/index.consts");
var definitions = {
    Production: 'Control is ready for broad partner use and to be used in production-ready scenarios.',
    Beta: 'Control is ready for partner consumption, but not ready for production release (e.g. fixing bugs).',
    Experimental: 'Control code checked into repo, but not ready for partner use.',
    Backlog: 'Control is in plan and on our backlog to deliver.',
    'N/A': 'Control is not in current plan.',
    Deprecated: 'Control is being deprecated.',
};
var styles = react_native_1.StyleSheet.create({
    name: {
        marginTop: 4,
        flex: react_native_1.Platform.select({ ios: 0, android: 0, default: 1 }),
    },
    definitionHeader: {
        marginTop: 12,
        marginBottom: 6,
    },
    description: {
        alignItems: 'flex-start',
        flexWrap: 'wrap',
    },
    header: {
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'space-between',
        flexWrap: 'wrap',
    },
    section: {
        marginTop: 12,
    },
    statusView: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    statusLabel: {
        marginTop: 2,
        marginStart: 4,
    },
    status: {
        fontWeight: 'normal',
    },
    // This button is only for our E2E testing framework. We want to be able to put keyboard focus in any test page if we need it.
    // This button will be at the top of every test page and allows us to do that. But we don't want partners to see it.
    e2eFocusButton: {
        opacity: 0,
    },
    e2eSection: {
        marginBottom: 4,
    },
    e2eSwitch: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    e2eSwitchLabel: {
        marginRight: 4,
        textAlignVertical: 'center',
    },
});
var Test = function (props) {
    var _a = React.useState(false), showStatus = _a[0], setShowStatus = _a[1];
    var _b = React.useState(false), showE2E = _b[0], setShowE2E = _b[1];
    var toggleSvg = function () {
        var plusPath = 'M6.5 1.75C6.5 1.33579 6.16421 1 5.75 1C5.33579 1 5 1.33579 5 1.75V5H1.75C1.33579 5 1 5.33579 1 5.75C1 6.16421 1.33579 6.5 1.75 6.5H5V9.75C5 10.1642 5.33579 10.5 5.75 10.5C6.16421 10.5 6.5 10.1642 6.5 9.75V6.5H9.75C10.1642 6.5 10.5 6.16421 10.5 5.75C10.5 5.33579 10.1642 5 9.75 5H6.5V1.75Z';
        var minusPath = 'M2.75 5.25h6.5s0.75 0 0.75 0.75v0s0 0.75 -0.75 0.75h-6.5s-0.75 0 -0.75 -0.75v0s0 -0.75 0.75 -0.75';
        var path = showStatus ? minusPath : plusPath;
        return (React.createElement(react_native_svg_1.default, null,
            React.createElement(react_native_svg_1.G, null,
                React.createElement(react_native_svg_1.Path, { d: path, fill: "black" }))));
    };
    var svgProps = {
        src: toggleSvg,
    };
    var theme = (0, theme_types_1.useTheme)();
    var fontFamily = theme.typography.families.primary;
    var plusCodepoint = 0x2795;
    var minusCodepoint = 0x2796;
    var fontIconProps = {
        fontFamily: fontFamily,
        codepoint: showStatus ? minusCodepoint : plusCodepoint,
        fontSize: 10,
    };
    var toggleIconProps = react_native_1.Platform.OS === 'windows' ? { fontSource: fontIconProps } : { svgSource: svgProps, width: 12, height: 12 };
    var e2eSections = props.e2eSections;
    var isMobile = react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android';
    return (React.createElement(react_native_1.View, null,
        React.createElement(react_native_1.View, { style: styles.header },
            React.createElement(react_native_2.Text, { style: styles.name, variant: "heroSemibold" }, props.name),
            !isMobile && (React.createElement(button_1.ButtonV1
            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
            , tslib_1.__assign({}, (0, TestProps_1.testProps)('Focus_Button'), { style: styles.e2eFocusButton }), "E2E Button")),
            props.e2eSections && (React.createElement(react_native_1.View, { style: styles.e2eSwitch },
                React.createElement(react_native_2.Text, tslib_1.__assign({ style: styles.e2eSwitchLabel }, (isMobile ? {} : { variant: 'body1Strong' })), "E2E Mode"),
                React.createElement(react_native_1.Switch, tslib_1.__assign({ onValueChange: setShowE2E, value: showE2E }, (0, TestProps_1.testProps)(index_consts_1.E2E_MODE_SWITCH))))),
            props.spec && React.createElement(react_native_2.Link, { url: props.spec, content: "SPEC" })),
        React.createElement(react_native_2.Separator, null),
        e2eSections && showE2E && (
        // We can check if the E2E section renders by checking if the "E2E Tests" header has rendered for each spec
        React.createElement(React.Fragment, null,
            React.createElement(react_native_2.Text, tslib_1.__assign({ variant: "headerSemibold" }, (0, TestProps_1.testProps)(index_consts_1.E2E_TEST_SECTION)), "E2E Tests"),
            e2eSections.map(function (section, i) {
                if (section === null) {
                    return null;
                }
                var E2EComponent = section.component;
                return React.createElement(E2EComponent, { key: i });
            }))),
        React.createElement(stack_1.Stack, { style: styles_1.stackStyle },
            React.createElement(react_native_2.Text, { style: styles.description }, props.description)),
        React.createElement(stack_1.Stack, { style: styles_1.stackStyle },
            React.createElement(react_native_1.View, { style: styles.statusView },
                React.createElement(react_native_2.Text, { variant: "headerStandard" }, "Platform Status"),
                React.createElement(react_native_2.ToggleButton, { iconOnly: true, icon: toggleIconProps, onClick: function () { return setShowStatus(!showStatus); } })),
            showStatus && (React.createElement(React.Fragment, null,
                React.createElement(react_native_2.Text, { style: styles.statusLabel, variant: "bodySemibold" },
                    "Win32: ",
                    React.createElement(react_native_2.Text, { style: styles.status }, props.status.win32Status)),
                React.createElement(react_native_2.Text, { style: styles.statusLabel, variant: "bodySemibold" },
                    "UWP: ",
                    React.createElement(react_native_2.Text, { style: styles.status }, props.status.uwpStatus)),
                React.createElement(react_native_2.Text, { style: styles.statusLabel, variant: "bodySemibold" },
                    "iOS: ",
                    React.createElement(react_native_2.Text, { style: styles.status }, props.status.iosStatus)),
                React.createElement(react_native_2.Text, { style: styles.statusLabel, variant: "bodySemibold" },
                    "macOS: ",
                    React.createElement(react_native_2.Text, { style: styles.status }, props.status.macosStatus)),
                React.createElement(react_native_2.Text, { style: styles.statusLabel, variant: "bodySemibold" },
                    "Android: ",
                    React.createElement(react_native_2.Text, { style: styles.status }, props.status.androidStatus)),
                React.createElement(react_native_2.Text, { style: styles.definitionHeader, variant: "headerStandard" }, "Status Definitions"),
                Object.entries(definitions).map(function (_a) {
                    var key = _a[0], value = _a[1];
                    return (React.createElement(react_native_2.Text, { style: styles.statusLabel, variant: "bodySemibold", key: key },
                        key,
                        ": ",
                        React.createElement(react_native_2.Text, { style: styles.status }, value)));
                })))),
        props.sections.map(function (section, index) {
            if (section == null) {
                return React.createElement(React.Fragment, null);
            }
            var TestComponent = section.component;
            return (React.createElement(react_native_1.View, { key: index },
                React.createElement(react_native_2.Text, tslib_1.__assign({ style: styles.section, variant: "headerSemibold" }, (0, TestProps_1.testProps)(section.testID)), section.name),
                React.createElement(react_native_2.Separator, null),
                React.createElement(TestComponent, null)));
        })));
};
exports.Test = Test;
//# sourceMappingURL=Test.js.map