"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FluentTester = 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 button_1 = require("@fluentui-react-native/button");
const e2e_testing_1 = require("@fluentui-react-native/e2e-testing");
const e2e_testing_2 = require("@fluentui-react-native/e2e-testing");
const theme_types_1 = require("@fluentui-react-native/theme-types");
const themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
const styles_1 = require("./TestComponents/Common/styles");
const TestProps_1 = require("./TestComponents/Common/TestProps");
const testPages_1 = require("./testPages");
const ThemePickers_1 = require("./theme/ThemePickers");
const getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)((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,
        },
    };
});
const EmptyComponent = () => {
    return React.createElement(react_native_1.Text, { style: styles_1.fluentTesterStyles.noTest }, "Select a component from the test list.");
};
const HeaderSeparator = react_native_2.Separator.customize((t) => ({
    color: t.colors.bodyFrameDivider,
    separatorWidth: 2,
}));
const TestListSeparator = react_native_2.Separator.customize((t) => ({
    color: t.colors.menuDivider,
    separatorWidth: 2,
}));
const Header = React.memo((props) => {
    const { enableSinglePaneView, enableBackButtonIOS, onBackButtonPressedIOS } = props;
    const theme = (0, theme_types_1.useTheme)();
    const headerStyle = enableSinglePaneView ? styles_1.fluentTesterStyles.headerWithBackButton : styles_1.fluentTesterStyles.header;
    const backButtonTitle = react_native_1.I18nManager.isRTL ? 'Back ›' : '‹ Back';
    return (React.createElement(react_native_1.View, { style: headerStyle },
        React.createElement(react_native_2.TextV1, { style: styles_1.fluentTesterStyles.testHeader, variant: "heroLargeSemibold", color: theme.host.palette?.TextEmphasis, ...(0, TestProps_1.testProps)(e2e_testing_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
const filteredTestComponents = testPages_1.tests.filter((test) => test.platforms.includes(react_native_1.Platform.OS));
const sortedTestComponents = filteredTestComponents.sort((a, b) => a.name.localeCompare(b.name));
const FluentTester = (props) => {
    const { enableSinglePaneView } = props;
    const [selectedTestIndex, setSelectedTestIndex] = React.useState(-1);
    const [onTestListView, setOnTestListView] = React.useState(true);
    const theme = (0, theme_types_1.useTheme)();
    const themedStyles = getThemedStyles(theme);
    const onBackPress = React.useCallback(() => {
        setOnTestListView(true);
        if (react_native_1.Platform.OS === 'android') {
            react_native_1.BackHandler.removeEventListener('hardwareBackPress', onBackPress);
        }
        return true;
    }, []);
    const TestComponent = selectedTestIndex == -1 ? EmptyComponent : sortedTestComponents[selectedTestIndex].component;
    // This is used to initially bring focus to the app on win32
    const focusOnMountRef = React.useRef();
    React.useEffect(() => {
        if (react_native_1.Platform.OS === 'win32') {
            focusOnMountRef.current.focus();
        }
    }, []);
    const RootView = react_native_1.Platform.select({
        ios: react_native_1.SafeAreaView,
        default: react_native_1.View,
    });
    const isTestListVisible = !enableSinglePaneView || (enableSinglePaneView && onTestListView);
    const isTestSectionVisible = !enableSinglePaneView || (enableSinglePaneView && !onTestListView);
    const TestList = React.memo(() => {
        return (React.createElement(react_native_1.View, { style: styles_1.fluentTesterStyles.testList },
            React.createElement(react_native_1.ScrollView, { contentContainerStyle: styles_1.fluentTesterStyles.testListContainerStyle, ...(0, TestProps_1.testProps)(e2e_testing_1.TESTPAGE_BUTTONS_SCROLLVIEWER) }, sortedTestComponents.map((description, index) => {
                return (React.createElement(button_1.ButtonV1, { appearance: "subtle", key: index, disabled: index == selectedTestIndex, onClick: () => 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 })));
    });
    const MobileTestList = React.memo(() => {
        return (React.createElement(react_native_1.View, { style: { ...styles_1.mobileStyles.testList, display: isTestListVisible ? 'flex' : 'none' } },
            React.createElement(react_native_1.ScrollView, { contentContainerStyle: styles_1.fluentTesterStyles.testListContainerStyle, ...(0, TestProps_1.testProps)(e2e_testing_1.TESTPAGE_BUTTONS_SCROLLVIEWER) }, sortedTestComponents.map((description, index) => {
                return (React.createElement(react_native_1.View, { key: index },
                    React.createElement(react_native_2.TextV1, { key: index, onPress: () => {
                            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 })));
            }))));
    });
    const TestComponentView = () => {
        return (React.createElement(react_native_1.ScrollView, { keyboardShouldPersistTaps: "handled" // Prevents keyboard from dismissing when tapping on a text input
            , contentContainerStyle: styles_1.fluentTesterStyles.testSection, ...(0, TestProps_1.testProps)(e2e_testing_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, { style: themedStyles.root, accessible: react_native_1.Platform.OS !== 'ios', ...(0, TestProps_1.testProps)(e2e_testing_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