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 { BASE_TESTPAGE, TESTPAGE_BUTTONS_SCROLLVIEWER, TESTPAGE_CONTENT_SCROLLVIEWER } from '@fluentui-react-native/e2e-testing';
import { ROOT_VIEW } from '@fluentui-react-native/e2e-testing';
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';
const getThemedStyles = 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(RNText, { style: fluentTesterStyles.noTest }, "Select a component from the test list.");
};
const HeaderSeparator = Separator.customize((t) => ({
    color: t.colors.bodyFrameDivider,
    separatorWidth: 2,
}));
const TestListSeparator = Separator.customize((t) => ({
    color: t.colors.menuDivider,
    separatorWidth: 2,
}));
const Header = React.memo((props) => {
    const { enableSinglePaneView, enableBackButtonIOS, onBackButtonPressedIOS } = props;
    const theme = useTheme();
    const headerStyle = enableSinglePaneView ? fluentTesterStyles.headerWithBackButton : fluentTesterStyles.header;
    const backButtonTitle = I18nManager.isRTL ? 'Back ›' : '‹ Back';
    return (React.createElement(View, { style: headerStyle },
        React.createElement(Text, { style: fluentTesterStyles.testHeader, variant: "heroLargeSemibold", color: theme.host.palette?.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
const filteredTestComponents = tests.filter((test) => test.platforms.includes(Platform.OS));
const sortedTestComponents = filteredTestComponents.sort((a, b) => a.name.localeCompare(b.name));
export const FluentTester = (props) => {
    const { enableSinglePaneView } = props;
    const [selectedTestIndex, setSelectedTestIndex] = React.useState(-1);
    const [onTestListView, setOnTestListView] = React.useState(true);
    const theme = useTheme();
    const themedStyles = getThemedStyles(theme);
    const onBackPress = React.useCallback(() => {
        setOnTestListView(true);
        if (Platform.OS === 'android') {
            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 (Platform.OS === 'win32') {
            focusOnMountRef.current.focus();
        }
    }, []);
    const RootView = Platform.select({
        ios: SafeAreaView,
        default: View,
    });
    const isTestListVisible = !enableSinglePaneView || (enableSinglePaneView && onTestListView);
    const isTestSectionVisible = !enableSinglePaneView || (enableSinglePaneView && !onTestListView);
    const TestList = React.memo(() => {
        return (React.createElement(View, { style: fluentTesterStyles.testList },
            React.createElement(ScrollView, { contentContainerStyle: fluentTesterStyles.testListContainerStyle, ...testProps(TESTPAGE_BUTTONS_SCROLLVIEWER) }, sortedTestComponents.map((description, index) => {
                return (React.createElement(Button, { appearance: "subtle", key: index, disabled: index == selectedTestIndex, onClick: () => setSelectedTestIndex(index), style: fluentTesterStyles.testListItem, ...testProps(description.testPageButton), ...(index === 0 && { componentRef: focusOnMountRef }) }, description.name));
            })),
            React.createElement(TestListSeparator, { vertical: true, style: fluentTesterStyles.testListSeparator })));
    });
    const MobileTestList = React.memo(() => {
        return (React.createElement(View, { style: { ...mobileStyles.testList, display: isTestListVisible ? 'flex' : 'none' } },
            React.createElement(ScrollView, { contentContainerStyle: fluentTesterStyles.testListContainerStyle, ...testProps(TESTPAGE_BUTTONS_SCROLLVIEWER) }, sortedTestComponents.map((description, index) => {
                return (React.createElement(View, { key: index },
                    React.createElement(Text, { key: index, onPress: () => {
                            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 })));
            }))));
    });
    const TestComponentView = () => {
        return (React.createElement(ScrollView, { 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, { 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