"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FluentTester = 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 theme_types_1 = require("@fluentui-react-native/theme-types");
var themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
var styles_1 = require("./TestComponents/Common/styles");
var TestProps_1 = require("./TestComponents/Common/TestProps");
var testPages_1 = require("./testPages");
var ThemePickers_1 = require("./theme/ThemePickers");
var consts_1 = require("../../E2E/src/common/consts");
var consts_2 = require("../../E2E/src/common/consts");
var getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)(function (t) {
    return {
        root: {
            backgroundColor: t.colors.neutralBackground1,
            flex: 1,
            flexGrow: 1,
            flexDirection: 'column',
            justifyContent: 'flex-start',
            alignItems: 'stretch',
            padding: 4,
        },
        testSeparator: {
            borderColor: t.colors.menuDivider,
            borderWidth: 0.1,
        },
    };
});
var EmptyComponent = function () {
    return React.createElement(react_native_1.Text, { style: styles_1.fluentTesterStyles.noTest }, "Select a component from the test list.");
};
var HeaderSeparator = react_native_2.Separator.customize(function (t) { return ({
    color: t.colors.bodyFrameDivider,
    separatorWidth: 2,
}); });
var TestListSeparator = react_native_2.Separator.customize(function (t) { return ({
    color: t.colors.menuDivider,
    separatorWidth: 2,
}); });
var Header = React.memo(function (props) {
    var _a;
    var enableSinglePaneView = props.enableSinglePaneView, enableBackButtonIOS = props.enableBackButtonIOS, onBackButtonPressedIOS = props.onBackButtonPressedIOS;
    var theme = (0, theme_types_1.useTheme)();
    var headerStyle = enableSinglePaneView ? styles_1.fluentTesterStyles.headerWithBackButton : styles_1.fluentTesterStyles.header;
    var backButtonTitle = react_native_1.I18nManager.isRTL ? 'Back ›' : '‹ Back';
    return (React.createElement(react_native_1.View, { style: headerStyle },
        React.createElement(react_native_2.TextV1, tslib_1.__assign({ style: styles_1.fluentTesterStyles.testHeader, variant: "heroLargeSemibold", color: (_a = theme.host.palette) === null || _a === void 0 ? void 0 : _a.TextEmphasis }, (0, TestProps_1.testProps)(consts_1.BASE_TESTPAGE)), "\u269B FluentUI Tests"),
        React.createElement(react_native_1.View, { style: styles_1.fluentTesterStyles.header },
            react_native_1.Platform.OS === 'ios' && !react_native_1.Platform.isPad && (React.createElement(button_1.ButtonV1, { appearance: "subtle", style: styles_1.fluentTesterStyles.backButton, onClick: onBackButtonPressedIOS, disabled: !enableBackButtonIOS }, backButtonTitle)),
            React.createElement(ThemePickers_1.ThemePickers, null))));
});
// filters and sorts tests alphabetically
var filteredTestComponents = testPages_1.tests.filter(function (test) { return test.platforms.includes(react_native_1.Platform.OS); });
var sortedTestComponents = filteredTestComponents.sort(function (a, b) { return a.name.localeCompare(b.name); });
var FluentTester = function (props) {
    var enableSinglePaneView = props.enableSinglePaneView;
    var _a = React.useState(-1), selectedTestIndex = _a[0], setSelectedTestIndex = _a[1];
    var _b = React.useState(true), onTestListView = _b[0], setOnTestListView = _b[1];
    var theme = (0, theme_types_1.useTheme)();
    var themedStyles = getThemedStyles(theme);
    var onBackPress = React.useCallback(function () {
        setOnTestListView(true);
        if (react_native_1.Platform.OS === 'android') {
            react_native_1.BackHandler.removeEventListener('hardwareBackPress', onBackPress);
        }
        return true;
    }, []);
    var TestComponent = selectedTestIndex == -1 ? EmptyComponent : sortedTestComponents[selectedTestIndex].component;
    // This is used to initially bring focus to the app on win32
    var focusOnMountRef = React.useRef();
    React.useEffect(function () {
        if (react_native_1.Platform.OS === 'win32') {
            focusOnMountRef.current.focus();
        }
    }, []);
    var RootView = react_native_1.Platform.select({
        ios: react_native_1.SafeAreaView,
        default: react_native_1.View,
    });
    var isTestListVisible = !enableSinglePaneView || (enableSinglePaneView && onTestListView);
    var isTestSectionVisible = !enableSinglePaneView || (enableSinglePaneView && !onTestListView);
    var TestList = React.memo(function () {
        return (React.createElement(react_native_1.View, { style: styles_1.fluentTesterStyles.testList },
            React.createElement(react_native_1.ScrollView, tslib_1.__assign({ contentContainerStyle: styles_1.fluentTesterStyles.testListContainerStyle }, (0, TestProps_1.testProps)(consts_1.TESTPAGE_BUTTONS_SCROLLVIEWER)), sortedTestComponents.map(function (description, index) {
                return (React.createElement(button_1.ButtonV1, tslib_1.__assign({ appearance: "subtle", key: index, disabled: index == selectedTestIndex, onClick: function () { return setSelectedTestIndex(index); }, style: styles_1.fluentTesterStyles.testListItem }, (0, TestProps_1.testProps)(description.testPageButton), (index === 0 && { componentRef: focusOnMountRef })), description.name));
            })),
            React.createElement(TestListSeparator, { vertical: true, style: styles_1.fluentTesterStyles.testListSeparator })));
    });
    var MobileTestList = React.memo(function () {
        return (React.createElement(react_native_1.View, { style: tslib_1.__assign(tslib_1.__assign({}, styles_1.mobileStyles.testList), { display: isTestListVisible ? 'flex' : 'none' }) },
            React.createElement(react_native_1.ScrollView, tslib_1.__assign({ contentContainerStyle: styles_1.fluentTesterStyles.testListContainerStyle }, (0, TestProps_1.testProps)(consts_1.TESTPAGE_BUTTONS_SCROLLVIEWER)), sortedTestComponents.map(function (description, index) {
                return (React.createElement(react_native_1.View, { key: index },
                    React.createElement(react_native_2.TextV1, tslib_1.__assign({ key: index, onPress: function () {
                            setOnTestListView(false);
                            setSelectedTestIndex(index);
                            if (react_native_1.Platform.OS === 'android') {
                                react_native_1.BackHandler.addEventListener('hardwareBackPress', onBackPress);
                            }
                        }, style: styles_1.mobileStyles.testListItem }, (0, TestProps_1.testProps)(description.testPageButton)), description.name),
                    React.createElement(react_native_2.Separator, { style: themedStyles.testSeparator })));
            }))));
    });
    var TestComponentView = function () {
        return (React.createElement(react_native_1.ScrollView, tslib_1.__assign({ keyboardShouldPersistTaps: "handled" // Prevents keyboard from dismissing when tapping on a text input
            , contentContainerStyle: styles_1.fluentTesterStyles.testSection }, (0, TestProps_1.testProps)(consts_1.TESTPAGE_CONTENT_SCROLLVIEWER)),
            React.createElement(TestComponent, null)));
    };
    return (
    // On iOS, the accessible prop must be set to false because iOS does not support nested accessibility elements
    React.createElement(RootView, tslib_1.__assign({ style: themedStyles.root, accessible: react_native_1.Platform.OS !== 'ios' }, (0, TestProps_1.testProps)(consts_2.ROOT_VIEW)),
        React.createElement(Header, { enableSinglePaneView: enableSinglePaneView, enableBackButtonIOS: !onTestListView, onBackButtonPressedIOS: onBackPress }),
        React.createElement(HeaderSeparator, null),
        React.createElement(react_native_1.View, { style: styles_1.fluentTesterStyles.testRoot },
            enableSinglePaneView ? React.createElement(MobileTestList, null) : React.createElement(TestList, null),
            isTestSectionVisible && React.createElement(TestComponentView, null))));
};
exports.FluentTester = FluentTester;
//# sourceMappingURL=FluentTester.js.map