import { __assign } from "tslib";
import * as React from 'react';
import { ScrollView, View, Text as RNText, Platform, SafeAreaView, BackHandler, I18nManager } from 'react-native';
import { Separator, TextV1 as Text } from '@fluentui/react-native';
import { ButtonV1 as Button } from '@fluentui-react-native/button';
import { useTheme } from '@fluentui-react-native/theme-types';
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
import { fluentTesterStyles, mobileStyles } from './TestComponents/Common/styles';
import { testProps } from './TestComponents/Common/TestProps';
import { tests } from './testPages';
import { ThemePickers } from './theme/ThemePickers';
import { BASE_TESTPAGE, TESTPAGE_BUTTONS_SCROLLVIEWER, TESTPAGE_CONTENT_SCROLLVIEWER } from '../../E2E/src/common/consts';
import { ROOT_VIEW } from '../../E2E/src/common/consts';
var getThemedStyles = 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(RNText, { style: fluentTesterStyles.noTest }, "Select a component from the test list.");
};
var HeaderSeparator = Separator.customize(function (t) { return ({
    color: t.colors.bodyFrameDivider,
    separatorWidth: 2,
}); });
var TestListSeparator = 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 = useTheme();
    var headerStyle = enableSinglePaneView ? fluentTesterStyles.headerWithBackButton : fluentTesterStyles.header;
    var backButtonTitle = I18nManager.isRTL ? 'Back ›' : '‹ Back';
    return (React.createElement(View, { style: headerStyle },
        React.createElement(Text, __assign({ style: fluentTesterStyles.testHeader, variant: "heroLargeSemibold", color: (_a = theme.host.palette) === null || _a === void 0 ? void 0 : _a.TextEmphasis }, testProps(BASE_TESTPAGE)), "\u269B FluentUI Tests"),
        React.createElement(View, { style: fluentTesterStyles.header },
            Platform.OS === 'ios' && !Platform.isPad && (React.createElement(Button, { appearance: "subtle", style: fluentTesterStyles.backButton, onClick: onBackButtonPressedIOS, disabled: !enableBackButtonIOS }, backButtonTitle)),
            React.createElement(ThemePickers, null))));
});
// filters and sorts tests alphabetically
var filteredTestComponents = tests.filter(function (test) { return test.platforms.includes(Platform.OS); });
var sortedTestComponents = filteredTestComponents.sort(function (a, b) { return a.name.localeCompare(b.name); });
export 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 = useTheme();
    var themedStyles = getThemedStyles(theme);
    var onBackPress = React.useCallback(function () {
        setOnTestListView(true);
        if (Platform.OS === 'android') {
            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 (Platform.OS === 'win32') {
            focusOnMountRef.current.focus();
        }
    }, []);
    var RootView = Platform.select({
        ios: SafeAreaView,
        default: View,
    });
    var isTestListVisible = !enableSinglePaneView || (enableSinglePaneView && onTestListView);
    var isTestSectionVisible = !enableSinglePaneView || (enableSinglePaneView && !onTestListView);
    var TestList = React.memo(function () {
        return (React.createElement(View, { style: fluentTesterStyles.testList },
            React.createElement(ScrollView, __assign({ contentContainerStyle: fluentTesterStyles.testListContainerStyle }, testProps(TESTPAGE_BUTTONS_SCROLLVIEWER)), sortedTestComponents.map(function (description, index) {
                return (React.createElement(Button, __assign({ appearance: "subtle", key: index, disabled: index == selectedTestIndex, onClick: function () { return setSelectedTestIndex(index); }, style: fluentTesterStyles.testListItem }, testProps(description.testPageButton), (index === 0 && { componentRef: focusOnMountRef })), description.name));
            })),
            React.createElement(TestListSeparator, { vertical: true, style: fluentTesterStyles.testListSeparator })));
    });
    var MobileTestList = React.memo(function () {
        return (React.createElement(View, { style: __assign(__assign({}, mobileStyles.testList), { display: isTestListVisible ? 'flex' : 'none' }) },
            React.createElement(ScrollView, __assign({ contentContainerStyle: fluentTesterStyles.testListContainerStyle }, testProps(TESTPAGE_BUTTONS_SCROLLVIEWER)), sortedTestComponents.map(function (description, index) {
                return (React.createElement(View, { key: index },
                    React.createElement(Text, __assign({ key: index, onPress: function () {
                            setOnTestListView(false);
                            setSelectedTestIndex(index);
                            if (Platform.OS === 'android') {
                                BackHandler.addEventListener('hardwareBackPress', onBackPress);
                            }
                        }, style: mobileStyles.testListItem }, testProps(description.testPageButton)), description.name),
                    React.createElement(Separator, { style: themedStyles.testSeparator })));
            }))));
    });
    var TestComponentView = function () {
        return (React.createElement(ScrollView, __assign({ keyboardShouldPersistTaps: "handled" // Prevents keyboard from dismissing when tapping on a text input
            , contentContainerStyle: fluentTesterStyles.testSection }, testProps(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, __assign({ style: themedStyles.root, accessible: Platform.OS !== 'ios' }, testProps(ROOT_VIEW)),
        React.createElement(Header, { enableSinglePaneView: enableSinglePaneView, enableBackButtonIOS: !onTestListView, onBackButtonPressedIOS: onBackPress }),
        React.createElement(HeaderSeparator, null),
        React.createElement(View, { style: fluentTesterStyles.testRoot },
            enableSinglePaneView ? React.createElement(MobileTestList, null) : React.createElement(TestList, null),
            isTestSectionVisible && React.createElement(TestComponentView, null))));
};
//# sourceMappingURL=FluentTester.js.map