'use strict';
import { __assign } from "tslib";
import * as React from 'react';
import { Platform } from 'react-native';
import { useHorizontalSizeClass } from '@fluentui-react-native/experimental-appearance-additions';
import { ThemeReference, ThemeProvider } from '@fluentui-react-native/theme';
import { FluentTester } from './FluentTester';
import { testerTheme } from './theme/index';
export var FluentTesterApp = function (props) {
    var sizeClass = useHorizontalSizeClass();
    var isMobile = Platform.OS === 'android' || (Platform.OS === 'ios' && Platform.isPad === false);
    // If on iPad we are presented in a Split View or Slide Over context, show the single pane view.
    var shouldShowSinglePane = isMobile || (!isMobile && sizeClass === 'compact');
    var customTheme = new ThemeReference(testerTheme, function () {
        return {
            colors: { brandBackground2: 'red' }, // Overrides the buttonBackground color token, all other colors are kept in-tact.
        };
    }, function () {
        return {
            colors: {
                hostColorPink: 'pink',
                hostColorBrandText: 'purple',
                hostColorButtonBackground: 'yellow', // New custom color key.
            },
            spacing: {
                s1: '10px',
            },
        };
    }, function () {
        // Any other recipe.
        return {
            colors: {
                yellowBrandColor: 'yellow',
                hostColorButtonBackground: 'green', // Overrides custom color key 'hostColorButtonBackground' - it is green in theme now.
            },
        };
    });
    // Use the custom colors for Android and iOS.
    var fluentTesterTheme = isMobile ? customTheme : testerTheme;
    return (React.createElement(ThemeProvider, { theme: fluentTesterTheme },
        React.createElement(FluentTester, __assign({ enableSinglePaneView: shouldShowSinglePane }, props))));
};
//# sourceMappingURL=FluentTesterApp.js.map